# Ec Detail Card Skill

> 用真实商品实拍图制作淘宝、天猫、拼多多、独立站和内容电商图片。通过 HTML/CSS 精确排版产品名、卖点、参数、色号和说明，使用 Claim Gate 阻止无证据的成分、产地、性能、安全、认证、比较和绝对化宣称，输出首图、副图、材质特写、多色宫格及详情长图；支持 Editorial、Swiss、Neo-Brutalism 与 Adaptive Editorial 四套生产视觉系统，并可把新的参考 UI 扩展为独立风格包。用于“做商品详情页”“电商套图”“主图五张”“淘宝详情图”“产品卖点图”“电商宣称合规”“Neo-Brutalism 商品页”“提取新的电商 UI 风格”“新增电商版式”“面料或服饰详情页”等任务。

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

---


# 电商商品图排版

用真实商品图制作可复核的电商套图。先读取共享工作流 `references/core/workflow.md`，再只读取一个风格文件。生产系统使用 `references/styles/editorial.md`、`references/styles/swiss.md`、`references/styles/neo-brutalism.md` 或 `references/styles/adaptive-editorial.md`。需要共享类名和内容上限时读取 `references/core/components.md`；新增风格时读取 `references/core/style-authoring.md`。交付前读取 `references/core/quality-gates.md`、`references/core/platform-profiles.md` 和 `references/core/compliance.md`。

## 不可违背

1. **保留真实商品像素**：默认只裁切、缩放、抠图、校色和排版，不用生成式 AI 重绘商品、纹理、颜色、结构或使用效果。需要生成非商品背景或概念场景时，先取得用户同意，并保留服务商标识与平台要求的 AI 声明。
2. **文案与图片分离**：所有可读文字用 HTML/CSS 排版，不让生图模型渲染文字。
3. **证据先于宣称**：参数、认证、销量、性能、对比、工艺和效果只使用用户提供且可追溯的依据。缺证据就删除或改成中性事实，不编造、不用免责小字补救。
4. **缺素材就删节**：没有资质、工厂或 in-use 素材时删除对应分节，并在交付说明中列出缺项。
5. **一套图一个系统**：只选 Editorial、Swiss、Neo-Brutalism 或 Adaptive Editorial，以及一个主题。
6. **克制表达**：禁 emoji、爆炸贴、伪认证、虚假倒计时和绝对化促销话术；角标最多一个。

## 工作流

### 1. Intake

一次收集缺失信息：

- 商品图及每张用途：整体、白底、角度、细节、场景、资质
- 品类、品牌/店铺名、产品名、目标人群和一句话定位
- 真实参数、色号、货号、可证明的卖点与证据来源
- 目标平台、类目、首图/副图/详情图数量、语言和交付格式
- 品牌字体、Logo、色值；没有则使用模板默认系统
- 图片使用权、人物肖像授权，以及是否允许生成非商品背景

信息不全时先生成“可用素材范围内”的方案，不用占位数据冒充成品。

把聊天中提供的商品文案视为待核实输入，不视为自动批准的证据。产品身份、规格、成分、产地、用途、性能、安全、认证、比较、排名和销量进入版面前，按 `references/core/compliance.md` 建立 Claim Gate 映射。

### 2. 选择平台画板

读取 `references/core/platform-profiles.md`。平台或类目规则未确认时：

- 搜索首图默认用干净商品图，不叠加卖点文字或促销角标。
- 卖点文字放副图和详情图。
- 把尺寸视为导出 profile，不宣称它等于平台最新合规规则。

### 3. 选择系统与版式

先给输入图标注 `object`（整体）、`evidence`（细节）、`atmosphere`（场景）或 `option`（颜色/角度），再给每页确定唯一任务：定位、卖点、异议、材质、参数、选项、场景、信任或收尾。按 `references/core/workflow.md` 完成路由，再从唯一选定的风格文件选择布局族；需要查类名和内容上限时读取 `references/core/components.md`。

