**Bước 1 · 收集 tóm tắt（一次问完，宁多勿少）**

Bạn có thể hỏi AskUserQuestion một cách dễ dàng hơn:

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

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

3. 招牌台词 / khẩu hiệu西语, 越个性越好；用户没想法就根据主题代写一句)

4. 导航 + 区块（默认：Giới thiệu / Bài đăng mới nhất / Liên hệ / Đăng ký,用户可加可减）

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

6. 图片来源:用户上传 vs. kỹ năng 自动生成（默认自动生成）

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

tóm tắt ngắn gọn 下面所有步骤都从这个 tóm tắt取数, 不要再回头追问。

**Bước 2 · 套用规范的 7 段式骨架**

这个风格的页面结构是固定的，不要发明新结构。把 tóm tắt 里的内容硬塞进下面 7 段：

1. **Nav hàng đầu**:左侧品牌名（小字 viết hoa toàn bộ)+ 右侧 3–4个导航链接(viết hoa toàn bộ,下划虚线)。背景延续顶部玫粉色。

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

3. **Giới thiệu**:左侧大写小标题 " GIỚI THIỆU VỀ TÔI"（红色)+ 右侧大段副标题（红色 all-caps,2 行换行）→ 下方左侧椭圆图 +椭圆手写气泡（再叠一个半色调红色装饰,比如嘴唇）→ 右侧 3 列等宽小字正文。背景:米杏。

4. **Những giọt mới nhất / Nổi bật**: 标题 "THE MỚI NHẤT DROPS"（或对应主题词）+ 两张高瘦矩形卡片，卡片标题用 all-caps黑色压在图片下半部。卡hình ảnh形式的小字说明(横虚线分隔)。左侧再来一颗椭圆手写气泡 + 半色调红色耳机插画。背景:米杏。

5. **Tại sao / Nhiệm vụ**：顶部左右并排两张椭圆图（用 Why 区生成的两张人物近景照片，不要用 icon 替代）→大写小标题 "TẠI SAO BẠN NÊN THAM GIA?" → 4 列等宽小字正文（每列一段，问句结尾)→ 右侧椭圆手写气泡 "Tham gia danh sách gửi thư của tôi" 形式 +半色调红色复古插画（比如长颈鹿或猫）。背景：米杏。**禁止用通用 icon（emoji / SVG icon / Material Các biểu tượng) 替代真实照片**。

6. **Liên hệ**:左侧 "LIÊN HỆ" + 右侧 "ĐÁNH TÔI LÊN!" 标题 → 下方左侧 3–4 行小字 + 邮箱 + 社媒 → 中间一张矩形或椭圆图 →右侧再来一颗椭圆手写气泡 + 半色调红色复古电脑/电话插画。背景:米杏。

7. **Anh hùng chân trang**:再次让巨型手写体品牌名横跨全宽出现一遍（同 Anh hùng叠化逻辑：底部插画/装饰元素遮挡品牌名顶部)→ 右上一颗椭圆手写气泡 → 底部小字 "Điều khoản & Hỗ trợ · Chính sách quyền riêng tư · Được thiết kế với [品牌]"。背景:玫粉。

Bạn có thể làm điều đó một cách dễ dàng.

**Bước 3 · 准备图片资产（用户没传就自己生）**

tóm tắt ngắn gọn:

- 用户**已上传**图片：直接用，但提醒用户照片需要满足 「暖色调、复古胶片感、人物穿砖红/酒红色、有麦克风/绿幕/红绒布等录制场景元素」 Bạn có thể làm điều đó một cách dễ dàng.

- 用户**未上传**：调用 generateImage 生成下面这 6 张（每张独立调用,nhắc nhở必须按下面写法精确控制风格，否则出图不对味）：

**MỘT. 主体肖像图（Anh hùng 用,椭圆裁切)**

