設計稽核（Refactoring UI）
知識存放在 references/ 目錄中。絕不一次載入所有內容。請依照下列鏈結順序：
SKILL.md → INDEX.md → 僅載入需要的檔案。
1. 分類需求
| 任務類型 | 訊號 | 載入內容 |
|---|---|---|
| 元件修正 | "審查這些卡片 / 這個表單 / 導覽列" | references/components/INDEX.md → 1–2 個 components/<名稱>.md |
| 畫面稽核 | "審查這個頁面 / 畫面 / 應用程式" | references/principles/INDEX.md → hierarchy.md, layout-spacing.md, typography.md, color.md；僅在相關時加入 depth.md, images.md, finishing.md |
| 重新設計 | "重新設計 / 提出更好的版本" | 畫面稽核的項目 + personality.md + systems.md （+ process.md） |
| 潤飾 | "讓它看起來更精緻 / 做最後修飾" | finishing.md, depth.md, images.md |
| 從頭設計 | "從頭設計一個……" | process.md, personality.md, systems.md，然後依需求載入主題檔案 |
同時也要識別畫面中有哪些元件（請參考 components/INDEX.md 的描述）；如果進行畫面稽核，請開啟主要 1–2 個元件的元件檔案。
2. 擷取介面
使用任何可用的方式，依優先順序如下：
- 瀏覽器工具（Claude 在 Chrome 中、內建瀏覽器、Playwright MCP）：開啟頁面，擷取螢幕截圖，然後使用該工具的 JavaScript 執行功能執行
scripts/measure_styles.js。若要限定範圍，請先執行window.__DR_ROOT = '<css 選擇器>'。 - Shell + Playwright（Claude Code）：
python3 scripts/capture.py <網址|檔案> [--selector ".card"] [--out 目錄]→ 產生螢幕截圖、灰階螢幕截圖、measurements.json。 - 僅有螢幕截圖：僅能進行視覺檢查；請告知無法取得測量數據。
- 僅有程式碼：閱讀 CSS/標記，手動計算相同的訊號。
務必執行灰階測試（PRO-03）：檢視去飽和度的版本（capture.py 會產生一個；在瀏覽器工具中套用 document.documentElement.style.filter='grayscale(1)'，擷取螢幕截圖，然後移除該樣式）。
3. 分析
- 將每個發現對應到一個原則 ID。以測量數據作為證據（
measurements.json中的鍵對應measure_styles.js註解中的 ID）。 - 依照影響優先順序檢查：層級 → 間距/佈局 → 排版 → 顏色/對比 → 深度 → 圖片 → 修飾。
- 測量數據是提示，不是最終判決：請在報告前，對照螢幕截圖確認每一項。
- 除非被要求更改，否則尊重現有的品牌/個性（PER-*）。對於重新設計，請先說明目標個性。
[process]原則指導重新設計；請勿在稽核中將其報告為缺陷。
4. 產出
A. 發現事項 — 依影響力排序，最多約 10 項，每項格式如下：
[ID] 問題 — 證據（測量值或可見的現象） → 修正（來自書中比例尺的具體數值）
B. 修正後的設計 — 除非使用者只想要評論：
- 將畫面/元件重建為一個獨立的 HTML/CSS 頁面，套用修正，使用原則檔案中的比例尺（間距 4/8/12/16/24/32/48/64…、字型 12/14/16/18/20/24/30/36/48…、5 層陰影、100–900 顏色深淺）。盡可能以並排方式顯示「前」（螢幕截圖）與「後」。
- 或者，如果使用者想要程式碼變更，請提供 CSS/標記修補（patch）。
C. 系統摘要（重新設計專用） — 使用的字型比例尺、間距比例尺、調色盤（灰色 + 主色 + 強調色，格式為 HSL）及陰影，以便團隊可以採用。
規則
- 引用 ID；切勿發明參考資料中沒有的原則。如果某件事沒有被涵蓋，請說明它不在這本書的範圍內。
- 寧可選擇少數、影響大的變更，也不要列出長長的清單。
- 不要抄襲書中的文字；參考資料是改寫後的摘要。
維護
原則檔案是事實的唯一來源。編輯它們之後，請重新產生索引和元件檔案：
python3 tools/build_indexes.py skills/design-review（腳本位於原始碼儲存庫的 tools/ 目錄中，而非已安裝的技能中）。