Frontend Design

• 建立新的 UI 元件或頁面，視覺品質與獨特性至關重要，而不僅僅是功能上的正確性。
• 為產品或登陸頁面製作原型，且希望成果看起來是經過精心設計的，而非自動生成的。
• 探索創意方向，為品牌、應用程式或行銷活動在確立設計系統之前進行發想。
• 取代單調或千篇一律的現有介面，打造具有鮮明美學觀點的設計。

• 如果您需要嚴格遵循品牌／設計系統規範 — 此技能以創意獨特性為優先，可能會與現有的風格指南有所出入。
• 如果您只需要後端 API 或資料層 — 此技能專注於前端呈現程式碼。

在撰寫任何一行程式碼之前，Frontend Design 技能會先確立清晰的概念基調——極簡主義、極繁主義、有機風格、奢華感、工業風、編輯風等多種方向皆可涵蓋。最終呈現的介面擁有一致的設計觀點，而非拼湊而成的通用組合。

明確避免使用通用字型組合（Inter、Roboto、Arial），改以富有個性的展示字型與內文字型搭配取而代之。色彩調色盤採用 CSS 變數，以主導色調搭配鮮明的強調色，而非保守、均勻分布的配色方案。

動畫的使用講求策略性——包含精心編排的頁面載入揭場效果（帶有交錯延遲）、捲動觸發效果，以及令人驚喜的懸停狀態。HTML 優先採用純 CSS 解決方案；在 React 環境中，則視情況使用 Motion 函式庫。

背景的運用超越純色填充：漸層網格、噪點紋理、幾何圖案、多層透明疊加、戲劇性陰影、顆粒覆蓋層與裝飾性邊框，皆能依情境靈活運用，營造出層次感與氛圍。

版面配置偏好不對稱、重疊、斜向流動以及打破網格的元素。充裕的負空間或受控的密度皆經過刻意選擇——絕非預設結果。

生成的程式碼具備實用性且達到生產級別標準，支援 HTML/CSS/JS、React、Vue 及其他框架。複雜度與美學願景相符——極繁主義設計包含精緻動畫效果；極簡主義設計則呈現精準與克制的美感。

一位創辦人希望打造一個能從競爭對手中脫穎而出的登陸頁面。此技能會選定一個大膽的美學方向——例如具有強烈排版層次感的編輯風格／雜誌風格——並生成一個帶有捲動動畫與獨特色彩系統的完整可用頁面。

設計師或開發者需要一個能展現個人特質的網站。Frontend Design 技能會避免千篇一律的模板式架構，打造令人印象深刻的作品——或許採用不對稱版型、自訂游標，以及精心挑選的字型搭配組合。

一個團隊需要資料密集型的介面元件——例如表格、圖表卡片或篩選面板——同時仍需具備設計感。此技能運用實用主義或精煉的極簡美學，搭配細緻的間距與細膩的動態效果，讓元件呈現精緻質感。

活動頁面需要帶來沉浸感並在視覺上引人注目。此技能可以打造出極致豐富、動畫效果充沛的頁面，融合多層次視覺特效、震撼的字體排版，以及精心編排的入場動畫，營造出令人真心驚喜的體驗。