如何使用frontend-design skill武裝你的Claude Code、Cursor，增強前端審美能力
整理版優先睇
用 frontend-design Skill 強化 Claude Code 同 Cursor，徹底告別「AI 感」設計
呢篇文章係一篇實戰教學，作者係一個關注 AI 工具實戰嘅開發者，佢想解決一個好常見嘅問題：點樣令 AI 生成嘅前端 UI 唔再係嗰種千篇一律嘅「AI 美感」？為咗呢個目的，佢介紹咗 Anthropics 官方推出嘅 frontend-design skill，並示範點樣喺 Claude Code 同 Cursor 入面安裝同使用。
個 skill 嘅定位好清晰：當你需要構建 Web 組件、頁面、海報、React 組件或者任何 HTML/CSS 佈局嘅時候，佢可以幫你生成創意同精緻嘅代碼同設計，避開通用 AI 嘅美學缺陷。作者冇齋講理論，而係用咗一個具體案例——佢之前用 GLM4.6 做嘅測試網站首頁，再叫 AI 用呢個 skill 重新設計一次。結果由 before 同 after 嘅對比可以見到，成個網站嘅視覺效果煥然一新，完全擺脱咗原本嗰種平庸感。
最後作者歸納出一個觀點：Agent Skills 嘅出現，代表 AI 編程助手由純粹嘅「代碼產生器」進化成「領域專家 Agent」。你唔使再喺 Prompt 入面苦苦哀求「要好睇啲」，直接裝個 Skill 就得。呢篇文章對所有想提升前端出品嘅開發者嚟講，都好有參考價值。
- 結論：frontend-design skill 能顯著提升 AI 生成 UI 嘅設計質素，擺脱「AI 感」。
- 方法：可通過 Claude Code 嘅 plugin 市場或 npx 指令安裝，Cursor 亦支援。
- 差異：Skill 係專門領域專家，比普通 Prompt 更專業、效果更一致。
- 啟發：Agent Skills 代表 AI 助手從代碼產生器進化到領域專家 Agent。
- 可行動點：建議開發者安裝 frontend-design skill 並喺項目中應用，直接提升前端設計水平。
frontend-design skill 倉庫
Anthropics 官方 GitHub 倉庫，包含 skill 詳細說明同相關資源
乜嘢係 Frontend-Design Skill？
Frontend-design skill 係 Anthropics 官方發佈嘅一個技能，專為生成 Web 組件、頁面、工件、海報或應用程式（例：網站、着陸頁、儀錶板、React 組件、HTML/CSS 佈局）而設。
佢嘅核心目標係幫你生成創意、精緻嘅代碼同 UI 設計，避免一般 AI 嗰種好易認得出嘅通用美學。
即係話，你只要裝咗呢個 skill，AI 設計出嚟嘅前端作品就會更有 taste，唔再係一式一樣嘅 Bootstrap 風或者 Material Design 風。
點樣安裝？Claude Code 同 Cursor 都支援
安裝方法好簡單，無論你係用 Claude Code 定 Cursor，都有對應嘅途徑。
- Claude Code 方法一：喺 /plugin 中添加 anthropics 插件市場，然後選擇 frontend-design skill 安裝。
- Claude Code 方法二：直接行 npx skills-installer install @anthropics/claude-code/frontend-design --client claude-code。
- Cursor 安裝：行 npx skills-installer install @anthropics/claude-code/frontend-design --local --client cursor。
如果提示冇 npx skills-installer，要先行 npx skills-installer 裝咗先。
使用效果：網站設計煥然一新
作者用之前用 GLM4.6 做嘅測試網站首頁做例子，要求 AI 用 frontend-design skill 重新設計。
由呢個例子可以見到，frontend-design skill 唔係得個講字，而係真係可以即時應用喺現有項目上，效果即刻見到。
總結：Agent Skills 係未來方向
呢篇文章唔單止教咗安裝方法，仲揭示咗一個趨勢：AI 編程助手正由「代碼產生器」進化為「領域專家 Agent」。
與其喺 Prompt 入面講「要好睇啲」，不如直接裝個專業 Skill，效果更穩定、更一致。
如果你都想令你嘅前端項目設計水平提升，不妨安裝試嚇，體驗一下 Agent Skills 嘅威力。
前面我哋已經介紹咗咩係Skill，同埋Skill可以做啲咩，具體請參考：【譯】令 Agent 具備現實世界嘅能力：Agent Skills 介紹、【譯】Skills深度解析：Skills同Prompts（提示詞）、Projects、MCP同Subagents嘅分別
呢篇文章我哋透過一個案例，用frontend-design skill嚟睇下前端設計會有咩能力提升。
一、frontend-design skill
frontend-design skill係anthropics發佈嘅一個用嚟構建Web組件、頁面、工件、海報或應用程式（例如網站、着陸頁、儀錶板、React 組件、HTML/CSS 佈局，或任何Web UI嘅樣式/美化）時生成創意、精緻嘅代碼同UI設計，避免通用AI美學嘅skill。
倉庫地址：
https://github.com/anthropics/skills/tree/main/skills/frontend-design
二、點樣安裝
1、Claude Code
方法一、
可以喺Claude Code嘅 /plugin 中添加anthropics插件市場：
然後在/plugin 中選擇 anthropic-agent-skills 再選擇 frontend-design skill 進行安裝。
方法二、
直接透過命令行安裝
如果提示冇npx skills-installer呢個指令就先運行安裝
 |  |
