design-reference — 成為參考而非模板的介面是做什麼的？

所謂「參考級」介面，是指熟悉該領域的人一看便知，這是專為此產品、且由業界頂尖人士打造的作品。敵人始終是預設值：任何模型在任何相似需求下都會產出的東西。

0. 專案規則

每項渲染作品的第一步——螢幕、元件、HTML 文件、Artifact、PDF、簡報、圖表（cloud-diagram）、橫幅——都是掃描專案的設計系統，每個工作階段對每個專案執行一次：

python3 -I ~/.claude/skills/design-reference/scripts/sweep.py <root>         # 摘要
python3 -I ~/.claude/skills/design-reference/scripts/sweep.py <root> --css   # :root 含 --ds-*

它會讀取書面規格（DESIGN.md、docs/design*）、代號（tailwind.config.*、帶有 :root/@theme 的 CSS、*.tokens.json）、元件主題、package.json、components.json、Storybook 和 Figma 連結，然後回傳判定結果：專案專屬（作品採用專案代號）或中立（採用團隊的中立調色盤）。--css 會輸出 --ds-bg --ds-surface --ds-fg --ds-fg-2 --ds-accent --ds-border --ds-font-display --ds-font-body --ds-font-mono 以及暗色區塊；團隊的範本會讀取這些變數。--json 回傳完整發現。衝突時的優先順序：規格 > 代號 > 元件。每個頁面僅限一個系統。請用一句話說明作品採用哪個系統及在哪裡找到。客戶或第三方品牌：先詢問。詳細內容請參考 references/design-system-sweep.md。

接著閱讀新螢幕將使用的共用元件。簡報和已確立的視覺世界優先於你的任何品味和此處的任何規則。 優化能保留品牌識別、文案和行為；重新設計則會取代整個視覺世界——切勿修飾已被拋棄的外觀。專案自身的設計技能（.claude/skills/）優先於此技能。

沒有 DESIGN.md 不代表專案一定是從零開始：證據存在於程式碼和現有螢幕中，而非檔案名稱。

1. 表面模式（決定後續所有事項）

根據要求的表面選擇，而非產品：

模式	訪客的成功	範例	規則
說服 (Persuade)	決定並採取行動	登陸頁、定價、活動	注意力、證明、行動呼籲——設計就是產品
操作 (Operate)	完成一項任務	應用程式、儀表板、管理後台、編輯器、設定	可掃描性、一致性、符合原生期望；品牌體現在細節中
閱讀 (Read)	理解某個內容	文件、文章、更新日誌、說明	結構利於理解，其次是閱讀舒適度
體驗 (Experience)	沉浸於作品中	作品集、畫廊、展館、展示間	作品從第一屏引領；介面退居幕後

工具的登陸頁是說服模式；時尚品牌的文件是閱讀模式；博物館的導覽是體驗模式。

2. 方向先於程式碼（兩遍步驟，強制執行）

第一遍——緊湊計畫，在開啟任何程式碼檔案之前：

主題： 一句話：目標對象是誰，此螢幕的唯一任務是什麼，以及在此主題的世界中（材料、工具、詞彙、工藝品）哪些可以成為視覺選擇。
色彩： 4–6 個命名值（十六進位或 oklch），並說明每個值的語義角色。
字型： 2 種以上角色——一個有個性的顯示字體（謹慎使用）、一個輔助內文字體、一個資料用工具字體（如有需要）。絕不能用你在其他任何專案上都會用到的組合。
佈局： 一句話概念 + ASCII 線框圖。比較兩個替代方案。
簽名元素： 此螢幕將被記住的唯一元素。所有大膽之處都集中在這裡；其餘部分保持安靜且有紀律。
動態： 一個經過編排的動態時刻，或完全沒有。說明是哪一種。

第二遍——自我批判。 針對每個項目問：「我會為另一個產品的類似需求產出這個嗎？」如果是，那就是預設值，而非選擇——重新改寫，並說明改變了什麼。完成後才開始撰寫程式碼，所有色彩和字體都從計畫中推導出來。

目前 AI 預設會產生的三種常見外觀：(1) 奶油色 #F4F1EA + 高對比襯線字體 + 赤陶色；(2) 近黑色 + 一個酸性強調色（萊姆綠或朱紅）；(3) 一份由細線條、零圓角、密集欄位組成的寬版報紙風格。如果需求要求這些風格，它們都是合理的。若軸向是自由的，不要把自由浪費在它們身上。

若要查閱風格、調色盤和字體搭配的目錄（含本地搜尋），請使用 ui-ux-pro-max（python3 scripts/search.py "<領域> <產品>"）；它是一個參考引擎，而非藝術總監——決定權仍在於你。

3. 代號是真理的唯一來源

