此技能引導建立獨特、生產級的前端介面，避免常見的「AI 生成美學」俗套。實作真正能運作的程式碼，並對美學細節與創意選擇給予極致關注。
使用者會提供前端需求：要建構的元件、頁面、應用程式或介面。他們可能包含關於目的、受眾或技術限制的背景資訊。
設計思考
在編碼之前，先理解背景脈絡，並承諾一個大膽的美學方向：
- 目的：此介面解決什麼問題？誰會使用它？
- 調性：選擇一個極端方向：極簡主義、極繁混亂、復古未來、有機/自然、奢華/精緻、趣味/玩具、編輯/雜誌、粗獷/原始、裝飾/幾何、柔和/粉彩、工業/實用等。有許多風格可供選擇。將這些作為靈感來源，但設計出一個忠於美學方向的路線。
- 限制：技術需求（框架、效能、無障礙性）。
- 差異化：什麼讓這個設計令人難忘？使用者唯一會記得的一件事是什麼？
關鍵：選擇一個清晰的概念方向，並精準執行。大膽的極繁主義與精煉的極簡主義都可行——關鍵在於意圖，而非強度。
然後實作可運作的程式碼（HTML/CSS/JS、React、Vue 等），需符合以下要求：
- 生產級且功能完整
- 視覺上引人注目且令人難忘
- 具備一致性，並有明確的美學觀點
- 每個細節都經過精心打磨
前端美學指南
重點關注：
- 字體：選擇美觀、獨特且有趣的字體。避免使用 Arial 和 Inter 等通用字體；改為選擇能提升前端美學的獨特字體；出人意料、有特色的字體選擇。將一個獨特的展示字體與一個精緻的正文字體搭配。
- 色彩與主題：堅持一致的美學。使用 CSS 變數以保持一致性。主色搭配強烈點綴色，效果優於分散均勻的調色盤。
- 動畫：使用動畫來呈現效果與微互動。在 HTML 中優先採用純 CSS 解決方案。若可使用 Motion 函式庫，則用於 React。專注於高衝擊時刻：一個精心編排的頁面載入，搭配交錯顯示（animation-delay），所帶來的愉悅感遠勝於零散的微互動。使用觸發滾輪效果與令人驚喜的懸停狀態。
- 空間構圖：出人意料的佈局。不對稱。重疊。對角線流動。打破格線的元素。寬裕的負空間或受控的密度。
- 背景與視覺細節：營造氛圍與深度，而不是預設使用單色。加入符合整體美學的脈絡效果與紋理。運用創意形式，例如漸層網格、噪點紋理、幾何圖案、分層透明度、戲劇性陰影、裝飾邊框、自訂游標與顆粒覆蓋。
絕對不要使用一般的 AI 生成美學，例如過度使用的字型（Inter、Roboto、Arial、系統字型）、陳腔濫調的配色方案（特別是在白底上的紫色漸層）、可預測的佈局與元件模式，以及缺乏脈絡特定特性的千篇一律設計。
發揮創意進行詮釋，並做出出乎意料的選擇，讓設計感覺是真正為該脈絡而設計的。不應有任何兩個設計是相同的。在淺色與深色主題、不同字體、不同美學之間變化。絕對不要收斂於常見的選擇（例如 Space Grotesk）。
重要：讓實作的複雜度與美學願景相匹配。極繁主義的設計需要包含大量動畫與效果的繁複程式碼。極簡或精緻的設計則需要克制、精準，以及對間距、字體與微妙細節的細心關注。優雅來自於完美執行願景。
請記住：Claude 有能力做出非凡的創意工作。不要有所保留，展現當跳脫框架思考並全心投入獨特願景時，真正能創造出什麼。