frontend-design

frontend-design 技能是一款專為開發人員與設計師打造的專業工具，用於生成高品質、令人印象深刻的網頁介面，從而繞過「人工智慧風格」常見的設計侷限。此技能不依賴 Inter 或 Roboto 等常見字體，也不會產生千篇一律的紫色漸層佈局，而是鼓勵採用大膽且具意圖的設計方向，從粗獷主義 (Brutalism)、極繁主義 (Maximalism) 到精緻的極簡主義 (Minimalism) 或復古未來風格 (Retro-futuristic) 皆可運用。

此技能非常適合構建 React 元件、HTML/CSS 佈局、完整的落地頁面、儀表板以及互動式網頁成品。在程式碼生成之前，它強制執行嚴格的「設計思考」流程，確保視覺產出符合專案的具體用途、目標受眾與氛圍目標。其核心關注點在於排版、創意空間組成、進階動態設計，以及如雜訊紋理與網格漸層等細緻的背景處理。

• 能夠在 React、Vue 及原生 HTML/CSS/JS 等主流框架中執行生產級、功能完備的程式碼。

• 強制執行「設計優先」的方法論，要求使用者選擇極端的審美方向（如編輯風、有機風、工業風、裝飾藝術風），以避免產出通用乏味的介面。

• 重視高影響力的視覺細節，例如自訂字體搭配、錯位動畫呈現與打破常規的網格佈局。

• 提供實作 CSS 變數的準則，以確保複雜介面的一致性與可維護性。

• 運用進階 CSS 技術營造深度與氛圍，包括層次透明度、顆粒疊加與獨特的陰影效果。

• 確保無障礙性與效能等技術限制被整合進創意設計流程中。

• 使用者應提供具體情境，例如介面用途、品牌語調或技術限制，以獲得最佳產出。

• 若為複雜介面，請註明所需的技術堆疊（例如 Tailwind、Framer Motion 或純 CSS）。

• 當目標是打造獨特的產品視覺識別，或構建看起來像是手工精心製作的專業級介面時，使用此技能效果最佳。

• 避免請求通用的 UI 模式；相反地，應明確指定情感或風格目標（例如「粗獷/原始」或「奢華/精緻」），以觸發最有效的設計回應。

• 由於此技能在優先考慮風格衝擊力的同時亦注重技術功能，建議務必檢查產出程式碼的瀏覽器相容性與響應式設計邏輯。