**ขั้นตอนที่ 1 · 收集 ย่อ（一次问完，宁多勿少）**

用 AskUserQuestion 一次性确认这些字段，不要分多轮慢慢挤：

1. 网站主题/用途（播客 / 个人主页 / 小品牌 / 活动页 / 其他——用户描述即可）

2. 品牌名（会作为巨型手写体出现，建议 ≤12 字符英文或 ≤6 字中文）

3. 招牌台词 / สโลแกน (会出现在椭圆手写气泡里，可中可英可西语，越个性越好；用户没想法就根据主题代写一句）

4. 导航 + 区块（默认：เกี่ยวกับ / หยดล่าสุด / ติดต่อ / สมัครสมาชิก，用户可加可减）

5. 各区块文案（用户没准备就自动按主题填占位文案，语气要俏皮、第一人称、带点自嘲）

6. 上的来源：用户上传 vs. ทักษะ 自动生成（默认自动生成）

7. 邮箱、社媒 handle 等联系信息（缺就用占位 hola@example.com / @example）

用户回复后，把所有字段整理进一个内部 สั้น ๆ 备用，下เลดี้所有步骤都从这个 สั้น ๆ 取数，不要再回头追问。

**ขั้นตอนที่ 2 · 套用规范的 7 段式骨架**

这个风格的页เลดี้结构是固定的，不要发明新结构。把 ย่อ 里的内容硬塞进下上 7 段：

1. **การนำทางยอดนิยม**：左侧品牌名（小字 all-caps）+ 右侧 3–4 个导航链接（all-caps，下划虚线）。背景延续顶部玫粉色。

2. **Hero（核heart叠化效果，最关键的一段，不能做成上下堆叠）**：椭圆裁切的人物/主体大上 +巨型手写体品牌名横跨整宽。**这两者必须在垂直方向上真正重叠**——品牌名的顶部 1/3 到 1/2 被人的下半部分遮挡，呈现「字从人生背后钻出来」的报刊封เลดี้感。判断标准：在最终截上上，品牌名顶端的字母（如L、l 的圆头、k 的上划）应该被人的 alpha 通道盖住，看不到完整字形。如果能完整看到品牌名所有字母，就是失败的堆叠，必须重做。→右上角浮一颗椭圆手写台词气泡 + 一个半色调红色复古小物（喇叭/麦克风/耳机三选一）。背景：玫粉。

3. **เกี่ยวกับ**：左侧大写小标题 "เกี่ยวกับฉัน"（红色）+ 右侧大段副标题（红色 all-caps，2 行换行）→ 下方左侧椭圆上 +椭圆手写气泡（再叠一个半色调红色装饰，比如嘴唇）→ 右侧 3 列等宽字正文。背景：米杏。

4. **หยดล่าสุด / วิดีโอเด่น**：标题 "หยดล่าสุด" (或对应主题词)+ 两张高瘦矩形卡ע，卡ע标题用 ตัวพิมพ์ใหญ่ทั้งหมด黑色压下半部。卡上方各有 "SEASON X EPISODE Y" 形式的字说明（横虚线分隔）。左侧再来一颗椭圆手写气泡 + 半色调红色耳机插画。背景：米杏。

5. **ทำไม / ภารกิจ**：顶部左右并排两张椭圆上（用 ทำไม 区生成的两张人物近景Photo，不要用 icon 替代）→ 大写小标题 "WHY SHOULD YOU TUNE IN?" → 4 列等宽字正文（每列一段，问句结尾）→ 右侧椭圆手写气泡 "เข้าร่วมรายชื่อผู้รับจดหมายของฉัน" 形式 +半色调红色复古插画（比如长颈鹿或猫）。背景：米杏。**禁止用通用 icon（อิโมจิ / ไอคอน SVG / ไอคอนวัสดุ）替代真实ภาพถ่าย**。

6. **ติดต่อ**：左侧 "CONTACT" + 右侧 "HIT ME UP!" 标题 → 下方左侧 3–4 行小字 + 邮箱 + 社媒 → 中间一张矩形或椭圆上 → 右侧再来一颗椭圆手写气泡 +半色调红色复古电脑/电话插画。背景：米杏。

7. **ส่วนท้ายฮีโร่**：再次让巨型手写体品牌名横跨全宽出现一遍（同 Hero叠化逻辑：底部插画/装饰元素遮挡品牌名顶部）→ 右上一颗椭圆手写气泡 → 底部字 "Terms & Support · Privacy Policy · Designed with [品牌]" 。背景：玫粉。

如果用户砍掉了某个区块就跳过，不要硬塞;但顺序不能乱。

**ขั้นตอนที่ 3 · 准备Image资产（用户没传就自己生）**

这个风格强依赖上的，没就崩了。检查 บทสรุป：

- ดาวน์โหลด红色、有麦克风/绿幕/红绒布等录制场景元素」之一才不会跳戏。不满足就在下一步靠装饰上救场。

- 用户**未上传**：调用 GenerateImage 生成下的这 6 张（每张独立调用，prompt必须按下เลดี้写法精确控制风格，否则出上不对味）：

**ก. 主体肖ภาพ（Hero 用，椭圆裁切）**

```

ภาพถ่ายบุคคลสไตล์วินเทจยุค 1970 หญิงสาวสวมเสื้อเบลเซอร์สีแดงอิฐ ถือไมโครโฟนโครเมียมสไตล์เรโทร ฉากหลังเป็นผ้าม่านกำมะหยี่สีน้ำเงินเข้มหรือแดง แสงไฟทังสเตนโทนอบอุ่น เม็ดสีฟิล์มนุ่มนวล สร้อยคอไข่มุก ลิปสติกสีแดง มองลงหรือมองไปด้านข้าง องค์ประกอบภาพแบบปกนิตยสาร โทนสีอบอุ่นนุ่มนวล ถ่ายด้วยฟิล์ม 35 มม. แนวตั้ง อัตราส่วน 3:4

```

**บี. เกี่ยวกับ 区椭圆上（桌的录制场景）**

```

โต๊ะอัดเสียงพอดแคสต์สไตล์วินเทจ ไมโครโฟนโครเมียมแบบเรโทร แว่นตาบนกระดาษบทพูด แก้วน้ำ ม่านกำมะหยี่สีเขียวด้านหลัง พื้นผิวไม้โทนอบอุ่น สไตล์นิตยสารยุค 1970 แสงไฟนุ่มนวลอบอุ่น เกรนฟิล์ม โทนสีดินเผาและเขียวป่า อัตราส่วนภาพ 3:4

```

**C / D. หยดล่าสุด 两张卡文卡（与 สั้น ๆ 主题相关）**

根据用户的两个 "latest drop" 标题分别生成。例如标题是 "วิดีโอเกมย้อนยุค" → 一只手拿着粉色任天堂 3DS在窗帘前的复古Photograph。要求：复古胶ע质感、暖色调、构上竖向 3:4。

**อี. ทำไม 区椭圆上 ×2（不同视角的人物近景）**

```

ภาพถ่ายระยะใกล้สไตล์วินเทจของหญิงสาวในเสื้อเบลเซอร์สีแดง กำลังถือโทรศัพท์หมุนสีส้มแบบเรโทรแนบหู ฉากหลังเป็นผ้าม่านกำมะหยี่สีเขียว แสงไฟอบอุ่นสไตล์ยุค 70 มีเกรนฟิล์ม อัตราส่วนภาพ 3:4

```

+

```

ภาพระยะใกล้ของมือผู้หญิงในแขนเสื้อสีแดงกำลังพิมพ์บนเครื่องพิมพ์ดีดโบราณ โต๊ะไม้สีอบอุ่น ภาพมีเกรนฟิล์ม ให้ความรู้สึกแบบนิตยสารยุค 70 อัตราส่วนภาพ 3:4

```

**ฟ. 4–5 个半色调复古装饰元素（必须透明背景！）**

这一组是风格灵魂，每个独立生成，**必须用 gemini-3.1-flash-image-preview 模型**（GPT Image 处理透明 alpha 不可靠），prompt 模板：

```

ภาพประกอบแบบฮาล์ฟโทนดูโอโทนของ [วัตถุ] ที่แสดงผลด้วยจุดสีแดงอิฐเท่านั้น สไตล์ภาพพิมพ์นิตยสารวินเทจยุค 1970 ลวดลายจุดฮาล์ฟโทนปรากฏให้เห็น ตัวแบบถูกแยกออกจากพื้นหลังด้วยพื้นหลังโปร่งใสที่มีช่องอัลฟา ไม่มีการเติมสีพื้นหลังเลย รูปแบบภาพ PNG แบบตัดขอบ องค์ประกอบเรียบง่าย มองเห็นเฉพาะจุดสีแดงเท่านั้น ส่วนอื่นๆ โปร่งใสทั้งหมด

```

[วัตถุ] 依次替换为：โทรโข่ง (喇叭)/ หูฟัง (耳机)/ ริมฝีปากสีแดง (嘴唇)/ หัวยีราฟ (长颈鹿头)/ ทีวีหลอดย้อนยุคหรือคอมพิวเตอร์เดสก์ท็อปในปี 1980 (老电视或老式电脑)

**保险措施**：即使用了正确的 prompt，模型可能仍然给出米白底而非真透明。所以ใน Step 4 ของ CSS里**必须给所有半色调装饰上加 `มิกซ์-เบลนด์-โหมด: มืดลง;`**，让米白底自动融入页的背景，只保留红点Image案。这是兜底规则，不能省略。

成完所有上后把 URL 收集到一个清单里，标注每张上归属哪个区块。

**ขั้นตอนที่ 4 · 调用 createWebpage 一次性出页（视觉 DNA 必须完整传过去）**

调 GenerateWebpage，prompt 里**完整粘贴**下เลดี้这份 Style DNA，再附上 Step 1 的 Brief 内容和 Step 3 的丅单。as_artifact: true。

---

**【 DNA สไตล์ · 必须严格遵守】**

**色板（CSS 变量级精度）**：

- `--rose`: #F4A8A0（顶部玫粉，Hero 与 Footer 背景）

- `--cream`: #E5DCC2（中段米杏，เกี่ยวกับ / ล่าสุด / ทำไม / ติดต่อ 背景）

- `--brick`: #B8472D（标题/导航文字/装饰描边）

- `--ink`: #2C1810（正文字）

- `--cream-light`: #F2EBD8（气泡内部填充）

顶部玫粉到米杏之间用 8–16px 的渐变过渡带，不要硬切。Hero顶部到画布顶上沿带一点紫灰晕染（rgba(150,140,180,0.25) 径向渐变到 rose），呼应原稿。

** 字体配对 (必须用 Google Fonts CDN 加载) **：

- 显示字体（品牌名、所有椭圆气泡里的手写台词）：`"Sail"` 或 `"Pacifico"` 或 `"สวัสดี Headline"`，三选一，要丰满有圈、复古糖果感。品牌名字号要爆炸大，desktop 至少 18vw，溢出感强。

- 标题/导航/正文字：`"Oswald"` 或 `"Bebas Neue"`,全部 `การแปลงข้อความ: ตัวพิมพ์ใหญ่`,字距 `letter-spacing: 0.06em`。正文字 12–13px,行高 1.4。

- 不要再引入第三种字体。

**ฮีโร่ 叠化的精确实现（不能省略，不能改）**：

- ส่วนฮีโร่ 高度设为 `100vh` 或 `95vh`,使用 `ตำแหน่ง: ญาติ` + `ล้น: ซ่อนอยู่`。

- 椭圆人居：`ตำแหน่ง: แน่นอน`，水平居中（`ซ้าย: 50%; แปลง: TranslateX(-50%)`），垂直方向 `top: 5vh`，高度约 `70vh`，宽度按 3:4 比例计算（约 `52vh`），`z-index: 2```border-radius: 50% / 60%```วัตถุพอดี: ปก`。

- 巨型品牌名：`ตำแหน่ง: แน่นอน`，水平居中，垂直方向 `ด้านบน: 50vh`（**关键**：这个数值要让文字的顶部边线落在人的纵向中部偏下区域，而不是人生下方）。`ขนาดตัวอักษร: 28vw```line-height: 0.85```สี: var(--cream-light)```z-index: 1`（**比人生低**），`white-space: nowrap`。

- 检查标准：渲染后人的 alpha通道（人生椭圆边缘）必须能切掉品牌名上半截字形。如果品牌名整行都看得到完整字母，调ลิตเติ้ล `top`值（让字往上挪）或增加人生高度。

- 椭圆台词气泡：`ตำแหน่ง: สัมบูรณ์; ขวา: 6%; ด้านบน: 25%; ดัชนี z: 3`，气泡和它指向的方位之间一条竖直虚线。

- 半色调装饰上（喇叭等）：`ตำแหน่ง: สัมบูรณ์; ขวา: 3%; ด้านบน: 10%`，宽 140px，**必须配 `mix-blend-mode: darken`**。

- 整个 Hero 区不要用 flex/grid 把元素排成行列——元素之间是绝对定位的叠加关系。

**布局法则（其他区块）**：

- 内容容器最大宽 1280px,居中。

- 区块之间用 `border-top: 1px dashed var(--brick)` 横线分隔。

- รูปภาพ：`border-radius: 50% / 60%`（横向稍扁的鸭蛋形），不要正圆。

- 椭圆手写气泡：`border-radius: 50% / 70%`,背景 `var(--cream-light)`,描边 `1px dashed var(--brick)`，内边距充足，气泡里的字用显示字体 + อิฐ 色 + 斜体。

- 气泡和它指向的元素之间画一条**虚线连接线**（CSS：`border-left: 1px dashed var(--brick)` 配 `position: Absolute`,长度60–120px），末端点一个小红圆点。这是这个风格的标志符号，每个区块至少出现一处。

- 半色调装饰上固定出现在区块的角落（左下、右上交替），尺寸 120–180px，**全部加 `mix-blend-mode: darken`**。

**ทำไม 区的硬性规则**：

- 必须用 Step 3 生成的两张 Why 真实人物椭圆部，左右并排放在区块顶部。

- **禁止**用 emoji、Material Icon、Font Awesome 等任何通用 icon 替代fotograf或填充 "feature 卡ע"。这个风格不存在 "feature 卡文" 概念。

- 4 列正文是横向多列文字流，不是 4 ปีที่แล้ว

**正文写法**:

- มีการนำทาง ป้ายกำกับส่วน ชื่อการ์ด พาดหัว 全部 ตัวพิมพ์ใหญ่ทั้งหมด

- 正文字段落用多列（CSS `column-count: 3` 或 `column-count: 4`）实现窄栏报刊感，不要单列大段。

- 标题色一律 `var(--brick)`, 正文色 `var(--ink)`。

**页脚**：保留 "ข้อกำหนดและการสนับสนุน · นโยบายความเป็นส่วนตัว · ออกแบบด้วย [品牌名]" 三行小字，左下角对齐，米杏色。

**响应式**：移动端品牌字号降到 28vw（保持），多列正文降到单列，椭圆上缩到 70%宽度居中，装饰上缩到 80px 并保留位置。Hero 叠化在移动端依然成立——人本度可以缩到 50vh，品牌字 top跟着调到 35vh 维持遮挡关系。

---

把 โดยย่อ 里 7 段文案、里单（标注每张归属）一起塞进 GenerateWebpage 的 prompt，让它一次出页。

**ขั้นตอนที่ 5 · 交付 + 微调入口**

生成完后，把 webpage 链接给用户，然后用一句话主动给出 3 个最高频的微调方向，让用户直接点：

1. 换主主体肖体重新跑 Step 3 ของ A 上换一种姿态/服装)

2. 调色板偏移（比如把玫粉换成蜜桃、米杏换成淡薄荷——保持双色块结构，只换色值）

3. 加 / 删 / 重排区块（按 Step 2 ของ 7 段骨架调整）

用户选了哪一项就只重跑对应步骤，不要全量重生。