| 商品定位 | 系统 | 推荐主题 |
|---|---|---|
| 面料、服饰、生活方式 | [Editorial](references/styles/editorial.md) | kraft-paper / forest-ink / ink-classic |
| 高端、极简、3C、独立站 | [Swiss](references/styles/swiss.md) | ikb / safety-orange |
| 深色、电影感 | [Editorial](references/styles/editorial.md) | midnight-ink |
| 年轻、活力 | [Swiss](references/styles/swiss.md) | lemon-yellow / lemon-green |
| 宠物、儿童、创意零售 | [Neo-Brutalism](references/styles/neo-brutalism.md) | pet-play / soft-kids / primary-pop |
| 青年科技、功能产品 | [Neo-Brutalism](references/styles/neo-brutalism.md) | tech-block |
| 家具、灯具、材料、香氛、克制科技 | [Adaptive Editorial](references/styles/adaptive-editorial.md) | warm-gallery / cool-concrete / sage-studio / ink-ivory |

E01–E08 代表用途骨架，不代表唯一版式。白底整体图可用 SW01/SW02；强场景图可用 ED02/ED03；微距可用 ED05/ED06/SW05；多色可用 ED08/SW07；参数可用 ED10/SW09。素材不满足布局门槛时换布局，不生成缺失证据。

标记 `Status: specification` 的风格只可用于设计规划；按 `references/core/style-authoring.md` 完成整个风格包前，不得手工伪装成已支持的模板系统。

主图五张建议：干净首图 → 三卖点 → 最大异议回答 → 材质或场景 → 多色或资质。详情节序建议：Hero → 异议 → 卖点 → 参数 → 宫格 → 可选信任 → 可选场景 → 收尾。

五页以上套图至少使用三个布局族：图像主导、非对称分栏/档案行、网格/表格；同一布局族最多两次，相邻页不得重复相同的标题位置、图片比例和信息密度。统一字体、边距、主题、编号和图注，让变化发生在构图而不是视觉身份。

### 4. 初始化任务

```bash
python <skill目录>/scripts/init_task.py <任务文件夹> --system neo_brutalism --theme pet-play
```

`--system` 可选 `editorial|swiss|neo_brutalism|adaptive_editorial`。脚本创建 `index.html`、`claims-evidence.json`、`assets/`、`output/`，并复制 `LICENSE`、`NOTICE` 与 `VERSION`；已有 `index.html` 或 `claims-evidence.json` 时拒绝覆盖。初始化前必须读取所选系统对应的唯一风格文件。

把商品图复制到任务 `assets/`，再填写 `claims-evidence.json`。`merchant_statement` 和 `inference` 只能保持 `pending`；没有正式证据时删除或中性改写对应文案。HTML 中的受控宣称用 `data-claim-id` 绑定已批准记录。

从所选风格文件选择布局族和实现骨架，在对应模板唯一的 `<!-- POSTERS_HERE -->` 插槽实现。每个 `section.poster` 使用唯一、可作为文件名的 `id`。优先组合模板已有组件；新增 CSS 以 `.poster.<board>` 开头。

### 5. 渲染

```bash
node <skill目录>/scripts/render.mjs <任务文件夹> index.html
```

让 Node 正常解析 `playwright`；特殊环境可设置 `PLAYWRIGHT_PKG` 指向 Playwright 包目录，或设置 `PLAYWRIGHT_CHROMIUM_EXECUTABLE` 指向浏览器。不要修改 skill 文件写入本机绝对路径。

渲染器先执行 `scripts/claim_gate.mjs`，再在 `output/` 生成 PNG 和 `render-report.json`。以下情况停止：缺少 `claims-evidence.json`（任务目录没有 `VERSION` 或版本号无法解析时按新任务处理，只有明确低于 1.5.0 才走 legacy 警告）；出现绝对化或市场地位用语且该条宣称未登记 `absolute_exemption`；高风险文案未登记；宣称未知、待核实、被拒绝、证据等级不足、文案不一致或缺少范围/限制；找不到 HTML、Playwright 或浏览器；没有画板；画板 ID 重复；本地图片加载失败。字体或远程资源失败写入报告并警告。

绝对化用语按禁止性表达处理：绑定任何已批准宣称都不能放行，只有注册商标、商品名称或规格型号这类官方指南列举的情形可以在宣称上写 `absolute_exemption` 说明理由，且会记入报告和警告。详见 `references/core/compliance.md`。

### 6. 校验与交付

逐张查看原尺寸 PNG，并核对 `render-report.json`：