```

Ảnh chân dung biên tập theo phong cách cổ điển thập niên 1970, người phụ nữ mặc áo blazer màu đỏ đất nung, cầm micro mạ crôm kiểu cổ điển, phông nền là rèm nhung màu xanh đậm hoặc đỏ, ánh sáng vonfram ấm áp, hạt phim mềm mại, vòng cổ ngọc trai, son môi đỏ, nhìn xuống hoặc nhìn nghiêng, bố cục trang bìa tạp chí, bảng màu ấm dịu, chụp bằng phim 35mm, khổ dọc 3:4

```

**B. Giới thiệu về 区椭圆图（桌面录制场景)**

```

Bàn thu âm podcast cổ điển, micro mạ crôm kiểu retro, kính mắt trên giấy kịch bản, cốc nước, rèm nhung xanh lá cây ở phía sau, bề mặt gỗ ấm áp, phong cách biên tập những năm 1970, ánh sáng dịu nhẹ ấm áp, hiệu ứng hạt phim, bảng màu đất nung và xanh lá cây rừng, tỷ lệ khung hình 3:4

```

**C / D. Những giọt mới nhất 两张卡片图（与 tóm tắt 主题相关）**

根据用户的两个 "mới nhất thả" 标题分别生成。例如标题是 "retro video game" → 一只手拿着粉色任天堂 3DS在窗帘前的复古照hình ảnh

** Đ. Tại sao 区椭圆图 ×2(不同视角的人物近景)**

```

Ảnh chụp cận cảnh theo phong cách cổ điển, hình ảnh một người phụ nữ mặc áo blazer đỏ, tay cầm điện thoại quay số màu cam kiểu cổ áp vào tai, phía sau là rèm nhung xanh lá cây, ánh sáng ấm áp đặc trưng của thập niên 70, hiệu ứng hạt phim, tỷ lệ khung hình 3:4.

```

+

```

Cận cảnh đôi tay người phụ nữ mặc áo tay đỏ đang gõ trên máy đánh chữ cổ, bàn làm việc bằng gỗ ấm áp, hiệu ứng nhiễu hạt phim, không khí biên tập thập niên 70, tỷ lệ khung hình 3:4.

```

**F. 4–5 个半色调复古装饰元素（必须透明背景!)**

这一组是风格灵魂,每个独立生成,**必须用 gemini-3.1-flash-image-preview 模型**（Hình ảnh GPT 处理透明 alpha 不可靠）,nhắc nhở模板:

```

Hình minh họa halftone duotone của [đối tượng], chỉ được thể hiện bằng các chấm màu đỏ gạch, theo phong cách in tạp chí cổ điển thập niên 1970, họa tiết chấm halftone có thể nhìn thấy, đối tượng được tách biệt trên nền trong suốt hoàn toàn với kênh alpha, không có nền tô màu, kiểu cắt PNG, bố cục phẳng đơn giản, chỉ có các chấm đỏ hiển thị, mọi thứ khác đều trong suốt.

```

[vật thể] 依次替换为：cái loa（喇叭）/ tai nghe（耳机）/ đôi môi đỏ（嘴唇）/ đầu hươu cao cổ（长颈鹿头）/ TV ống cổ điển hoặc máy tính để bàn những năm 1980 máy tính (老电视或老式电脑)。

**保险措施**：即使用了正确的 nhắc nhở,模型可能仍然给出米白底而非真透明。所以在 Bước 4 CSS里**必须给所有半色调装饰图加 `chế độ trộn-pha trộn: đen tối;`**,让米白底自动融入页面背景,只保留红点图案。这是兜底规则,不能省略。

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

**Bước 4 · 调用 tạo trang web 一次性出页（视觉 DNA 必须完整传过去）**

调 generateWebpage，prompt 里**完整粘贴**下面这份 Style DNA，再附上 Bước 1 的 tóm tắt 内容和 Bước 3 的图片清单。as_artifact: true。

---

**[DNA phong cách · 必须严格遵守]**

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

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

- `--cream`: #E5DCC2（中段米杏，Giới thiệu / Mới nhất / Tại sao / Liên hệ 背景）

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

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

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

Anh hùng 顶部玫粉到米杏之间用 8–16px顶部到画布顶上沿带一点紫灰晕染（rgba(150,140,180,0.25) 径向渐变到 rose），呼应原稿。

