lzy详情页技能包

把「多色白底商品图」稳定转成 1688 可上架的详情页长图与分屏图。核心原则：图文分离（图片内不出现任何文字与水印，文字全部由 HTML/CSS 渲染）、产品 100% 保真（优先使用原图去背合成，不用 AI 重绘产品）、设计系统先行、量化质检 + 自动修复闭环、零费用优先。

何时使用

• 用户给出同一款商品的多张不同颜色白底图，要求生成 1688 / 淘宝详情页、长图、分屏图、色卡页、SKU 展示页。
• 用户给出一张详情页参考图，要求按参考图的风格与配色复刻一版自己产品的页面。
• 用户要求复用「暖米白 + 驼棕 + 衬线宋体标题 + 细分割线」的 lzy 系列视觉规范。
• 用户要求把已有详情页技能、脚本、模板封存 / 归档 / 打包分发。

不用于：单张主图的生成（走 lzy-main-image）、单张 SKU 规格图（走 lzysku）、纯文档或 PPT 排版。

硬前置与费用策略

1. 生成前默认向用户确认：品牌名 / 品名、核心卖点、规格参数、目标人群、主推颜色、是否允许付费生图。用户明确说「不用询问」「直接生成」「直接做」时，立即跳过询问，只采用图上可见信息与合理默认，并在交付时列出需替换的占位项。
2. 默认走零费用本地合成路线：用 scripts/process_assets.py 对原白底图去背、裁切、柔光合成，不调用任何付费生图接口。用户明确要求「遇到付费直接跳过」时，此策略升级为硬约束。仅在用户主动要求真人佩戴 / AI 场景图且同意费用时，才切换到 image-to-image 通道（方法论见 references/pipeline-original.md）。
3. 规格参数表只写用户提供的数值。严禁编造尺寸、材质成分、认证、承重、功效；缺数据时写定性描述或留空并在交付说明里提示补全。品牌名一律视为占位，需交付后替换。

执行流程（按序）

Step 1 · 素材分析与设计系统

读取所有白底图，识别品类、颜色数量、统一裁切框、主推色。取产品主色生成 colors.json。先写 design-system.json（画布 750px、色板、字体对、组件规范、layout_sequence、framework.archetype 与 rationale），再写任何 HTML。模板见 assets/design-system.template.json。

版式骨架随品类选择，禁止所有产品套同一套顺序；相邻屏版式必须不同族。默认 10 屏，可增不可减。

Step 2 · 素材标准化（零费用合成）

用 scripts/process_assets.py，一次产出 prod_cNN.png（透明去背）、hero_scene.jpg、structure.jpg、detail_1..3.jpg、scene_1..3.jpg、color_hero_1..2.jpg、color_band.jpg、colors.generated.json。

命令示例（Windows）：

python scripts/process_assets.py --src "C:/path/to/白底图" --out "work/assets" \
  --config "work/colors.json" --crop 18,186,982,784 --target 964,598

--config 支持 assets/colors.config.sample.json 形式（file 为文件名关键字，适合微信 MsgID 命名），也支持直接复用上一次生成的 colors.generated.json（无关键字时按文件名顺序自动匹配）。不传 --config 则自动枚举目录内图片并命名「颜色 N」。

沿用已验证的算法要点：距白距离 (d-10)/30 羽化 alpha；椭圆柔光落影代替高斯矩形阴影；竖向渐变 + 径向柔光 + 细颗粒背景；三栏细节用与显示区等比的竖版裁切，透明区先合成到浅米底再锐化，避免 CSS 二次裁切与黑边。详见 references/field-notes.md。

Step 3 · HTML 排版

复制 assets/detail-page-template.html 为 index.html，替换品牌名、色名、色值、规格表与图片路径。每屏一个 <section class="screen sN" data-screen="N" style="height:XXXpx">，data-screen 与行内高度是截图脚本解析分屏的唯一依据，不得改成 class 或 CSS 变量。

硬约束：标题不压产品主体；文字压复杂背景加 scrim 渐变；浮层卡片 ≤ 该图 38% 且不挡主体；图标用单色 / CSS 绘制，禁止彩色系统 emoji；禁止任何购买导向 CTA（立即购买 / 下单 / 加购 / 抢购）；尾屏色带用纯 CSS 线性渐变并置于普通文档流，不用绝对定位和 object-fit 图片。

Step 4 · headless 截图与分屏

用 scripts/shot.py：

python scripts/shot.py --html "work/index.html" --out "work/full.png" \
  --screens "work/screens" --buffer 300

脚本自动探测 Chrome / Edge，用阻塞式 subprocess.run，校验截图文件与浏览器日志「bytes written to file」，失败换新 --user-data-dir 重试；视口高度加 --buffer（默认 300px）后按精确总高裁回，避免尾屏渲染断层。GCM registration 报错可忽略。

Step 5 · 程序化质检

两条命令必须都跑，输出留存进 QA 报告：

python scripts/check_whitespace.py work/screens --bg "#FBF8F1" --tol 45 --thr 0.70
python scripts/qa_scan.py work/index.html --json work/qa_scan.json

留白包络占比 < 70% 判不通过；违禁词、购买 CTA、彩色 emoji 命中任一即判不通过。禁止用目测替代这两项。

Step 6 · 逐屏视觉质检与自动修复

逐张查看 screens/screen-N.png，检查：文字重叠 / 溢出 / 孤字换行、标题被下方色块遮挡、水印压标题、产品图白底残留或黑边、三栏细节语义与标题是否对应、色卡与色名是否匹配、尾屏是否贴底、相邻屏版式是否重复。

发现问题即改 HTML 或素材，回到 Step 4 重截、Step 5 复测，直到全部通过。复检不得复用首检同一手段：带阈值的项一律程序化复核。常见缺陷与已验证修复手法见 references/field-notes.md。

Step 7 · 终审与 QA 报告

按 references/qa-template.md 的 6 个检查点做全局终审，逐屏记录 4 项判定，产出 QA_REPORT.md。任一命中问题继续修复闭环，严禁带问题交付，也禁止用「建议用户自查」代替自动修复。

Step 8 · 交付

整理目录：详情页长图 750x<总高>.png、screens/screen-1..N.png、index.html、assets/、design-system.json、colors.json、QA_REPORT.md。用 present_files 展示长图与分屏图。交付说明中明确列出：需替换的品牌占位、需补全的真实规格参数、本次是否使用付费通道（默认费用 0）、以及「首屏为静物合成图而非真人实拍」这类降级项。

不可协商的硬约束

• 产品外观 100% 保真：形状、扭结、织纹、配色、比例逐项比对原图；任一图偏离即整页不可交付。
• 图片内不出现文字、水印、二维码、logo、价格标签；所有文案由 HTML 渲染。
• 不编造参数、不写绝对化用语、不写功效与医疗暗示、不放购买 CTA。
• 每张分屏内容包络 ≥ 70%；终审 6 检查点全过；QA_REPORT.md 必须存在。
• 用户说「直接生成」时不打断、不追问；用户说「跳过付费」时不产生任何费用。

资源索引

迭代元规则

每次执行收尾时反问：「本次发现的问题，现有检查点与脚本是否覆盖？」未覆盖即补充检查点条款或脚本规则，使技能随实战持续补全。新增屏数、换品类、换配色时，同步更新 design-system.json 的 layout_sequence 与 product_colors，重跑 Step 4–7。