三層：原始語意 → 語義 → 元件。元件絕不能直接讀取原始符記或原始十六進位值；它讀取 --color-surface-raised，而非 --gray-100。
格式：當專案有管線時使用 W3C DTCG 2025.10（tokens.json）；否則使用 :root 上的 CSS 自訂屬性，暗色模式寫在 @media (prefers-color-scheme: dark) 和 [data-theme] 中。
色彩盡可能使用 oklch；對比度需測量（APCA 或 WCAG），而非估算。
暗色主題是明度映射，而非顏色反轉。
完成時，若專案沒有 DESIGN.md，提議產生一份（以 YAML 格式呈現代號，並用散文說明每個數值的理由）——這是讓下一次工作階段與本次保持一致的方法。

關於尺度、元件規格（變體、尺寸、狀態優先順序、結構）以及 shadcn/Tailwind/暗色模式的備註：請參考 references/tokens-and-components.md。若要產生完整的 DTCG + CSS/Tailwind 系統：使用 sumi:tokens。

4. 建構

技術棧和元件：採用專案的。shadcn/Tailwind → references/tokens-and-components.md 並透過 context7 使用即時文件；來自 Figma 的設計 → figma:figma-design-to-code (MCP) 或專案自身的本地技能（例如 implement-from-figma, refactor-frontend-component）；寫入 Figma → figma:figma-use。
原生行動裝置：在品牌之前先尊重平台規範（HIG / Material）。
雲端或基礎架構架構圖（AWS, OCI, GCP, Azure, Cloudflare）：一律使用 cloud-diagram。這是該任務的設計技能；複製其套件（該技能 references 中的 template.html）並使用其 render.sh 進行測量。禁止使用 mermaid、通用方塊或外部圖示。
從一開始就使用真實內容：測試短、中、極長的文案；空狀態；載入狀態；錯誤狀態；無權限狀態。Lorem 佔位文字是缺陷。
文案是設計材料：控制項應說明會發生什麼事（「儲存變更」，而非「提交」）；從按鈕到提示訊息，動詞保持一致；錯誤訊息說明發生了什麼事以及如何解決；空狀態是邀請採取行動；使用主動語態和句子式大小寫。
CSS：注意會互相抵消的特定性（例如 .section × .cta），永遠不要使用 transition: all，預設情況下僅允許 transform/opacity 產生動畫。
瀏覽器表面也是設計的一部分：文字選取、插入符號、捲軸、焦點標示、底線偏移、表格數字。使用調色盤來設定它們的主題——這是最便宜的信號，表示頁面是經過建構的。

產品 UI 執行伴侶

對於原生或響應式產品 UI，請使用可用的 mobile-design-studio 技能作為唯一的選用設計伴侶：小型實作單元、行動裝置人體工學（觸控目標、安全區域、鍵盤、文字縮放、返回按鈕）、狀態/恢復檢查及平台證據。design-reference 仍然是唯一的設計方向來源：重用已批准的簡報、代號和元件；不要執行第二次品牌定位/方向流程或建立重複的代號檔案。僅讀取目前單元所需的伴侶參考文件。此技能不適用於簡報、藝術作品、海報或雲端圖表；那些應使用其專用技能。

伴侶的目錄路徑應從所選技能的原始庫存路徑解析，絕不能從產生的提示快取或假設的 ~/.claude 安裝路徑解析。如果伴侶技能不存在或僅限手動使用，請勿推廣或自動載入它；繼續使用專案方法。專案技能和強制性的平台/Figma 先決條件（例如 Expo 概覽、React Native 和 Figma design-to-code/use）仍然適用；它們不是選用的競爭性設計方向。請遵守兩個設計技能的上限：此方法加上一個伴侶，絕不能額外使用 Sumi/UI 風格堆疊。

5. 品質底線（在結果中驗證，而非意圖中）

在編輯 UI 之前立即閱讀 references/quality-floor.md。不可妥協的項目：

對比度 ≥ 4.5:1（文字），≥ 3:1（大字）；彩色底色上的次要文字應使用該底色色調，絕不能使用灰色。
所有可互動元素都必須有可見的焦點指示器；永遠不要在沒有替代方案的情況下移除外框。
觸控目標 ≥ 44×44（原生）/ 24×24 CSS px（網頁），目標之間距離 8px。
尊重 prefers-reduced-motion；動畫必須可中斷；沒有任何動畫是由鍵盤操作觸發的。
響應式設計至少向下相容至 320px 且無水平捲動；全出血佈局需考慮安全區域。
圖片需宣告尺寸；字體需設定 font-display；長列表需虛擬化。
狀態：滑鼠懸停、啟用、焦點、禁用、載入、錯誤、空狀態——全部都要實作。
禁止使用表情符號做為圖示；圖示需來自同一套圖示庫、同一筆劃粗細、同一權重。

