frontend-design 是一個搭配 Claude Code 使用的設計指導 Skill。它不提供元件或框架，而是在寫程式前強制模型回答「這個介面給誰看、要什麼語氣、有哪些限制、記憶點是什麼」，並對字體、配色、動效、構圖與背景給出具體要求，適合整頁建置、元件重構與既有頁面的視覺升級。
它是什麼
frontend-design 是 Anthropic 官方 skills 儲存庫中的前端設計 Skill，面向 Claude Code 等 AI 程式開發 Agent。它的定位是「設計決策」而非 UI 框架——不替換你的元件庫，而是在動手寫程式之前先把設計判斷講清楚，減少 AI 生成介面常見的模板味。原始碼與說明位於 github.com/anthropics/skills。
它限制了什麼
寫程式前的思考框架。 動手前先確定介面的目的、受眾、視覺語氣、技術限制與記憶點，把設計判斷明確寫進流程，而不是生成時臨時決定。
字體排印。 明確避開 Inter、Roboto 這類預設字體，要求選擇有性格的字體組合，用字體先立住氣質。
色彩與主題。 避開白底紫漸層這類常見套路，建立主色加銳利點綴色的搭配，並用 CSS 變數保持全域一致。
動效編排。 優先做一次精心編排的進場動畫，而不是到處塞微互動；純 HTML 用 CSS 實作，React 可借助 Motion 函式庫。
空間構圖。 鼓勵不對稱、重疊、對角線等打破格線的佈局，避免可預測的模板套路。
背景與細節。 可用漸層網格、噪點材質營造氛圍，但每個細節都必須服務整體美學主題。
怎麼用
自動觸發。 在 Claude Code 或 Codex 中提出前端相關任務，Agent 會識別任務類型並讀取該 Skill 的設計限制與流程。
明確觸發。 在提示詞中直接寫明「請使用 frontend-design skill 設計並實作這個頁面」。
補齊業務脈絡。 給出產品類型、目標使用者、品牌氣質、資訊優先順序、技術棧、行動裝置需求與無障礙要求。只說「做得好看點」會讓設計空間過大。
先讀既有慣例。 在既有專案中使用時，先讓 Agent 讀取現有元件、樣式變數與設計規範，再動手調整，避免新頁面與原系統割裂。
重複使用現有元件。 專案已有元件庫時優先重複使用 Button、Table 等基礎元件，把提升放在樣式層與組合方式上。
完成後驗證。 做桌面與行動裝置截圖檢查、文字溢出檢查、互動狀態檢查、主題色對比度檢查，並確認動效不會干擾使用。
適合什麼情境
整頁建置： 產品官網、活動落地頁等需要從零建立視覺方向的頁面。
元件設計與重構： React、Vue、Svelte 或 HTML/CSS 元件，提升完成度與一致性。
既有頁面視覺升級： 在現有系統中注入新的設計判斷，同時不破壞原有架構。
沒有設計稿時補原型： 快速輸出高保真、可運行的介面。
企業後台與工具介面： 重心在資訊掃描效率、操作密度與狀態清晰度，而不是一味求炫。
限制
它是設計指導，不取代 UI 框架或元件庫本身。
不提供圖像生成能力，配圖與插圖仍需另找工具。
效果取決於脈絡的完整度，產品資訊給得越少，輸出越容易回到通用模板。
生成結果需要人工驗收，尤其是無障礙、對比度與真實裝置上的表現。
常見問題
和一般提示詞的差別在哪？ 一般提示詞把美感判斷留給模型隨機發揮；這個 Skill 把目的、受眾、語氣、限制變成必須回答的問題，並給出具體禁用項與替代方向。
需要付費嗎？ 素材標註為搭配 Claude Code 使用的免費 Skill；授權與使用條件以官方儲存庫為準。
支援 Vue、Tailwind 嗎？ 支援。它不綁定框架，只作為上層設計指導。
會取代設計師嗎？ 不會。它減少重工，但品牌決策與設計系統仍由人決定。
常見問題
它和一般說「幫我做個好看的頁面」有什麼差別？
一般提示詞把美感判斷留給模型隨機發揮；這個 Skill 把目的、受眾、語氣、限制變成必須回答的問題，並列出具體的禁用項與替代方向。
需要付費嗎？
素材標註為搭配 Claude Code 使用的免費 Skill；實際授權與使用條件以 Anthropic 官方儲存庫為準。
支援 Vue 或 Tailwind 嗎？
支援。它不綁定框架，只作為上層設計指導，原生 HTML/CSS、React、Vue、Tailwind、Ant Design 都能搭配使用。
會取代設計師嗎？
不會。它把設計判斷前移到寫程式階段以減少重工，品牌決策與設計系統仍需要人來決定。
