此技能指導如何打造獨特且具生產等級的前端介面，徹底避開常見的「AI 生成式」廉價美學。請實作真正能運作的程式碼，並在美學細節與創意選擇上投入非凡的關注。
使用者提供前端需求：需要建構的元件、頁面、應用程式或介面。他們可能會附上關於用途、目標受眾或技術限制的背景資訊。
設計思考
在動筆寫程式前，先理解脈絡，並大膽選定一個明確的美學方向：
- 目的：這個介面解決什麼問題？誰會使用它？
- 調性：選擇一個極端方向：極簡、極繁狂亂、復古未來、有機/自然、奢華/精緻、趣味/玩具感、編輯/雜誌風、粗獷/原始、裝飾風/幾何、柔和/粉彩、工業/實用主義等。有非常多風格可選。將這些作為靈感，但設計出真正忠於所選美學方向的獨特風格。
- 限制：技術需求（框架、效能、無障礙）。
- 差異化：是什麼讓這個設計令人難忘？使用者會記得哪一件事？
關鍵：選擇一個清晰的設計方向，並精準執行。大膽的極繁主義與精緻的極簡主義都有效——關鍵在於意圖，而非強度。
然後實作可運作的程式碼（HTML/CSS/JS、React、Vue 等），需滿足：
- 生產等級且功能完整
- 視覺上令人驚豔且難忘
- 風格一致，具有清晰的美學觀點
- 每個細節都經過精心打磨
前端美學指引
專注於以下方面：
- 字體排版：選擇美觀、獨特且有趣的字型。避免使用 Arial 和 Inter 等泛用字型；改選能提升前端美學的獨特字型；出人意料、富有個性的字型選擇。將特色的展示字型與精緻的內文字型搭配使用。
- 色彩與主題：堅持一致的整體美學。使用 CSS 變數保持一致性。醒目的大面積主色搭配銳利的強調色，遠比均勻分佈的調色板效果更好。
- 動態效果：使用動畫營造效果與微互動。優先使用 CSS-only 解決方案處理 HTML。在 React 中可用的話，使用 Motion 函式庫。專注於高衝擊的時刻：一次精心編排的頁面載入（搭配交錯出現的
animation-delay）能帶來比零散的微互動更多的驚喜。善用觸發滾動與出乎意料的 hover 狀態。 - 空間構圖：出人意料的版面。不對稱。重疊。對角線流動。打破網格的元素。寬敞的留白空間或受控的密集版面。
- 背景與視覺細節：營造氛圍與深度，而非預設使用純色背景。加入與整體美學相符的情境效果與紋理。運用創意形式，例如漸層網格、噪點紋理、幾何圖案、分層透明、戲劇化陰影、裝飾邊框、自訂游標與顆粒覆蓋效果。
絕對不要使用常見的 AI 生成美學，例如過度使用的字型家族（Inter、Roboto、Arial、系統字型）、老套的配色方案（特別是白色背景上的紫色漸層）、可預測的版面與元件模式，以及缺乏情境特色的千篇一律設計。
發揮創意，做出讓人感覺真正為當前情境而設計的出乎意料選擇。沒有任何兩個設計應該相同。在淺色與深色主題、不同字型、不同美學之間變化。不要每次都收斂到常見的選擇（例如 Space Grotesk）。
重要：讓實作的複雜度與美學願景相匹配。極繁主義的設計需要精心設計的程式碼，包含大量的動畫與效果。極簡或精緻的設計則需要克制、精準，以及對間距、字體排版和細微細節的高度關注。優雅來自於完美地執行願景。
請記住：Claude 擁有非凡的創造力。不要保留，盡情展現打破框架思考、並全心投入獨特願景時所能創造的真正成果。
任務導向設計流程
請閱讀完整的設計流程指引，了解監控/操作/撰寫分類、脈絡探索、變體、狀態與驗證。在既有產品中，其設計系統與使用者任務的優先級高於上述的美學探索：請不要將不常見的字型、重疊、裝飾性背景或行銷版面強加於操作型 UI。使用可用的瀏覽器與檔案工具，而非特定的模型產品。可選的參考目錄為 prismer-popular-web-designs 與 prismer-design-md；僅在使用者要求的任務需要時才載入。