lwg-haibao-design

海报风格演讲 HTML 页面

设计「海报风格」的演讲/展示类单页 HTML，并把用户投喂的设计图沉淀为可复用规则。两种工作流：

• 工作流 A · 沉淀：用户投喂图文设计图 → 分析配色/构图/字体/装饰 → 按模板写入 references/rules.md
• 工作流 B · 生成：用户给需求（内容 + 调性 + 比例）→ 按 references/selection.md 打分选型 → 生成指定比例的自包含 HTML → 按 references/checklist.md 验收

最重要的纪律：不自创版式。 用户否决过的版本几乎全部来自「自己发明一个风格」。库里有 24 个样本、9 套配色，选不到合适的才退回 baseline.md。用户点名 S 编号 / C 编号时直接照做。

工作流 A：投喂设计图，沉淀规则

两种分析模式：

• 完整分析（默认）：按模板全部字段分析，沉淀为样本条目（S-序号）。
• 仅配色分析：当用户标注「只需配色」「只分析配色」，或图片明显是色卡/配色灵感图（纯色块、色彩板）时，只提取色板并定义颜色角色分配，沉淀为配色方案条目（C-序号），跳过构图/字体/装饰。

1. 读图：用图像查看工具（如 ViewImage）逐张查看图片；文字过小、细节看不清时按区域裁切放大再看。多张图先全部看完再统一沉淀。只分析设计本体：忽略水印、平台/账号角标，以及手机截屏产生的顶部状态栏、底部导航条等多余部分；截屏内容被截断或压扁时按可见主体推断原设计意图。
2. 逐张分析：按 references/analysis-template.md 的字段分析（仅配色模式按该文件的「仅配色模式」字段），重点产出可直接复用的实现要点：
   • 配色：主色/辅色/强调色/中性色的 hex、面积占比、明暗关系。优先用 python3 scripts/extract_palette.py <图片路径> 拿精确色值；Pillow 缺失或脚本失败时用目测近似值并在条目中标注"近似"。
   • 构图：版面分割方式、焦点位置、留白比例、栅格、对称性、阅读层级。
   • 字体：标题风格、字号层级（相对画布短边的百分比）、字重、对齐、字距。
   • 装饰与质感：图形元素、纹理、边框、渐变/噪点/色块等。
   • 内容密度与适用比例：适合的信息量和宽高比。
   • 适用场景：什么主题、什么调性的需求该选这套设计。
3. 沉淀：将分析结果追加为 references/rules.md 的一个条目——完整分析记为样本条目（S-序号），仅配色分析记为配色方案条目（C-序号），均登记到索引表（编号取索引表末尾的占位行，用完再补一行占位，规则见 analysis-template.md）。与已有条目高度相似时合并或标注为变体，不重复堆积。原图同时存入 references/samples/（单图 S-XX.jpg，变体 S-XXa.jpg / S-XXb.jpg）并登记该目录的 README——只有文字描述会丢掉「为什么好看」的手法（S-13 的三行白底块曾因此漏记，现已补进条目）。
4. 同步更新选型表：在 references/selection.md 的样本标签表里补一行（调性 / 明暗 / 素材 / 密度 / 签名元素 / 比例适配），并把新样本按明暗补进第四节「C × S 兼容矩阵」，否则新样本在选型时是「隐形」的。
5. 汇报：告诉用户新增了哪条规则、适合什么场景，便于下次直接点名选用。

工作流 B：给需求，生成页面

1. 解析需求：主题内容、情绪调性（严肃/中性/活泼/文艺/清新）、内容密度（单句 vs 要点 vs 数据 vs 图文）、指定页面比例（任意值）、是否需要实拍图。
2. 打分选型（不许跳过）：读 references/selection.md，按五维标签做硬筛选与打分，选前 3 名；用一句话说明选中的样本为什么合适（签名元素与内容语义的关联），再进入下一步。同时用第四节「C × S 兼容矩阵」定配色，按五角色（bg / text / mid / accent / decor）填满色值。选定后查 references/samples/README.md 的文件清单，有对应原图时必看（变体图名为 S-XXa / S-XXb，不要按 S-XX.jpg 猜路径），对照签名元素的实际形态再动手。库为空或全部未命中时才用 baseline.md。
3. 内容结构化：把用户内容组织成海报型单页结构（主标题、副标、要点、数据、时间轴等），一屏闭合、层级分明、焦点唯一。
4. 比例适配：按指定比例设页面画布（方法见 baseline.md 的「比例适配规范」与「单位约定」）；字号/间距以画布短边为基准换算——.stage 声明 container-type:inline-size，竖版用 cqw、横版用 cqh，一处改全局缩放。
5. 生成 HTML：html skill 是可选增强依赖：已安装时先完整 Read 其 SKILL.md 与 references/design/frontend-design.md 作为补充；未安装就直接跳过，按 references/baseline.md（设计原理、字体层级、比例适配、单位约定）与 references/checklist.md（12 项验收）执行，不得因此中断出稿。产出为一个自包含 .html：内联 CSS/JS、语义化文件名（不要 index.html）、移动端优先、无僵尸按钮、不用 emoji、带 favicon；图片素材用本地相对路径或数据 URI，外链图片先下载到本地。修订前先 cp 当前版本到 _backup/（目录不存在时先 mkdir -p）。
6. 验收：按 references/checklist.md 的 12 项逐项核算（cqw / cqh → px 手算），能做渲染截图就截图核对（文字出界 / 元素压字 / 色面对比）。不通过就改，改完再交付（present_files 传 files: [HTML 绝对路径]）。交付说明写清选型理由、改动参数与实际验证方式。
7. 记否决：用户否掉某一版时，在 references/selection.md 第五节追加一行（样本/配色、用户原话、问题诊断），下次选型主动避开同一组合。

规则库维护

• references/rules.md：增量规则库，本技能的核心资产。每次投喂图片沉淀一条样本；生成页面时优先从中选型。读它的 CSS 片段前先看顶部「单位约定」。
• references/selection.md：选型决策器。样本五维标签、打分规则、C×S 兼容矩阵（覆盖全部 24 个样本）、配色五角色、否决记录。新增样本必须同步登记标签表与矩阵。
• references/checklist.md：交付前验收清单。12 项可核算标准 + 两条硬规矩。
• references/baseline.md：通用基线。规则库为空或不匹配时的兜底，含海报设计原理、字体层级、比例适配规范、单位约定与禁例。
• references/analysis-template.md：投喂图分析的字段模板与编号规则，沉淀条目时按此结构写。
• references/samples/：原图存档与文件清单。

外部依赖（可选，不阻塞）

1. 必备：scripts/extract_palette.py（依赖 Pillow）。Pillow 缺失时退回目测色值并在条目中标注「近似」。
2. 可选：html skill。技能根目录随环境变化（本机用户级为 ~/.workbuddy/skills/），用 Glob 搜 **/html/SKILL.md 定位；找到则依次 Read <html-skill>/SKILL.md、<html-skill>/references/design/frontend-design.md 作为补充设计规范。其自带的截图脚本（shot.py）通常不存在，不必强求。
3. 找不到 html skill / 截图脚本时：直接按 baseline.md + checklist.md 出稿与验收，并在交付说明中如实写明「未做渲染截图」或所用的替代验证方式。禁止因找不到外部技能而中断工作流 B。