| name | frontend-design |
| description | 建立獨特且生產等級的前端介面，具備高設計品質。當使用者要求建構 Web 元件、頁面、產出物、海報或應用程式時使用此技能（例如：網站、登陸頁面、儀表板、React 元件、HTML/CSS 佈局，或為任何 Web UI 進行樣式美化）。產生創意、精緻的程式碼和 UI 設計，避免泛用的 AI 美學。 |
| license | 完整條款請見 LICENSE.txt |
此技能指導建立獨特且生產等級的前端介面，避免泛用的「AI 廉價」美學。實作真正可運行的程式碼，對美學細節和創意選擇給予極高關注。
使用者提供前端需求：要建構的元件、頁面、應用程式或介面。他們可能會包含關於用途、受眾或技術限制的上下文。
設計思維
在編碼之前，理解上下文並承諾一個大膽的美學方向：
- 用途：此介面解決什麼問題？誰在使用它？
- 調性：選擇一個極端的風格方向：極簡主義、極繁主義混沌、復古未來主義、有機/自然、奢華/精緻、趣味/玩具感、編輯/雜誌風、粗獷主義/原始、裝飾藝術/幾何、柔和/粉彩、工業/實用主義等。有太多風味可供選擇。用這些作為靈感，但設計一個忠於美學方向的作品。
- 限制：技術需求（框架、效能、無障礙性）。
- 差異化：什麼讓這個設計令人難忘？有人會記住的那一件事是什麼？
關鍵：選擇清晰的概念方向並精準執行。大膽的極繁主義和精緻的極簡主義都可行 — 關鍵在於意圖性，而非強度。
然後實作可運行的程式碼（HTML/CSS/JS、React、Vue 等），要求：
- 生產等級且功能完備
- 視覺上引人注目且令人難忘
- 具有清晰美學觀點的一致性
- 每個細節都精心打磨
前端美學指南
重點關注：
- 排版：選擇美觀、獨特且有趣的字體。避免泛用字體如 Arial 和 Inter；改為選擇能提升前端美感的獨特選擇；出人意料、有個性的字體選擇。搭配一個獨特的展示字體和一個精緻的內文字體。
- 色彩與主題：承諾一致的美學方向。使用 CSS 變數確保一致性。強調色搭配鮮明的焦點色，效果優於膽怯的、均勻分配的色票。
- 動態效果：使用動畫製作效果和微互動。對於 HTML 優先使用純 CSS 方案。有 Motion 函式庫時用於 React。聚焦在高影響力的時刻：一個精心編排的頁面載入配合交錯呈現（animation-delay）比分散的微互動更令人驚喜。使用觸發捲動和出人意料的懸停狀態。
- 空間構圖：出人意料的佈局。不對稱。重疊。對角線流動。打破網格的元素。慷慨的負空間或受控的密度。
- 背景與視覺細節：營造氛圍和深度而非預設使用純色。添加與整體美學相匹配的情境效果和質感。運用創意形式如漸層網格、雜訊質地、幾何圖案、分層透明度、戲劇性陰影、裝飾性邊框、自訂游標和顆粒覆蓋。
絕不使用泛用的 AI 生成美學，如過度使用的字體系列（Inter、Roboto、Arial、系統字體）、老套的配色方案（特別是白色背景上的紫色漸層）、可預測的佈局和元件模式，以及缺乏場景特殊性的千篇一律設計。
要有創意地詮釋並做出出人意料的選擇，讓設計感覺真正為情境量身打造。每個設計都不應相同。在淺色和深色主題之間變化，使用不同字體、不同美學。絕不趨向常見選擇（例如 Space Grotesk）。
重要：將實作複雜度與美學願景相匹配。極繁設計需要精心的程式碼，包含大量動畫和效果。極簡或精緻的設計需要克制、精準，以及對間距、排版和微妙細節的細心照顧。優雅來自於對願景的出色執行。
記住：Claude 有能力創造非凡的創意作品。不要保留，展示當跳出既定框架並全力投入獨特願景時，真正能創造的成果。
