| name | product-detail-image |
| description | 制作 1080px 电商商品详情长图。用于做商详页、详情长图、SKU 规格卡，或把商品实拍照编排成上线稿；也用于审查已有详情图是否退回了通用电商模板。品牌无关——版式骨架与 20 条硬约束可直接沿用，品牌条素材与首屏配色按接入清单替换。 |
商品详情长图
完整规约在 README.md（20 条硬约束，每条带判定方法与违例形态）。
接入自己品牌看 ADOPTING.md。这里只写做事的顺序和最容易踩的坑。
第一步永远不是排版
动手前先填证明链。填不满说明素材不足，不要用排版技巧掩盖。
| 顺序 | 买家的怀疑 | 用哪一屏回答 | 证据文件 | 事实状态 |
|---|
| 0 | （首屏要演示的核心卖点） | hero | | |
三条铁律：
- 首屏场景必须演示核心卖点。 读到任何文字之前，卖点应该已经被证明过一次。
首屏与核心卖点无关，就浪费了整张图最贵的位置。
- 每屏只回答一个怀疑。 一屏两个结论，两个都记不住。
- 没有证据的卖点删掉，不要降级成文字。 把缺口写进内容 JSON 的
_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>
node work/validate_design_system.js
python work/audit_render.py <png>
两个质检脚本都要过。它们会真的拦——把字号改回旧值，validator 直接退出 1。
已经踩过的坑
这几个都会静默失败，不看输出发现不了：
- 整页截图超过 Chrome 16384px 纹理上限，尾部回绕成重复内容，
看起来像「页面渲染了两遍」。必须分块滚动截图再拼接。
- CSS 引用未定义变量不报错，
font-size 会悄悄落回浏览器默认 16px，
整段文字缩成一半还找不到原因。validator 有专门一条检查这个。
- em 占比随字重浮动（900 字重比 400 高约 8%）。按固定比例反推 font-size，
会让所有粗体标题整档偏大，偏得很均匀，肉眼只觉得「哪里不对」却指不出来。
- Windows 上 Chrome 默认开 LCD 次像素抗锯齿，文字边缘出现橙蓝彩边，
会污染色彩质检。渲染要加
--disable-lcd-text。
- 透明 / 白色商品 + 白底棚拍抠不出图。别硬抠——抠出来主体会被整个吃掉。
改用矩形图块做几何构成。
- 跨页面比字号不能按页面位置切段。两个页面段落比例不同，
切出来的区间对不齐，得到的偏差是假的。要按元素定位。
- 首屏高度是跟照片长宽比绑定的，不是常量。hero 用
align-items: flex-end
照片贴底；照片按 1080 宽渲染后不够高，上方就空出纯背景色。
换 SKU 必须按 文字区高 − 重叠段 + 照片渲染高 重新定值。
- 蒙层与照片之间的硬边，光调颜色治不好。scrim 与 hero-bg 必须同色且取自照片背景；
但改同色后仍可能有边——照片顶边本身是斜的（实测过左 220、右 200），
任何纯色都接不上一条不均匀的边。根治是让首屏留重叠段，渐变在照片自身表面淡完。
判这条要沿交界横向取三到五个点比亮度，只看一眼看不出来。
- 品牌条素材带 alpha 会显出淡线。半透明的边缘行压在页面上肉眼可见，
缩略图上又看不出来。装之前按品牌色压平。
最容易回潮的三个通用模板套路
规则写在文档里不等于会被执行。这三条是生成时最容易退回去的肌肉记忆：
| 套路 | 正确做法 |
|---|
| 给每个标题加竖条 / 色块底 / 图标 | 标题一律裸排。要强调就加大上方留白或提升层级 |
| 快扫区做成 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 | 脚本判定 + 目视判定两轮清单 |
