前端設計審查
根據設計品質標準與你的設計系統審查 UI 實作，或從頭建立獨特、生產級的前端介面。
兩種模式
模式 1：設計審查
評估現有 UI 是否符合設計系統、三大品質支柱（流暢、品質工藝、可信賴）、無障礙性及程式碼品質。
模式 2：創意前端設計
建立避免「AI 垃圾」美學、具有清晰概念方向且精準執行的獨特介面。
創意前端設計
在編寫程式碼之前，先確定美學方向：
- 目的：這個解決方案解決什麼問題？使用者是誰？
- 調性：極簡、極繁、復古未來、有機、奢華、趣味、編輯風格、粗獷主義、裝飾藝術、柔和/粉彩、工業等。
- 限制條件：框架、效能、無障礙要求。
- 差異化：什麼讓這個設計獨特且符合情境？
美學指南
- 字體：使用能提升美感的獨特字體。將顯示字體與精緻的正文字體搭配。避免使用 Inter、Roboto、Arial、Space Grotesk。
- 色彩與主題：使用 CSS 變數建立一致的調色板。主導色彩加上銳利強調色，勝過膽怯且平均分佈的色板。
- 動態：優先使用純 CSS。一次精心編排的頁面載入搭配交錯顯現，勝過散落的微互動。
- 空間構圖：不對稱、重疊、斜向流動、打破網格的元素、大量的留白空間或受控的密集度。
- 背景：漸層網格、噪點紋理、幾何圖案、分層透明度、戲劇性陰影、顆粒覆蓋層。
避免：過度使用的字體、老套的配色方案、可預測的佈局、缺乏情境特色的千篇一律設計。
實作複雜度應與願景匹配。極繁主義 = 精細的程式碼。極簡主義 = 克制的精準。
設計審查
設計系統工作流程
實作前：
- 在 Storybook / 元件庫中檢視元件的 API 與使用方式
- 使用 Figma Dev Mode 取得精確規格（間距、令牌、屬性）
- 使用設計系統元件與設計令牌進行實作
審查期間：
- 將實作與 Figma 設計圖進行比較
- 確認使用了設計令牌（而非硬編碼值）
- 檢查所有變體/狀態是否正確實作
- 標記偏差（需要設計團隊核准）
如果元件不存在：
- 檢查現有元件是否可改編使用
- 聯絡設計團隊建立新元件
- 在程式碼中記錄例外情況與理由
審查流程
- 識別使用者任務
- 在設計系統中尋找匹配的模式
- 評估美學方向
- 界定範圍（元件、功能或流程）
- 評估每個支柱
- 評分並排序問題（阻礙/重大/次要）
- 提供建議並附上設計系統範例
核心原則
- 任務完成：最少點擊次數。每個畫面都應回答「我能做什麼？」以及「接下來會發生什麼？」
- 操作層級：每個檢視 1-2 個主要操作。次要操作使用漸進式揭露。
- 入門引導：在介紹時說明功能。使用智慧預設值而非複雜設定。
- 導航：清晰的進入/離開點。返回/取消總是可用。深層流程提供麵包屑導航。
品質支柱
1. 流暢的洞察到行動
評估： 任務能否在 ≤3 次互動內完成？主要操作是否明確且單一？
警示訊號： 過多的點擊、多個相互競爭的主要按鈕、隱藏的操作、死路。
2. 品質是工藝
評估：
- 設計系統合規性：符合 Figma 規格，使用設計令牌
- 美學方向：獨特字體、一致色彩、刻意設計的動態
- 無障礙性：最低 C 級（WCAG 2.1 A），理想 B 級（WCAG 2.1 AA）
警示訊號： 通用的 AI 美學、硬編碼值、實作與 Figma 不符、換行破壞、缺少焦點指示器。
3. 可信賴的構建
評估：
- AI 透明度：AI 生成內容的免責聲明
- 錯誤透明度：提供可操作的錯誤訊息
警示訊號： 缺少 AI 免責聲明、不提供指引的模糊錯誤。
審查輸出格式
請參閱 references/review-output-format.md 以取得完整的審查範本。
審查類型修飾詞
請參閱 references/review-type-modifiers.md 以取得依情境而定的審查重點領域（拉取請求、創意、設計、無障礙）。
快速檢查清單
請參閱 references/quick-checklist.md 以取得預先核准檢查清單，涵蓋設計系統合規性、美學品質、流暢性、品質工藝與可信賴構建。
模式範例
請參閱 references/pattern-examples.md 以取得創意前端與設計系統審查工作的良好/不佳範例。
致謝
創意前端原則靈感來自 Anthropic 的前端設計技能。設計審查原則與品質支柱框架由 @Quirinevwm 建立。