體驗設計
ux-ui-kit 確保介面正確：代碼、元件、狀態、無障礙、驗證渲染。此技能決定介面該如何被使用與記憶，並將其轉化為 kit 可建置的具體決策。它回答：人們首先該注意到什麼、哪些必須保持熟悉、原創性在哪裡能發揮價值、哪些部分會移動哪些保持靜止、互動如何傳達訊息、體驗的高峰與結尾在哪裡，以及當令人印象深刻的層次被移除後還剩下什麼。
定位
| 層級 | 負責範疇 | 技能 |
|---|---|---|
| 網站策略 | 網站必須達成與傳達的目標、頁面結構、證明、信任、轉換、SEO | website-excellence |
| 體驗方向（本技能） | 注意力、熟悉度與原創性、藝術指導、構圖與節奏、互動、動態、標誌性時刻、適應、體驗驗證 | experience-design |
| 執行與驗證 | 代碼、元件、程式碼、文案、閘門 | apply-aesthetic、brandkit、design-tokens、design-component、design-code、image-to-code、ux-writing、prototype、redesign、design-review、a11y-audit、performance、design-qa |
僅在策略背景會改變介面決策時才使用。如果網站的使用者、提案或頁面目的尚未確定，請先從 website-excellence 取得，或說明假設並繼續。產品 UI、應用程式和儀表板則直接從此開始。
步驟 0：調整流程規模
在開始任何工作前，先決定深度。參考資料中的框架是判斷工具，並非每個請求都必須經歷的階段。
| 模式 | 使用時機 | 產出內容 |
|---|---|---|
| 快速 | 元件、狀態、畫面微調或既有系統中的修正 | 閱讀專案的設計決策記錄（如有）。受影響畫面的注意力順序、僅針對變更部分的互動或動態卡片、反模式掃描，然後建置。無需論文式說明。 |
| 標準 | 新頁面、流程或畫面家族，或其重新設計 | 體驗簡報與論點、注意力地圖、新穎性預算、一個方向（僅在有實際取捨時提供替代方案）、節奏地圖、互動與動態地圖、適應筆記、自我批評、決策記錄。 |
| 旗艦級 | 品牌定義網站或發佈、品牌識別重新設計，或明確要求令人難忘的設計 | 標準模式的所有內容，加上概念探索（三個真正不同的方向，比較後選擇一個）、設計的標誌性時刻、風險最高的部分的原型，以及體驗驗證計畫。 |
克制檢查。 在政府服務、結帳、驗證、設定、文件、營運儀表板或醫療/金融任務中，任務路徑的新穎性預算接近於零。個性體現在字體、清晰度、語氣、精準度和回饋品質。知道何時克制是更強的決策，這是工作的一部分。
循環流程
根據模式需求執行步驟。每個步驟指向包含方法的參考資料。
- 理解。 撰寫體驗簡報：使用者意圖、抵達情境、首要注意力、結果、語氣、需保持熟悉的元素、限制條件、人們應記住的內容。[01]
- 確立。 為每個關鍵畫面撰寫體驗論點和注意力層級（第 1 至 4 級）。論點會過濾後續所有決策。[01]
- 探索（僅限旗艦級，或當第一個想法是類別預設值時）。三個在概念上不同（而非顏色不同）的方向；比較保守、差異化和大膽的方案；選擇一個；記錄被拒絕的方案及其原因。一旦方向明確即停止探索。[02]
- 指導。 設定 3 至 7 條藝術指導規則，並將論點轉化為對佈局、字體、比例、空間、密度、顏色、圖像、表面、元件、互動、動態和響應式行為的影響。[02]
- 構圖。 繪製節奏地圖：每個區段的工作、密度和強度、靜止區域的位置、高峰的位置、結尾方式。讓內容決定其形式，而非固定使用標題、段落、三張卡片的模式。[03]
- 互動。 為有意義的互動撰寫互動卡片（意圖、示能性、觸發、回應、回饋、狀態、恢復、連續性），並涵蓋載入、空白、錯誤、成功、中斷和邊界狀態。[04]
- 編排。 製作動態地圖：哪些元素會移動、哪些保持靜止；為每個重要動態製作一張動態卡片，包含其預算類別和一個設計過的減少動態版本。[05]
- 高峰。 選擇 0 至 3 個標誌性時刻，並對每個進行標誌性測試。[06]
- 適應。 針對小螢幕、觸控、鍵盤、縮放與重排、減少動態和低效能裝置重新決定體驗；定義降級階梯。[07]
- 壓力測試與編輯。 將主要決策通過決策過濾器，將雄心勃勃的決策通過實作可行性檢查；然後進行反模式掃描、可互換性測試、概念完整性測試和七個視角的自我批評；然後移除任何不值得其位置的設計。[08]
- 交接與驗證。 將體驗規格書傳遞給建置技能。執行 kit 的閘門和
motion_audit.mjs；在約 375 和 1440 px 寬度下、僅使用鍵盤、並模擬減少動態的條件下進行渲染和檢視。[07, 08] - 驗證、精煉與記錄。 用能回答問題的最便宜方法測試風險最高的假設；優先修復影響最大的弱點，而非打磨低價值的細節；更新設計決策記錄。[08]
不可妥協的原則
- 讓必要的事物熟悉；讓有意義的事物獨特。 導航、表單、結帳、驗證、搜尋、設定和錯誤恢復應保持傳統行為，除非有使用者證據支持改變。在這些元素周圍表達品牌。
- 無障礙是設計輸入。 WCAG 2.2 AA 是基本要求。沒有任何關鍵功能僅依賴懸停、拖曳、動態、顏色或聲音。每個動態都有一個設計過的減少動態版本，而非僅是刪除。
- 沒有無任務的動態。 每個重要的動態都要說明其傳達的訊息和預算類別：必要、增強、表現、實驗性，或避免。
- 沒有無回饋與恢復的互動。 每個有意義的動作應在大約 100 毫秒內獲得確認，並且在合理的情況下可以撤銷、取消或重試。
- 每個增強功能都有失效模式。 即使移除了 JavaScript、大量媒體和動畫，內容和核心任務仍應正常運作。
- 變化必須承載意義。 僅在內容、節奏、層級或情感需要時才改變構圖、密度或強度，切勿僅為避免重複而改變。
- 參考資料提供原則，而非表面。 切勿為他人重建真實公司的識別系統；應提取參考資料為何有效的原因，並以不同方式表達。
- 有策略地使用新穎性，而非隨意散佈。 典型預算：快速模式 0，標準模式 0 到 1，旗艦級模式 1 到 2 個不熟悉的想法，集中在它們能創造意義或記憶的地方。
- 標註信心程度（見下文），切勿陳述你未測量過的結果（見 kit 驗證協議）。
- 分析規模與決策相符。 對於顯而易見的選擇無需理論；決定後繼續前進。
輸出：體驗規格書
根據模式深度填寫 templates/experience-spec.md：快速模式約十行，標準模式一到兩頁，旗艦級模式兩到四頁。在建置時，規格書是驅動程式碼的工作計畫；保持其語言不出現在頁面文案或程式碼註解中，僅在交接時總結重要的決策。對於標準和旗艦級工作，從 templates/design-decision-record.md 撰寫或更新專案的設計決策記錄，並在該專案的後續每個任務中首先閱讀它。
交接事項
| 在此做出的決策 | 由誰執行 |
|---|---|
| 藝術指導規則轉化為代碼（顏色角色、字體、間距、圓角、深度、動態模式和持續時間） | brandkit（用於新建構基礎）或 apply-aesthetic（用於既有基礎），然後 design-tokens |
| 元件及其狀態，來自互動卡片 | design-component，然後 design-code |
| 根據規格書的頁面和畫面 | design-code，或從參考資料建置時使用 image-to-code |
| 在通用性診斷後升級既有 UI | redesign |
| 用於動作、錯誤、空白狀態和回饋的文案 | ux-writing |
| 標誌性時刻和高風險互動的原型 | prototype |
| 閘門：所有狀態下的對比度、axe、焦點陷阱、響應式溢出、品味、動態 | a11y-audit、design-qa、performance 以及 node ~/.claude/ux-ui-kit/scripts/motion_audit.mjs <page> |
| 從基礎和體驗角度對畫面進行評分審查 | design-review |
kit 的規則仍約束建置：僅使用代碼、8 個元件狀態、~/.claude/ux-ui-kit/CLAUDE.md 中的驗證協議、無表情符號。
信心程度標籤
在讀者可能誤以為是事實的建議上使用。不要為每個句子加標籤。
| 標籤 | 含義 | 網站優秀度同等級 |
|---|---|---|
| 高信心度慣例 | 廣泛建立的模式，具有強烈的可用性價值 | 當前慣例，或標準 |
| 證據支持指引 | 基於標準或相關研究；說明證據涵蓋的範圍 | 標準 / 要求，強烈證據 |
| 專案特定推論 | 根據這些使用者、限制和目標推理得出；說明假設 | 推論 |
| 創意假設 | 旨在創造感覺或記憶的判斷；可測試，但無法由研究證明 | 實用啟發法 |
| 實驗性機會 | 新穎、結果不確定；需證明其合理性並在依賴前進行測試 | 有限/情境證據，加上驗證計畫 |
研究可以設定限制並標記風險。它無法選擇唯一正確的藝術指導方向。
參考資料
僅載入模式和問題所需的內容。
- 01 簡報、論點與注意力：體驗簡報、論點、三個回應層級、注意力層級、根據情境的比例、何時克制獲勝。
- 02 概念與藝術指導：創意領域、概念差異、方向卡片與比較、意圖到執行、字體、顏色、圖像、表面、使用參考資料和風格庫。
- 03 構圖、節奏與內容：跨時間設計、節奏地圖、對比與節奏、密度與暫停、內容形狀的介面、卡片、構圖工具。
- 04 互動設計：互動卡片、溝通測試、新穎性預算、回饋時機、樂觀更新、撤銷、表單、體驗狀態、輸入對等性、轉換模式、標誌性互動、重複使用。
- 05 動態系統：證據、動態的工作、預算類別、動態地圖與卡片、時機、緩動與彈簧、編排、捲軸連結動態、視圖轉換、作為設計的減少動態、效能、行動裝置、工具、測試。
- 06 標誌性時刻：時刻類型、無需壯觀即可令人難忘、高峰與結尾、選擇、標誌性測試、靜態形式、原型製作。
- 07 適應與降級：作為適應的響應式設計、輸入與能力查詢、容器查詢、縮放與重排、觸及範圍、裝置層級、降級階梯、失效模式、表達性功能的無障礙、渲染檢查。
- 08 批評、驗證與記憶：決策過濾器、實作可行性檢查、AI 反模式掃描、可互換性與完整性測試、自我批評循環、無情編輯、工藝檢查、清晰度與感受的驗證方法、設計決策記錄。