Huanyu-Hibiki 01 · 商品详情图生成（xy-detail-images）
用网页排版的精度做电商图：HTML 定版式 → Playwright 截图 → PNG 直传闲鱼。方法论来自 template/PPT 下的出图 skill（frontend-slides 的固定画布 + show-don't-tell 选风格、huashu-design 的反 AI slop），规格与风格来自 template/店铺参考 的爆款实拍。
🔴 不可妥协原则
- 先选后做：任何新视觉设计，先出 3 版风格预览截图给用户选（用户指定风格也要在该风格语境内出 3 个差异化诠释）。唯一豁免：同商品迭代改稿（方向已由用户选定）、用户本次会话明说"不用出三版"
- 固定画布：封面 1080×1080（1:1），详情图 1080×1440（3:4）。不做响应式，不 reflow——闲鱼 App 里图片按比例缩放展示
- 缩略图测试：封面必须通过"信息流缩略图测试"——缩到 200×200 时主标题依然可读（闲鱼列表页一屏 4-5 个商品，封面是在和同屏竞品抢 0.5 秒注意力）
- 图上文字同样受审：闲鱼对图片做 OCR 审核，图上每个字都要过合规清单（见 ../02-listing-copy/references/compliance-checklist.md），出现"第一/最/稳赚/加微信"等词 = 拒绝出图
- 交付物要诚实：没拿到真实数据背书就不写数字（不编"已帮 200+ 人"），商品截图模糊就不上截图（留占位框标注"待补"）
工作流
Step 1 · 读商品档案（或现场收集）
读 <商品目录>/商品信息.md。字段缺失则一次性问全（不挤牙膏式追问）：
| 必需字段 | 缺失时的处理 |
|---|---|
| 商品名 + 一句话定位 | 必须问 |
| 3-5 个核心卖点（用户视角的"能得到什么"） | 必须问 |
| 价格 | 必须问（影响版式调性：低价强调划算，高价强调专业） |
| 交付方式（网盘/自动发货/文件包） | 必须问（详情图最后一张必须讲清交付） |
| 数据背书（销量/收录/案例） | 有则用，无则留白，不编造 |
| 已拆解的爆款结论 | 有则把结论中的风格/钩子要素喂给 Step 2 |
Step 2 · 选风格（🔴 CHECKPOINT · show don't tell）
读 references/style-library.md，按商品调性选 3 个方向，每个方向出 1 张真实封面 HTML 并截图（用真实商品文案，不用占位文字），三张一起展示让用户选。
"互相差异明显"判据（三条至少占二，否则重选）：① 版式骨架不同——区块结构/信息层级不同，只换配色不算；② 色彩体系不同——深浅底互换或主色相不同；③ 钩子类型不同——反差/数字/身份/背书任一不同。三版全同骨架只换色 = 不合格。
与决策树的衔接：style-library 决策树选出的风格必须进 3 版（它是商品调性的最优解），其余 2 版从库内与它差异最大的方向补位；无明确调性信号时才用下方稳妥组合。
预览 HTML 落盘 <商品目录>/detail-html/previews/style-a|b|c.html（用户选定后，全套图的 HTML 存 detail-html/，见 Step 3）。
| 候选策略 | 说明 |
|---|---|
| 稳妥组合（默认） | 研究档案风 + 暗色科技风 + 流程图海报风——覆盖"专业感/产品感/效率感"三种购买心理 |
| 用户有参照 | 用户指了某家竞品风格 → 该风格出一个忠实诠释 + 同语境内两个差异化变体 |
| 已有拆解结论 | 从 03 的拆解报告选风格 → 选定风格 1 个 + 库内最优 2 个备选 |
每版标注：风格名、参照店铺、一句话"为什么适合这个商品"。展示后停止，等用户选择。用户选"混合"就按其指定组合执行。
Step 3 · 生成全套图（选定风格后）
一套详情图 = 封面 + 5-7 张竖版详情图（全套 6-8 张，硬上限 9 张 = 闲鱼单商品图片数量上限，与 production-spec 口径一致），叙事顺序照爆款通例（参照 benchmark-shops.md 中店铺2 的轮播结构）：
| # | 图 | 内容要点 | 画布 |
|---|---|---|---|
| 1 | 封面 | 主钩子（一句话痛点/反差）+ 商品名大字 + 2-3 个信任元素；信息密度克制，缩略图可读 | 1080×1080 |
| 2 | 这是什么 | 商品定位 + 一句话原理 + 适配平台图标行 | 1080×1440 |
| 3 | 能解决什么 | 3-4 个"✅ 能力"卡片，每条用户视角收益 | 1080×1440 |
| 4 | 内含清单 | 数字化背书（N 个文件/N 道流程/N 页文档），无则列内容结构 | 1080×1440 |
| 5 | 怎么用/案例 | 安装三步或效果示意；无真实截图不硬造 | 1080×1440 |
| 6 | 交付与保障 | 交付方式 + 售后说明 + 免责声明（"虚拟商品，发货后不退不换"用小字） | 1080×1440 |
上表是 6 张最小骨架；有真实案例截图、FAQ、买家反馈等素材可加第 7-9 张，但全套永远 ≤9 张（闲鱼上传限制），规划时优先砍弱信息图而不是凑满。
技术要求（详见 references/production-spec.md）：
- 单文件 HTML、内联 CSS、无外部 JS 依赖；中文字体走 Google Fonts（Noto Serif SC / Noto Sans SC）并带系统字体回退栈
- 网络字体加载等待后再截图（
--wait-for-timeout=2500） - 落盘：HTML 存
<商品目录>/detail-html/，PNG 存<商品目录>/images/01-封面.png起编号
Step 4 · 导出与自检
逐张截图导出后，按下表逐项检查，任何一项不过就改 HTML 重出：
| # | 检查项 | 判定 |
|---|---|---|
| 1 | 缩略图测试 | 封面缩到 200×200 主标题仍可读 |
| 2 | OCR 合规 | 图上所有文字过 02 的禁词清单（../02-listing-copy/references/compliance-checklist.md 第 2 关），无站外引流、无绝对化用语、无收益承诺 |
| 3 | 密度 | 单图不超 3 个信息区块；正文最小 28px（1080 宽画布） |
| 4 | 一致性 | 全套同字体体系、同主色、同版式骨架（系列感是店铺2 爆款的关键特征） |
| 5 | 诚实性 | 图上每个数字、每张截图都有真实来源 |
🛑 全部通过后把整套图展示给用户，确认后交付。用户提修改 → 只改对应 HTML 再截，不重做全套。
Step 5 · 收尾
- 在
商品信息.md追加一行设计决策记录（日期 + 选定风格 + 参照店铺） - 推荐下一步：跑 02-listing-copy 配文案（图上的钩子词要与标题/正文一致，不能图说 A 文案说 B）
人 × AI 分工
- 人：提供商品信息与真实素材、选风格、终审
- AI：出 3 版预览、写 HTML、截图导出、跑合规自检
反例黑名单（不要做）
| # | 反例 | 为什么 |
|---|---|---|
| 1 | 封面塞满卖点（5 行以上小字） | 缩略图不可读，信息流里直接被划过；店铺2 封面只有一句主钩子 + 大字商品名 |
| 2 | 紫渐变 + 白卡片 + emoji 图标堆满 | AI slop 默认脸，和同赛道竞品长得一样 = 没有记忆点 |
| 3 | 编造数据背书（"已售 1000+"） | 虚假宣传，违规且翻车成本远高于收益 |
| 4 | 图上放微信/QQ/二维码 | 站外引流，限流降权甚至封号 |
| 5 | 每张图换一个版式风格 | 轮播无系列感，买家感知混乱；店铺2 全套一个视觉体系 |
| 6 | 直接把商品长文案贴上图 | 详情图是排版产物不是文档截图；文字该进 02 的商品描述 |
失败分支（fallback）
| 触发条件 | 一线处理 | 仍失败兜底 |
|---|---|---|
| Playwright 未安装 / 截图失败 | npx playwright install chromium 后重试 |
交付 HTML + 手动截图指引（浏览器窗口精确设为画布尺寸，100% 缩放截图） |
| Google Fonts 加载失败（无网络） | 回退系统字体栈（Microsoft YaHei / SimSun / 黑体），如实告知用户字体已降级 | 用户接受前不交付 |
| 商品没有可用截图/素材 | 对应版块改为纯排版结构卡，不用假图 | 标注"素材待补"占位框，交付时提醒 |
| 用户对 3 版都不满意 | 问清楚不满意的具体维度（配色/版式/钩子），按新方向重出 3 版 | 仍不满意 → 让用户找一张喜欢的竞品图作参照，按参照重出 |