前言¶
用 Cursor、Claude Code 等 AI 編程工具搭前端頁面，效率確實高：描述需求，幾分鐘就能出整頁 HTML/CSS。但用過幾次之後，很多人會有同樣的感受——暖米色背景配襯線大標題、深色底加熒光綠點綴、報紙式細線分欄……換項目也換湯不換藥，界面能跑，卻像套了同一張設計模板。
Anthropic 在官方 Skills 倉庫裏提供了一個專門面向 UI 設計的 Skill：frontend-design。它不教你怎麼寫 React 組件，而是教 Agent 在動手寫代碼之前，先像設計負責人一樣做審美決策、排版規劃和自我審查，儘量避開 AI 生成界面常見的「默認審美」。
這是什麼¶
frontend-design 是 Anthropic 維護的 Agent Skill，倉庫地址爲 anthropics/skills/skills/frontend-design。
Skill 本體是一個 SKILL.md 文件，遵循 Agent Skills 開放標準，可在 Cursor、Claude Code、Claude.ai 等支持該標準的 AI 編程工具中使用。官方描述爲：在新建 UI 或改造現有界面時，提供有辨識度、有意圖的視覺設計指導，涵蓋美學方向、字體排版等，幫助產出不像模板默認方案的設計。
與直接寫代碼的 Skill 不同，frontend-design 幾乎全是設計方法論與流程約束，不包含可執行腳本，核心作用是改變 Agent 做 UI 時的思考路徑。
核心功能與亮點¶
1. 以「設計負責人」視角切入¶
Skill 要求 Agent 把自己當作小型設計工作室的負責人：客戶已經拒絕過模板感方案，付費買的是有觀點的視覺身份。因此需要在配色、字體、佈局上做出 deliberate（刻意）且 opinionated（有立場）的選擇，並至少承擔一處可辯護的美學風險。
2. 先錨定主題，再談視覺¶
如果需求裏沒有明確產品或主題，Agent 需先自行確定：具體主題是什麼、受衆是誰、頁面唯一任務是什麼。設計靈感應來自主題本身的世界——材料、工具、器物、行業語境——而不是套用通用 UI 套路。
3. 五條設計原則¶
Skill 對 Web 設計給出了可操作的約束：
- Hero 是論點：首屏應呈現主題世界中最有特徵的元素，而不是默認「大數字 + 小標籤 + 漸變強調」。
- 字體承載性格：展示字體與正文字體需刻意配對，建立清晰的字階、字重與間距，讓排版本身成爲記憶點。
- 結構即信息：編號、分隔線、標籤等結構元素應編碼內容含義，而非純裝飾；例如 01/02/03 編號僅適用於真實有序流程。
- 動效有目的：頁面加載、滾動揭示、懸停微交互等應服務主題；過度動效反而強化「AI 生成感」。
- 複雜度與願景匹配：極繁需要精細執行，極簡需要間距與細節上的精確。
4. 點名 AI 界面的三種「默認審美」¶
Skill 明確列出了當前 AI 生成設計容易收斂的三種外觀，並提醒：它們對特定 brief 可能合理，但作爲「沒想清楚就選的默認值」應當警惕：
- 暖奶油色背景（約
#F4F1EA）+ 高對比襯線展示字體 + 陶土色點綴； - 近黑背景 + 單一亮酸性綠或硃紅強調色；
- 寬版報紙式佈局：極細分割線、零圓角、密集分欄。
若 brief 未指定方向，Skill 要求 Agent 不要把「自由度」浪費在這些默認方案上。
5. 兩階段工作流：先規劃，再寫代碼¶
正式編碼前，Agent 需完成兩輪工作：
第一輪——設計規劃（Design Plan），輸出緊湊的設計 token 體系：
- Color：4–6 個具名 hex 色值；
- Type：至少兩種角色字體（有性格的展示字體、互補的正文字體，必要時加輔助字體）；
- Layout：用一句話 + ASCII 線框描述佈局概念；
- Signature：頁面唯一會被記住的元素，需與 brief 呼應。
第二輪——對照 brief 審查：若規劃中的任一部分換個項目也會得到類似結果，則必須修訂並說明改動理由。確認「相對獨特」之後，才按修訂後的規劃寫代碼，所有顏色與字體決策均從規劃中推導。
寫 CSS 時，Skill 還提醒注意選擇器優先級衝突（如 .section 與 .cta 疊加導致 padding/margin 互相抵消），這是 AI 批量生成樣式時的常見坑。
6. 剋制、自檢與無障礙底線¶
Skill 要求把「大膽」集中在一處——Signature 元素足夠醒目，其餘保持克制；並內置質量底線：移動端響應式、鍵盤焦點可見、prefers-reduced-motion 需被尊重。鼓勵在構建過程中自我批評，環境支持時可截圖審視。
7. 界面文案同樣納入設計¶
Skill 專設「writing in design」章節：文案是設計材料而非裝飾。要求從用戶視角命名控件、使用主動語態、錯誤與空狀態給出可操作的指引，保持詞彙在全流程一致——這些規則與視覺規範同等重要。
安裝與啓用¶
frontend-design 目錄結構很簡單，僅含 SKILL.md 與 LICENSE.txt，無額外腳本。各工具安裝方式如下。
Claude Code¶
Anthropic 官方將該 Skill 打包在 example-skills 插件中。先註冊 marketplace，再安裝插件：
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
安裝完成後，在對話中提及 UI 設計需求，或直接說明「使用 frontend-design skill」即可觸發。
Claude.ai¶
Anthropic 倉庫 README 說明，部分示例 Skill 已對付費計劃用戶開放。也可按 Using skills in Claude 上傳自定義 Skill。
Cursor¶
Cursor 啓動時會自動掃描 Skill 目錄。將 Skill 放入項目或用戶級目錄即可：
| 路徑 | 作用域 |
|---|---|
.cursor/skills/ |
項目級 |
~/.cursor/skills/ |
用戶級（全局） |
手動安裝步驟：
mkdir -p .cursor/skills/frontend-design
curl -o .cursor/skills/frontend-design/SKILL.md \
https://raw.githubusercontent.com/anthropics/skills/main/skills/frontend-design/SKILL.md
也可在 Cursor 側邊欄 Customize → Rules → Add Rule → Remote Rule (Github) 中填入倉庫地址 https://github.com/anthropics/skills 導入。
安裝後在 Customize → Skills 中可查看是否已被發現。Agent 會根據 description 自動判斷是否啓用；也可在 Agent 對話中輸入 /frontend-design 手動調用。
其他兼容 Agent Skills 標準的工具¶
Codex CLI、Claude Code 等工具同樣支持將 Skill 目錄放在 .agents/skills/、.codex/skills/ 等路徑，具體以各工具文檔爲準。Skill 的 frontmatter 僅需 name 與 description 兩個必填字段：
---
name: frontend-design
description: Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one.
---
典型用法示例¶
啓用 Skill 後，向 Agent 描述 UI 任務即可。Skill 會引導 Agent 在寫代碼前先輸出設計規劃。以下是貼近官方流程的提示詞示例。
新建落地頁：
請使用 frontend-design skill，爲一款 indie 音樂播客 App 設計落地頁。
目標用戶是 25–35 歲獨立音樂愛好者，頁面唯一任務是引導下載。
先給出 Color / Type / Layout / Signature 的設計規劃，對照 brief 自檢是否落入 AI 默認審美，確認後再寫 HTML/CSS。
改造現有頁面：
現有首頁太像通用 SaaS 模板，請按 frontend-design 的方法重做視覺方向：
1. 明確頁面主題、受衆與核心任務；
2. 列出當前設計落入的「三種默認審美」中的哪一種；
3. 輸出修訂後的 token 體系與 Signature 元素；
4. 再修改代碼，注意 CSS 選擇器優先級衝突。
僅要設計規劃、暫不寫代碼：
用 frontend-design 的流程，爲「本地咖啡烘焙工坊」官網首屏做設計規劃，
包含 4–6 個命名色值、字體配對、ASCII 線框和 Signature 元素說明，先不要寫代碼。
Skill 本身不含固定 CLI 命令，價值在於 Agent 讀取 SKILL.md 後按其中流程執行—— brainstorm → plan → critique → build → critique again。
適用場景與注意事項¶
適合誰、什麼場景：
- 前端/全棧開發者，希望 AI 輔助出碼的同時保留視覺辨識度；
- 獨立開發者、小團隊，沒有專職設計師但需要可上線的營銷頁、產品頁；
- 對 AI 生成 UI「千篇一律」感到審美疲勞，想從流程層面約束 Agent 的創作者。
需要注意：
- 這是設計指導，不是組件庫。Skill 不提供現成 UI 框架或圖標包，產出質量仍依賴 Agent 模型能力與你的 brief 質量。
- brief 越具體，效果越好。Skill 強調「brief 的文字優先」——若你已指定視覺方向，Agent 應嚴格遵循，而非強行「創新」。
- 演示性質。Anthropic 倉庫 README 註明，這些 Skill 僅供演示與教育，Claude 實際行爲可能與 Skill 文件描述存在差異，關鍵項目需自行充分測試。
- 僅 Markdown，無自動化測試。與 skill-creator 等帶 eval 流程的 Skill 不同，frontend-design 沒有內置評測腳本，是否被正確觸發，需在真實任務中觀察 Agent 是否先出設計規劃再寫代碼。
小結¶
AI 寫前端快，但快不等於有品牌感。frontend-design 的價值，在於把「像模板」這個問題從提示詞層面上升到 Skill 流程層面：先錨定主題、建立 token 體系、識別並避開三種常見默認審美、集中一處 Signature、寫代碼前必須自檢。
如果你已經在用 Agent Skills 生態，這個 Skill 值得放進 .cursor/skills/ 或 Claude Code 的 example-skills 插件裏，下次做 landing page 或改版首頁時試一次——先要看設計規劃，再批准寫代碼。
官方倉庫：https://github.com/anthropics/skills/tree/main/skills/frontend-design