2、Cursor
三、點樣用
喺Claude Code入面可以睇到呢個skill就代表可以用得喇
直接用我哋之前用GLM4.6做過嘅一個測試網站重新設計，特別強調用frontend-design skill嚟進行設計
可以睇到加載skill成功
成果
使用前：
用frontend-design skill優化之後可以話係煥然一新！效果有啲驚豔。
 |
四、總結
透過本文嘅實戰演示，我哋見證咗 Frontend-Design Skill 點樣化身為 Claude Code 同 Cursor 嘅「首席設計顧問」。Agent Skills 嘅出現標誌住 AI 編程助手正在從「代碼生成器」向「領域專家 Agent」進化。與其喺 Prompt 度苦苦描述「要靚啲」，不如直接安裝呢個 Skill，令專業嘅 Agent 嚟接管你嘅項目。
前面我們已經介紹了什麼是Skill，以及Skill能做什麼，具體請參考：【譯】讓 Agent 具備現實世界的能力：Agent Skills 介紹、【譯】Skills深度解析：Skills與Prompts（提示詞）、Projects、MCP和Subagents的區別
這篇文章我們通過一個案例，使用frontend-design skill來看看前端設計會有怎樣的能力提升。
一、frontend-design skill
frontend-design skill是anthropics發佈的一個用於構建 Web 組件、頁面、工件、海報或應用程序（例如網站、着陸頁、儀表板、React 組件、HTML/CSS 佈局，或任何 Web UI 的樣式/美化）時生成創意、精緻的代碼和 UI 設計，避免通用AI 美學的skill。
倉庫地址：
https://github.com/anthropics/skills/tree/main/skills/frontend-design
二、如何安裝
1、Claude Code
方法一、
可以在Claude Code的 /plugin 中添加anthropics插件市場：
然後在/plugin 中選擇 anthropic-agent-skills 再選擇 frontend-design skill 進行安裝。
方法二、
直接通過命令行安裝
如果提示沒有npx skills-installer這個命令則先運行安裝
| |
2、Cursor
三、如何使用
在Claude Code中可以看到這個skill就代表可以使用了
直接用我們之前用GLM4.6做過的一個測試網站重新設計，特別強調使用frontend-design skill來進行設計
可以看到加載skill成功
成果
使用前：
使用frontend-design skill優化後可以說是煥然一新！效果有點驚豔。
|
四、總結
通過本文的實戰演示，我們見證了 Frontend-Design Skill 如何化身為 Claude Code 和 Cursor 的“首席設計顧問”。Agent Skills 的出現標誌着 AI 編程助手正在從“代碼生成器”向“領域專家 Agent”進化。與其在 Prompt 中苦苦描述“要好看一點”，不如直接安裝這個 Skill，讓專業的 Agent 來接管你的項目。