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