前端設計
建立獨特、可投入生產的前端介面，避開千篇一律的「AI 生成」審美。提供真正可運作的代碼，並對美學細節與創意選擇投入極致關注。
設計思維（編碼前）
致力於一個 大膽的 美學方向：
- 目的：這個介面解決什麼問題？誰在使用它？
- 調性：選擇一個極端風格——極簡主義、極繁混亂、復古未來主義、有機/自然、奢華/精緻、趣味/玩具感、編輯/雜誌風、粗獷/原始、裝飾藝術/幾何、柔和/粉彩、工業/實用主義
- 限制：技術需求（框架、效能、無障礙）
- 差異化：什麼讓它令人難忘？人們會記住哪一個亮點？
選擇一個清晰的概念方向，並精準執行。大膽的極繁主義與精緻的極簡主義都可行——關鍵在於意圖明確，而非強度高低。
前端美學支柱
字體排版
選擇漂亮、獨特且有趣的字體。避免使用 Arial、Inter、Roboto、系統字型等通用字體。將一個獨特的展示字體與一個精緻的正文字體搭配使用。做出意想不到、充滿個性的選擇。
色彩與主題
堅持統一的美學風格。使用 CSS 變數保持一致性。擁有主導色並搭配強烈點綴色的配色，遠比平淡分散的調色板效果更好。
動態效果
為效果與微互動添加動畫。HTML 使用純 CSS，React 使用 Motion 函式庫。營造高衝擊時刻：一個精心編排、包含漸進式揭示的頁面載入，比分散的微互動更能帶來愉悅感。善用觸發滾動與令人驚喜的懸停狀態。
空間構成
意想不到的佈局。不對稱。重疊。對角線流動。打破網格的元素。充裕的留白空間，或是受控的密集感。
背景與視覺細節
營造氛圍與深度，而非使用純色背景。漸層網格、噪點紋理、幾何圖案、分層透明度、戲劇性的陰影、裝飾性邊框、自訂游標、顆粒覆蓋層。
絕對不要使用
- 過於泛濫的字體家族（Inter、Roboto、Arial、系統字型）
- 老套的配色方案（白色背景上的紫色漸層）
- 可預測的佈局與元件模式
- 缺乏上下文特色的模板化設計
請發揮創意解讀。沒有任何設計應該與其他設計相同。在不同生成之間，務必變換淺色/深色主題、不同字體、不同美學風格。絕不要收斂到常見的選擇上。
實作複雜度應與美學願景相匹配。極繁主義設計需要複雜的代碼。極簡主義設計則需要克制、精準，以及對間距、字體和微妙細節的細心關注。
Kevin 的設計背景
在開始任何 UI 工作之前，請先閱讀 wiki/design/design-system.md 以了解目前的設計標記。
另請參考：wiki/design/aesthetic-systems.md 以了解藝術指導原型。
相關技能
web-design-guidelines— 符合 Vercel Web 介面指南vercel-react-best-practices— React 效能最佳化frontend-design-taste— Kevin 的個人藝術指導技能modern-web-design— 設計趨勢與實作模式