# Xy Detail Images

> 闲鱼商品详情图生成（功能1）。用 HTML+CSS 制作封面（1:1）与竖版轮播详情图（3:4），经 Playwright 截图导出 PNG，直接可上传闲鱼。先出 3 版风格预览让用户选（show don't tell），风格库全部来自同赛道爆款实拍验证。触发词：生成详情图、做商品图、封面图、详情页图、闲鱼配图、xy-detail。

- Skill: `huanyu-hibiki/xy-detail-images` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add huanyu-hibiki/xy-detail-images`
- Raw SKILL.md: https://api.skillmd.com/api/skills/huanyu-hibiki/xy-detail-images/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Huanyu-Hibiki (https://skillmd.com/u/huanyu-hibiki)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/huanyu-hibiki/xy-detail-images

---


# 01 · 商品详情图生成（xy-detail-images）

用网页排版的精度做电商图：**HTML 定版式 → Playwright 截图 → PNG 直传闲鱼**。方法论来自 template/PPT 下的出图 skill（frontend-slides 的固定画布 + show-don't-tell 选风格、huashu-design 的反 AI slop），规格与风格来自 template/店铺参考 的爆款实拍。

## 🔴 不可妥协原则

1. **先选后做**：任何新视觉设计，先出 3 版风格预览截图给用户选（用户指定风格也要在该风格语境内出 3 个差异化诠释）。唯一豁免：同商品迭代改稿（方向已由用户选定）、用户本次会话明说"不用出三版"
2. **固定画布**：封面 1080×1080（1:1），详情图 1080×1440（3:4）。不做响应式，不 reflow——闲鱼 App 里图片按比例缩放展示
3. **缩略图测试**：封面必须通过"信息流缩略图测试"——缩到 200×200 时主标题依然可读（闲鱼列表页一屏 4-5 个商品，封面是在和同屏竞品抢 0.5 秒注意力）
4. **图上文字同样受审**：闲鱼对图片做 OCR 审核，图上每个字都要过合规清单（见 [../02-listing-copy/references/compliance-checklist.md](../02-listing-copy/references/compliance-checklist.md)），出现"第一/最/稳赚/加微信"等词 = 拒绝出图
5. **交付物要诚实**：没拿到真实数据背书就不写数字（不编"已帮 200+ 人"），商品截图模糊就不上截图（留占位框标注"待补"）

## 工作流

### Step 1 · 读商品档案（或现场收集）

读 `<商品目录>/商品信息.md`。字段缺失则一次性问全（不挤牙膏式追问）：

| 必需字段 | 缺失时的处理 |
|---|---|
| 商品名 + 一句话定位 | 必须问 |
| 3-5 个核心卖点（用户视角的"能得到什么"） | 必须问 |
| 价格 | 必须问（影响版式调性：低价强调划算，高价强调专业） |
| 交付方式（网盘/自动发货/文件包） | 必须问（详情图最后一张必须讲清交付） |
| 数据背书（销量/收录/案例） | 有则用，无则留白，不编造 |
| 已拆解的爆款结论 | 有则把结论中的风格/钩子要素喂给 Step 2 |

### Step 2 · 选风格（🔴 CHECKPOINT · show don't tell）

读 [references/style-library.md](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](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](../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 版 | 仍不满意 → 让用户找一张喜欢的竞品图作参照，按参照重出 |