weiguo-long/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；圖片素材用本地相對路徑或 data 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。