frontend-design

此技能旨在協助您產生精緻、可投入生產環境的前端程式碼，同時刻意避免常見的 AI 生成美學。它專為需要構建視覺衝擊力強的網頁組件、登陸頁面、儀表板和完整介面的開發人員、設計師和創作者所設計。透過專注於具備意圖的設計選擇，該技能確保每一個輸出——無論是 React 組件、HTML/CSS 佈局，還是複雜的 UI 儀表板——都感覺像是經過精心打造、修飾且與場景高度契合。

• 進階 UI/UX 實作：使用 React、Vue、HTML 與 CSS 等現代框架產生程式碼，並優先考慮效能、無障礙設計與乾淨的架構。

• 精選美學導向：跳脫預設系統字體與常見的 UI 模式，提供訂製字體建議、獨特的配色方案與空間構成。

• 精緻的動態設計：運用 CSS 動畫與動態函式庫來建立具備高影響力的微互動、交錯顯示與平滑過渡，提升使用者參與度。

• 多維視覺深度：採用複雜的樣式技術，包含漸層網格、雜訊紋理、層疊透明度與幾何圖案，以營造氛圍感而非平面設計。

• 具備意圖的風格多樣性：提供廣泛的美學色調，如粗野主義、復古未來主義、有機風、極繁主義或精緻極簡主義，以符合特定的專案需求。

• 輸入要求：提供有關介面目的、目標受眾的清晰背景，以及任何如框架或效能目標等技術限制。

• 工作流方式：該技能在編碼前會先進行「設計思考」以確立概念方向，確保視覺產出不僅功能完善且令人印象深刻。

• 最佳實踐：優先使用 CSS 變數進行主題設定，使用語意化 HTML 確保無障礙性，並建立連貫的設計語言，避免濫用如紫色漸層或通用間距等 AI 常用手法。

• 客製化：預期在字體選擇與佈局上的多樣變化；建議使用者定義「美學方向」，以利模型針對品牌或專案需求進行精確調整。

• 技術限制：雖然技能可建立視覺突出的程式碼，但請確保提供具體的框架需求（如 Tailwind CSS、Framer Motion）以引導實作細節。