frontend-design

name	前端設計思維 (Frontend Design)
description	建立獨特、生產級且高品質的前端介面。當需要構建 Web 組件、頁面、Landing Page 或應用程式時使用。

前端設計思維 (Frontend Design Skill)

本技能旨在指引建立獨特、生產級 (Production-grade) 的前端介面，避免通用的「AI 生成感」美學。實作需具備對美學細節的極致關注與創造性選擇。

設計思維 (Design Thinking)

在編碼之前，先理解上下文並承諾一個 大膽的美學方向：

• 目的 (Purpose): 這個介面解決什麼問題？誰在使用它？
• 基調 (Tone): 選擇一個極端風格：極簡主義、極繁主義混亂、其復古未來、有機自然、奢華精緻、玩味玩具感、雜誌編輯風、粗獷主義、幾何裝飾藝術等。從這些風格中汲取靈感，但設計必須忠於選定的美學方向。
• 約束 (Constraints): 技術要求 (框架、性能、無障礙性)。
• 差異性 (Differentiation): 什麼讓這個設計 令人難忘？使用者會記住的那個點是什麼？

關鍵原則: 選擇一個清晰的概念方向並精確執行。大膽的極繁主義和精緻的極簡主義都行得通——重點是 意圖 (Intentionality)，而非強度。

前端美學指南 (Frontend Aesthetics Guidelines)

專注於：

• 排版 (Typography): 選擇美觀、獨特且有趣的字體。避免像 Arial 和 Inter 這類通用字體；選擇能提升前端美感的獨特選項。將獨特的顯示字體 (Display Font) 與精緻的內文字體搭配。
• 色彩與主題 (Color & Theme): 承諾一個連貫的美學。使用 CSS 變數保持一致性。具有鮮明強調色的主色調比膽怯、平均分佈的調色盤效果更好。
• 動效 (Motion): 使用動畫來增強效果與微互動。優先使用 CSS-only 的解決方案。專注於 高影響力時刻：一個精心編排的頁面載入動畫 (搭配 animation-delay) 比分散的微互動更能帶來愉悅感。使用 Scroll Trigger 與 Hover 狀態來創造驚喜。
• 空間構成 (Spatial Composition): 嘗試意想不到的佈局。不對稱、重疊、對角線流動、打破網格的元素。使用大膽的留白 或 受控的密度。
• 背景與視覺細節: 創造氛圍與深度，而非預設使用純色。加入符合整體美學的情境效果與紋理。應用創意形式，如漸變網格 (Gradient Meshes)、噪點紋理、幾何圖案、層疊透明度、戲劇性的陰影、裝飾邊框與自定義游標。

絕對不要 使用通用的 AI生成美學，如過度使用的字體家族 (Inter, Roboto, Arial)、陳腔濫調的配色 (特別是白色背景上的紫色漸變)、可預測的佈局與組件模式，以及缺乏情境特徵的千篇一律設計。

重要: 實作的複雜度必須匹配美學願景。極繁主義設計需要精細的代碼與豐富的動畫效果；極簡主義設計則需要克制、精確以及對間距、排版與微小細節的仔細關注。優雅來自於對願景的完美執行。