鐵律
未完成設計思考階段前，不得輸出任何 UI — 在撰寫任何程式碼之前，必須先定義目的、調性（單一方向）和差異化錨點。DFII 分數必須 ≥ 8 才能進行。
前端設計技能
目的
提供創意前端設計方法論、視覺原則和品質檢查清單，以協助建構獨特、可投入生產且擺脫常見 AI 美學的介面。
流程
- 設計思考階段（強制 — 不可跳過）
- 定義目的：此介面實現何種行為？是說服性、功能性、探索性還是表達性？
- 定義調性：選擇 ONE 個主導方向（Brutalist / Editorial / Luxury / Retro-futuristic / Industrial / Organic / Playful / Maximalist / Minimalist）。不要混搭超過兩種。
- 定義差異化錨點：回答「如果螢幕截圖移除 Logo，別人如何認出它？」此錨點必須在最終 UI 中清晰可見。
- 計算 DFII — 計算設計可行性與影響指數（見下方）。分數 < 8 → 在繼續前重新思考方向。
- 載入原則 — 閱讀
reference/frontend-design-principles.md以獲取字體、色彩、動態與佈局指南 - 實作 — 根據所選美學建構可運行程式碼（Angular、Flutter 或 HTML/CSS/JS）。遵循工作區設計 Token（Angular 使用 daisyUI，Flutter 使用 AppSpacing/colorScheme）。
- 交付並包含必要輸出結構 — 包含設計方向摘要、設計系統快照、實作以及差異化說明
如需完整的設計原則、反模式與品質檢查清單，請參閱：
閱讀 reference/frontend-design-principles.md
錯誤處理
如果未指定目標框架，請在繼續前詢問使用者。 如果外部字體/素材資源無法使用，請記錄備用方案並繼續執行。
設計可行性與影響指數 (DFII)
在撰寫程式碼前，先為設計方向打分。最低分數 8 分才能繼續。
評估維度（每項 1–5 分）
| 維度 | 問題 |
|---|---|
| 美學影響力 | 此方向在視覺上多獨特且令人難忘？ |
| 情境契合度 | 此美學是否符合產品、目標受眾與目的？ |
| 實作可行性 | 是否能用現有技術清晰地建構出來？ |
| 效能安全性 | 是否能保持快速與無障礙？ |
| 一致性風險 | 此設計是否能跨螢幕/元件維護？（此項為扣分） |
公式
DFII = (影響力 + 契合度 + 可行性 + 效能) − 一致性風險
範圍：−5 → +15
解讀
| DFII | 含義 | 行動 |
|---|---|---|
| 12–15 | 優秀 | 全力執行 |
| 8–11 | 良好 | 以紀律推進 |
| 4–7 | 有風險 | 縮減範圍或效果 |
| ≤ 3 | 薄弱 | 重新思考美學方向 |
必要輸出結構
每個前端設計輸出都必須包含以下四個章節：
1. 設計方向摘要
- 美學名稱（例如「Editorial Brutalism」、「Luxury Minimal」）
- DFII 分數
- 關鍵靈感來源（概念性的 — 非視覺抄襲）
2. 設計系統快照
- 字體（附上理由 — 為什麼為這個產品選擇此字型？）
- 色彩變數（命名方式：
--color-primary、--color-accent、--color-neutral） - 間距韻律（基本單位與比例）
- 動態哲學（精簡/有目的性？或無？）
3. 實作
- 完整可運行程式碼
- 僅在意圖不明顯處加上註解
- 對於 Angular：使用 daisyUI 語意化 token（
bg-primary、text-base-content）— 不得使用硬編碼色碼 - 對於 Flutter：使用
Theme.of(context).colorScheme和AppSpacing.*token — 不得使用Color(0xFF...)
4. 差異化說明
明確指出：
「此設計避免了常見的 UI，因為它使用 X 而非 Y。」
若你無法完成此句，代表設計還不夠獨特。
操作者檢查清單（交付前關卡）
- 設計思考階段已完成（目的 + 調性 + 差異化錨點已定義）
- DFII 分數 ≥ 8
- 最終 UI 中存在一個令人難忘的設計錨點
- 無通用字體（無 Inter、Roboto、Arial、system-ui）
- 無通用色彩（無紫底白字漸層、無平淡灰色）
- 無預設佈局（無對稱卡片網格、無模板式結構）
- 程式碼符合設計雄心（極繁主義 = 複雜程式碼；極簡主義 = 精準間距）
- 具備無障礙性與效能（對比度 ≥ 4.5:1、焦點狀態、鍵盤導航）
- 必要輸出結構：四個章節均存在
- 設計不應與先前相似 — 應變化明暗主題、字體選擇、佈局個性
創意雄心準則
Claude 有能力進行非凡的創意工作。請不要保留 — 展現跳出框架思考、全心投入獨特願景時，能真正創造出什麼。
以創意解讀需求。做出令人意想不到的選擇，這些選擇應感覺是專為該情境而設計。沒有任何兩個設計共享相同的美學 DNA。
切勿在不同代之間趨向於常見選擇。 只因為 Space Grotesk、紫色漸層或對稱首頁佈局「之前有效」，正是這次不再使用它們的原因。多樣性是強制性的，而非可選的。
開始前應提問的問題（如有需要）
- 這介面是為誰設計的？情感上來說？
- 它應該讓人感到值得信賴、興奮、平靜，還是挑釁？
- 令人難忘和清晰明瞭，哪個更重要？
- 它能擴展到其他頁面/元件嗎？
- 使用者在前 3 秒內應該 感受到 什麼？
工作區整合
| 技術棧 | 設計 Token 規則 | 參考資料 |
|---|---|---|
| Angular | 僅使用 daisyUI 語意化 token — bg-primary、text-base-content、border-base-300 | angular-spa/reference/daisyui-v5-components.md |
| Flutter | Theme.of(context).colorScheme.* + AppSpacing.* — 絕不使用 Color(0xFF...) 或 EdgeInsets.all(16) | ui-standards-tokens/reference/ui-design-tokens.md |
| HTML/CSS | 僅使用 CSS 變數 — var(--color-primary) | 在 :root 區塊中定義 |
| React Native | 此技能範圍外 → 使用 mobile-developer 技能 | .claude/skills/mobile-developer/SKILL.md |
相關技能：
web-design-guidelines— 在實作後執行，以對照 Vercel Web 介面指南進行稽核design-system— 針對 Angular 和 Flutter 的 Token 合規性強制執行angular-spa— 搭配 daisyUI 的 Angular 實作模式ui-standards-tokens— Flutter 設計 Token 定義