메뉴
制作 1080px 电商商品详情长图。用于做商详页、详情长图、SKU 规格卡，或把商品实拍照编排成上线稿；也用于审查已有详情图是否退回了通用电商模板。品牌无关——版式骨架与 20 条硬约束可直接沿用，品牌条素材与首屏配色按接入清单替换。
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/ShuaiMXu/product-detail-system --skill product-detail-image명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SKILL.md 표시 중
| name | product-detail-image |
| description | 制作 1080px 电商商品详情长图。用于做商详页、详情长图、SKU 规格卡，或把商品实拍照编排成上线稿；也用于审查已有详情图是否退回了通用电商模板。品牌无关——版式骨架与 20 条硬约束可直接沿用，品牌条素材与首屏配色按接入清单替换。 |
完整规约在 README.md（20 条硬约束，每条带判定方法与违例形态）。
接入自己品牌看 ADOPTING.md。这里只写做事的顺序和最容易踩的坑。
动手前先填证明链。填不满说明素材不足，不要用排版技巧掩盖。
| 顺序 | 买家的怀疑 | 用哪一屏回答 | 证据文件 | 事实状态 |
|---|---|---|---|---|
| 0 | （首屏要演示的核心卖点） | hero |
三条铁律：
_missingEvidence，让人知道要补什么素材。这几类信息只能来自实物，编出来就是上线页上的假数据：
| 信息 | 唯一合法来源 |
|---|---|
| 型号、色数、尺寸、包装形式 | 本 SKU 自己的实拍包装照 |
| 色号编号与色名 | 官方色卡。没有就不做色号网格，退化成参数区 + 规格带 |
| 认证、检测、安全声明 | 检测报告 |
| 性能表现（覆盖力、显色、可洗） | 真实测试图或说明书 |
参考图的卖点不可迁移。 参考图属于那个 SKU，不属于这套系统。换商品先确认这一条。
包装可见文字可按原文呈现，但不能扩大解释——包装写「无刺激性气味」， 不等于可以写「无毒」「食品级」「儿童绝对安全」。
生成图只证明情境，不证明型号、色数、认证或性能。
REFERENCE_IMAGE=<参考图> python work/measure_reference.py # 换参考图才需要
python work/crop_product_assets.py # 裁到产品实际边界
python work/extract_colors.py # 逐支取真实色
python work/calibrate_type.py --apply # 换字体或新增字号档必跑
node work/render_detail_html.js <html> <png>
python work/stitch_slices.py <png> # 必须分块拼接，见下方坑 1
node work/validate_design_system.js # 结构自洽
python work/audit_render.py <png> # 成品图实测 14 项
两个质检脚本都要过。它们会真的拦——把字号改回旧值，validator 直接退出 1。
这几个都会静默失败，不看输出发现不了：
font-size 会悄悄落回浏览器默认 16px，
整段文字缩成一半还找不到原因。validator 有专门一条检查这个。--disable-lcd-text。align-items: flex-end
照片贴底；照片按 1080 宽渲染后不够高，上方就空出纯背景色。
换 SKU 必须按 文字区高 − 重叠段 + 照片渲染高 重新定值。规则写在文档里不等于会被执行。这三条是生成时最容易退回去的肌肉记忆：
| 套路 | 正确做法 |
|---|---|
| 给每个标题加竖条 / 色块底 / 图标 | 标题一律裸排。要强调就加大上方留白或提升层级 |
| 快扫区做成 2×2 等分四宫格 | 用 hero-split 或 wide-pair。图片面积就是权重声明 |
| 首屏压三个彩色胶囊标签 | 利益点用竖线分隔的一行文字 |
还有一条同样重要：文字与图片零重叠。标题区与媒体区是两个独立的盒子，不叠放。 缩略图尺寸下文字压图必然读不出来。（首屏是唯一例外，它有专门的蒙层规则 C11c。）
保持不变：1080px 母版、两档缝隙、两档标题字号、卖点标题必带灰副标、 免责紧跟对应卖点、收束区自成一档字号、温馨提示与 FAQ 是两张分离的灰面板。
必须重做：证明链、所有事实、素材裁切、取色、字号校准（若换字体）， 以及两个跟素材绑定、不能照抄的值：
--pd-hero-poster-height--pd-hero-bg 与 --pd-hero-scrim（两者必须相同）按品类调整：创意拼贴、色彩峰值、斜向产品只用于创意 / 儿童 / DIY 品类；
耐用品用 pd-hero--lifestyle 并切到 data-pd-theme="durable"。
换品牌时：品牌条必须换成对方的批准素材，不能重绘。详见 ADOPTING.md。
| 文件 | 内容 |
|---|---|
README.md | 20 条硬约束、Token 表、事实契约、工作流 |
ADOPTING.md | 接入自己品牌的清单，按「不换就一定出问题」排序 |
design-system/taste-profile.json | 12 条可迁移规律，每条带判定方法与失败形态 |
design-system/brand-guardrails.template.json | 品牌护栏模板，<> 处待填 |
design-system/product-detail.schema.json | 内容契约，含 proofChain |
design-system/tokens.css / components.css | 实测 Token 与 23 个组件 |
design-system/example.template.html | 骨架模板，注释说明每个结构的理由 |
design-system/visual-qa.md | 脚本判定 + 目视判定两轮清单 |