- [ ] 商品颜色、纹理、形状和数量未被生成或误改
- [ ] 标题、参数、色号、资质和卖点均有来源
- [ ] `render-report.json.claimGate.status` 为 `ok`，所有实际使用的 `data-claim-id` 均为 `approved`
- [ ] `claimGate.exemptions` 为空；有豁免时逐条复核理由是否属于官方指南列举情形
- [ ] 没有图片加载失败、文字溢出或错误字体
- [ ] 输出尺寸、文件数和命名符合本次任务 profile
- [ ] 搜索首图与副图/详情图策略符合已确认的类目规则
- [ ] 满铺图有 `subject-map` 注释，主体没有被裁断
- [ ] 单系统、单主题、角标不超过一个
- [ ] 1080 宽正文不小于 28px；750/800 宽正文不小于 19px
- [ ] AI 素材已获准并按适用规则声明，真实商品图不标成 AI 图

拼接详情长图：

```bash
python <skill目录>/scripts/stitch.py <任务文件夹>/output/
```

位置参数是要扫描的分节图目录，`<任务文件夹>/output/` 只是默认约定，可以指向任何目录。成品默认与分节图同目录，用 `--out` 指定其他落点：`--out <目录>` 沿用默认文件名并自动建目录，`--out <完整文件路径>` 直接决定文件名（此时不要再加 `--name`）。`--name` 仍只接受文件名，需要换目录时用 `--out`。

交付分节图、长图、`render-report.json`，并说明未采用的素材、缺少的证据和仍需商家后台确认的规则。

## 文件索引

| 文件 | 用途 |
|---|---|
| `assets/template-ec-editorial.html` | Editorial 种子，含主图与详情画板 |
| `assets/template-ec-swiss.html` | Swiss 种子，含主图与详情画板 |
| `assets/template-ec-neo-brutalism.html` | Neo-Brutalism 种子，含硬边模块、主题和详情画板 |
| `assets/template-ec-adaptive-editorial.html` | Adaptive Editorial 种子，含目录、细线账本、指标格和深色行动区 |
| `scripts/init_task.py` | 创建任务目录并应用系统/主题 |
| `scripts/claim_gate.mjs` | 校验宣称清单、证据等级、状态、范围和 HTML 绑定 |
| `scripts/render.mjs` | 渲染 PNG 并执行资源完整性检查 |
| `scripts/stitch.py` | 自然排序并拼接详情长图，`--out` 指定成品落点 |
| `references/core/workflow.md` | 图片角色、内容任务、风格路由和套图节奏 |
| `references/core/components.md` | 共享字体角色、网格、图片、档案、规格和色号组件 |
| `references/core/style-authoring.md` | 从参考 UI 新增完整风格包的文件、命名、实现和验证契约 |
| `references/core/platform-profiles.md` | 平台画板与确认边界 |
| `references/core/compliance.md` | 宣称、AI、图片权利和真实性门 |
| `references/core/quality-gates.md` | 跨风格验收、风格隔离门与渲染陷阱 |
| `references/styles/editorial.md` | Editorial 原则、主题、组件身份与 ED01–ED12 |
| `references/styles/swiss.md` | Swiss 原则、主题、组件身份与 SW01–SW12 |
| `references/styles/neo-brutalism.md` | Neo-Brutalism 原则、主题、组件身份与 NB01–NB10 |
| `references/styles/adaptive-editorial.md` | 品类中立 Adaptive Editorial 视觉 DNA、主题、组件与 AE01–AE10 |
| `VERSION` | 当前 SemVer 版本；初始化任务时一并复制 |
| `UPDATE.md` | 当前版本变化、兼容性与验证命令 |
| `README.md` / `README.en.md` | GitHub 说明与安装 |
| `AGENTS.md` | Codex / Cursor 在本仓库中的工作约定 |
| `CREDITS.md` | 维护者与 Agent 参与 |
| `CONTRIBUTING.md` | 贡献与验证 |
| `SECURITY.md` | 宣称门绕过与路径问题的报告方式 |
| `LICENSE` | AGPL-3.0 完整协议 |
| `NOTICE` | Guizang 上游来源与修改声明 |

## 上游与授权边界

Editorial 与 Swiss 模板基于 `guizang-social-card-skill` 的 AGPL-3.0 模板修改，不是仅引用视觉语言；Neo-Brutalism 与 Adaptive Editorial 模板在本 Skill 内独立实现。根目录 `LICENSE` 保留完整协议，`NOTICE` 记录上游、版权和主要修改；`init_task.py` 会把两份文件复制到新任务。分发本 skill、生成任务或通过网络提供修改版前，仍需按实际场景确认并落实适用义务。此说明不替代法律意见。