frontend-design skill 是什麼、怎麼安裝使用：Anthropic 官方的前端設計 Skill，讓 Claude 做的頁面少點「模板味」

本文根據 anthropics/skills 倉庫裏該技能的 SKILL.md 與倉庫 README 整理，資料核對於 2026-10-11。skills.sh 榜單當日顯示該技能累計安裝約 97.1 萬次；所在倉庫 anthropics/skills 在 GitHub 約 18.0 萬 Star（同日數據）。技能內容會隨倉庫更新，以倉庫為準。

這個 Skill 做什麼

讓大模型寫網頁，功能通常沒問題，難看的是「一眼 AI」：居中大標題、紫色漸變、清一色圓角卡片。frontend-design 針對的就是這個問題。它不帶腳本和組件庫，整個技能只有一份說明文字，作用是換掉 Claude 做設計時的預設姿態：把自己當成一家設計工作室的主創，客戶已經否掉了幾版「看着眼熟」的方案，這一版必須有明確的視覺主張。

按技能的 description，新建介面或者重塑已有介面、需要定審美方向和字體時，Claude 會自動加載它。說明文字大致分四塊：先從題材出發（產品是什麼、給誰用、頁面最主要的任務是什麼，需求裏沒寫就先提出一個具體設想並向你確認）；設計原則；「先規劃、再對照需求評審」的流程；最後是剋制與自我批評，以及介面文案怎麼寫。

怎麼安裝

frontend-design 收在 anthropics/skills 倉庫的 example-skills 插件包裏。在 Claude Code 會話中依次輸入（命令來自倉庫 README）：

text
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

同一個包裏的其他示例技能會一起裝上。只想要這一個，可以把倉庫裏的 skills/frontend-design 文件夾複製到 ~/.claude/skills/（個人）或項目的 .claude/skills/；claude.ai 網頁版則在 Customize → Skills 裏上載這個文件夾的 ZIP。

倉庫整體介紹和其他安裝方式，詳見本站《anthropics/skills 是什麼、怎麼安裝：Anthropic 官方 Skills 倉庫（docx / pptx / xlsx / pdf、skill-creator）》。

怎麼用

• 直接提需求：「給一家賣手衝咖啡器具的小店做一個落地頁」。它會先說明打算採用的方向（配色、字體、版式的理由），再動手寫代碼。
• 改造舊頁面：「這個後台儀表盤看起來太像模板了，在不改功能的前提下重新設計視覺」。
• 手動調用：通過插件安裝時，命令選單裏是 /example-skills:frontend-design，輸入後再描述頁面。

給的背景越具體（行業、受眾、想避開的風格），出來的方向越不容易撞車。

適合誰 / 侷限

適合用 Claude Code 從零做落地頁、作品集、產品原型，又不想每次都得到同一種風格的人；也適合沒有設計師的小團隊拿來出第一版。

侷限也很明顯：它只是設計方向上的指引，沒有組件、沒有設計規範庫，也不會替你檢查無障礙和性能；團隊已有成型的設計系統時，它鼓勵的「冒一點審美風險」反而可能和規範衝突，這種情況應該明確告訴它以現有規範為準。

注意事項

• 許可：技能目錄內的 LICENSE.txt 為 Apache-2.0。
• 不運行腳本、不聯網：純說明文字，風險面很小；它影響的是 Claude 的設計決策，最終代碼仍要自己過一遍。
• 同名技能很多：skills.sh 上有多個倉庫都叫 frontend-design，內容並不相同，安裝時認準 anthropics/skills。
• 官方聲明倉庫裏的技能用於演示和學習，Claude 產品內置的行為可能與這份實現不同。