| name | ec-detail-card-skill |
| description | 用真实商品实拍图制作淘宝、天猫、拼多多、独立站和内容电商图片。通过 HTML/CSS 精确排版产品名、卖点、参数、色号和说明,使用 Claim Gate 阻止无证据的成分、产地、性能、安全、认证、比较和绝对化宣称,输出首图、副图、材质特写、多色宫格及详情长图;支持 Editorial、Swiss、Neo-Brutalism 与 Adaptive Editorial 四套生产视觉系统,并可把新的参考 UI 扩展为独立风格包。用于“做商品详情页”“电商套图”“主图五张”“淘宝详情图”“产品卖点图”“电商宣称合规”“Neo-Brutalism 商品页”“提取新的电商 UI 风格”“新增电商版式”“面料或服饰详情页”等任务。 |
电商商品图排版
用真实商品图制作可复核的电商套图。先读取共享工作流 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。
不可违背
- 保留真实商品像素:默认只裁切、缩放、抠图、校色和排版,不用生成式 AI 重绘商品、纹理、颜色、结构或使用效果。需要生成非商品背景或概念场景时,先取得用户同意,并保留服务商标识与平台要求的 AI 声明。
- 文案与图片分离:所有可读文字用 HTML/CSS 排版,不让生图模型渲染文字。
- 证据先于宣称:参数、认证、销量、性能、对比、工艺和效果只使用用户提供且可追溯的依据。缺证据就删除或改成中性事实,不编造、不用免责小字补救。
- 缺素材就删节:没有资质、工厂或 in-use 素材时删除对应分节,并在交付说明中列出缺项。
- 一套图一个系统:只选 Editorial、Swiss、Neo-Brutalism 或 Adaptive Editorial,以及一个主题。
- 克制表达:禁 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。
E01–E08 代表用途骨架,不代表唯一版式。白底整体图可用 SW01/SW02;强场景图可用 ED02/ED03;微距可用 ED05/ED06/SW05;多色可用 ED08/SW07;参数可用 ED10/SW09。素材不满足布局门槛时换布局,不生成缺失证据。
标记 Status: specification 的风格只可用于设计规划;按 references/core/style-authoring.md 完成整个风格包前,不得手工伪装成已支持的模板系统。
主图五张建议:干净首图 → 三卖点 → 最大异议回答 → 材质或场景 → 多色或资质。详情节序建议:Hero → 异议 → 卖点 → 参数 → 宫格 → 可选信任 → 可选场景 → 收尾。
五页以上套图至少使用三个布局族:图像主导、非对称分栏/档案行、网格/表格;同一布局族最多两次,相邻页不得重复相同的标题位置、图片比例和信息密度。统一字体、边距、主题、编号和图注,让变化发生在构图而不是视觉身份。
4. 初始化任务
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. 渲染
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:
拼接详情长图:
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 |
上游与授权边界
Editorial 与 Swiss 模板基于 guizang-social-card-skill 的 AGPL-3.0 模板修改,不是仅引用视觉语言;Neo-Brutalism 与 Adaptive Editorial 模板在本 Skill 内独立实现。根目录 LICENSE 保留完整协议,NOTICE 记录上游、版权和主要修改;init_task.py 会把两份文件复制到新任务。分发本 skill、生成任务或通过网络提供修改版前,仍需按实际场景确认并落实适用义务。此说明不替代法律意见。