在有限回合內檢查，而非迴圈檢查： 建置完整內容，同時擷取桌面和行動版畫面（如果有瀏覽器，透過瀏覽器截圖），一次性修復所有問題，最多再確認一輪，然後停止。無止盡的 QA 是在浪費業主金錢，做著 sumi:audit 能做得更好的事情。

6. 含規則的動態設計（Emil Kowalski）

是否該有動畫？ 每天 100+ 次（快捷鍵、調色盤）→ 永遠不要。每天數十次（懸停、列表導航）→ 大幅減少。偶爾（彈窗、抽屜、提示訊息）→ 使用標準動畫。罕見（入門引導、慶祝）→ 可以令人愉悅。
宣告一個目的：空間連續性、狀態指示、解釋、回饋、避免硬切換。「看起來不錯」不是經常看到的東西應有的目的。
緩動函數： 進入/退出 → 強烈 ease-out cubic-bezier(0.23, 1, 0.32, 1)；螢幕上移動/變形 → ease-in-out cubic-bezier(0.77, 0, 0.175, 1)；懸停/顏色 → ease；持續運動 → linear；iOS 抽屜 → cubic-bezier(0.32, 0.72, 0, 1)。UI 中永遠不要使用 ease-in。
持續時間： 按鈕 100–160ms；工具提示 125–200ms；下拉選單 150–250ms；彈窗/抽屜 200–500ms；UI 始終 < 300ms 除非是行銷用途。
沒有任何東西憑空出現：使用 scale(0.95) + opacity 0，而非 scale(0)。彈出視窗從其觸發元素縮放（transform-origin）；彈窗保持居中。:active 使用 scale(0.97)。每個區塊都用相同的入場動畫是反模式；一個精心編排的時刻則不是。

7. 藝術、畫布與創意作品

當需求是海報、封面、圖形作品、生成藝術、3D 視覺或「沒有 UI 需求的美麗作品」時，方法會改變：首先是一個視覺哲學（用 1–2 個字命名的運動 + 4–6 段關於空間、色彩、材質、尺度、節奏、構圖的論述），然後才是執行。對主題的引用應是隱晦的——了解的人能感受到，其他人則看到一個出色的構圖。90% 視覺，10% 文字。沒有任何東西超出邊界，沒有任何東西重疊。

表面	工具
靜態 PNG/PDF（海報、藝術作品、封面）	`vendor/canvas-design` (Anthropic)
2D 生成藝術、流場、粒子系統	`vendor/algorithmic-art` (p5.js, 可重複種子, 滑桿)
3D / 著色器 / 互動場景	three.js (r160+), GLSL `ShaderMaterial`；務必在拆卸時呼叫 `dispose()` 並移除監聽器
社群媒體 / 廣告 / 橫幅 / 印刷品	`references/identity-and-pieces.md`（尺寸、安全區域、行動呼籲）+ 以精確尺寸擷取的 HTML
投影片	`slides`
雲端架構圖	`cloud-diagram`
品牌指南、調色盤、商標規則	`references/identity-and-pieces.md`；品牌語調和文案 → `writing`
AI 生成的商標、圖示、品牌識別模型	`design` (claudekit: 使用 API 的生成腳本，需要金鑰)
無限畫布上的並排變體	`superdesign` 外掛（付費；需登入——由業主決定）
生成的圖像/影片	`sumi:generate` 或設定的圖像 MCP

切勿複製可識別藝術家的作品；引用其影響，創作自己的作品。字體：下載並自行託管一個具有正確字符的字體；「最接近」的系統字體是失敗而非備用方案。

8. 審查與修正現有內容

快速評分及首要修復：sumi:roast。完整審查（啟發式、認知、流程）：sumi:audit。WCAG 2.2 AA 無障礙：sumi:a11y。網頁檢查清單（無障礙、表單、動態、排版、效能、國際化）：references/quality-floor.md §B，輸出為 file:line。
修正生成的 UI 程式碼：sumi:fix。動態審查：使用 | Before | After | Why | 表格，每個發現一行。
切勿在同一個工作階段載入超過兩個設計技能：描述會互相競爭，且上下文會膨脹而不會改善答案。

9. 交付

模式             [說服 | 操作 | 閱讀 | 體驗]
方向             [主題 · 命名調色盤 · 字體組合 · 簽名元素 · 動態]
預設項           [你在自我批判中重寫了什麼以及原因]
代號             [檔案與層級；DESIGN.md 是否已產生/更新?]
品質底線         [來自 §5 的每項檢查，附測量值，而非「ok」]
狀態             [已實作的狀態列表]
擷取畫面         [桌面 + 行動版，如環境允許]
待辦事項         [僅業主能提供的資源；需由業主做出的決策]

design-reference — 成為參考而非模板的介面