**字体配对（必须用 Google Fonts CDN 加载）**：

- 显示字体（品牌名、所有椭圆气泡里的手写台词）：`"Sail"` 或 `"Pacifico"` 或 `"Xin chào Tiêu đề"`,三选一,要丰满有圈、复古糖果感。品牌名字号要爆炸大,desktop 至少 18vw,溢出感强。

- 标题/导航/正文小字:`"Oswald"` 或 `"Bebas Neue"`,全部 `chuyển đổi văn bản: chữ hoa`,字距 `khoảng cách giữa các chữ cái: 0,06em`。正文小字12–13px, 行高 1.4。

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

**Anh hùng 叠化的精确实现（不能省略，不能改）**：

- Phần anh hùng 高度设为 `100vh` 或 `95vh`，使用 `vị trí: tương đối` + `tràn: ẩn`。

- 椭圆人像图：`vị trí: tuyệt đối`，水平居中（`trái: 50%; biến đổi: dịchX(-50%)`)，垂直方向 `top: 5vh``高度约 `70vh``，宽度按 3:4 比例计算（约 `52vh`）``z-index: 2````bán kính đường viền: 50% / 60%````phù hợp với đối tượng: bìa`。

- 巨型品牌名:`vị trí: tuyệt đối`,水平居中,垂直方向 `top: 50vh`（**关键**：这个数值要让文字的顶部边线落在人像cỡ chữ: 28vw```line-height: 0.85```color: var(--cream-light)```z-index: 1`（**比人像低**）`` khoảng trắng: nowrap`。

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

- 椭圆台词气泡:`vị trí: tuyệt đối; phải: 6%; trên cùng: 25%; chỉ mục z: 3`.

- 半色调装饰图（喇叭等）：`vị trí: tuyệt đối; phải: 3%; trên cùng: 10%`` 宽 140px `**必须配 `mix-blend-mode: darken`**。

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

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

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

- 区块之间用 `border-top: 1px nét đứt var(--brick)` 横线分隔。

- 椭圆图：`bán kính đường viền: 50% / 60%`（横向稍扁的鸭蛋形）,不要正圆。

- 椭圆手写气泡：`bán kính đường viền: 50% / 70%``,背景 `var(--cream-light)`,描边 `1px nét đứt var(--brick)`，内边距充足，气泡里的字用显示字体 + brick 色 + 斜体。

- 气泡和它指向的元素之间画一条**虚线连接线**（CSS：`viền-trái: 1px nét đứt var(--brick)` 配 `vị trí: tuyệt đối`,长度60–120px).

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

**Tại sao lại 区的硬性规则**:

- 必须用 Bước 3 Tại sao 真实人物椭圆照片，左右并排放在区块顶部。

- **禁止**用 biểu tượng cảm xúc、Material Icon、Font Awesome 等任何通用 icon 替代照片或填充 "feature 卡片"。这个风格不存在 "feature 卡片" 概念。

- 4 列正文是横向多列文字流,不是 4 个图标卡片。

**正文写法**:

- 所有 điều hướng, nhãn phần, tiêu đề thẻ, tiêu đề 全部 TẤT CẢ CHỮ HOA。

- 正文小字段落用多列（CSS `số cột: 3` 或 `số cột: 4`)实现窄栏报刊感，不要单列大段。

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

**页脚**:保留 "Điều khoản & Hỗ trợ · Chính sách quyền riêng tư · Được thiết kế với [品牌名]" 三行小字，左下角对齐，米杏色。

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

---

把 tóm tắt 里 7 段文案、图hình ảnh URL 清单（标注每张归属）一起塞进 tạoTrang web 的 nhắc nhở,让它一次出页。

**Bước 5 · 交付 + 微调入口**

Trang web 生成完后,把 链接给用户,然后用一句话主动给出 3

1. 换主体肖像图（重新跑 Bước 3 的 A 图，换一种姿态/服装）

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

3. 加 / 删 / 重排区块（按 Bước 2 的 7 段骨架调整）

不要全量重生。