Anthropic 官方出手！frontend-design 让 AI 生成的页面不再千篇一律

做过 AI 生成页面的同学，有没有这种感觉——出来的设计哪哪都对，但就是没灵魂？颜色是高级的、渐变是精致的，但看起来就像从同一个模板里批量复制出来的。

这其实不是 AI 的错，是我们给 AI 的设计指令太「模板化」了。Anthropic 官方刚刚开源了一个新 Skill——frontend-design，专门来解决这个问题。

它凭什么不一样？

这个 Skill 的核心理念很有意思：把自己当成一个小型设计工作室的设计总监，每个项目都要做出「别人做不出来」的视觉身份，而不是套公式。

具体怎么做到？它要求 AI 在动手之前先完成一套设计规划流程：

• Color Token 系统：给出 4-6 个有名字的十六进制色值，不是泛泛的「主色/辅色」，而是「锈红」「雾蓝」这种有质感的描述
• Type Scale：标题字体和正文字体必须「性格互补」，不能是同一个字体家族顺手挑两个 weight 了事
• Signature 签名元素：整页设计里必须有唯一一个让人记住的元素，是整个设计的「记忆点」
• 两轮自审：先出设计方案、对比模板默认值做批判、再开始写代码

AI 设计三大俗，怎么避开？

Skill 里有个非常犀利的提醒：当前 AI 生成设计会高度集中在三种「安全脸」上——

• 米色奶油底 + 高对比 serif 标题 + 赭色点缀
• 近黑背景 + 单一亮色点缀（荧光绿或朱红）
• 报纸风格 + 细线分割 + 无圆角 + 密集多栏

这三种风格本身没问题，但当它们出现在每个 AI 生成页面上时，就成了「AI 味」的标签。frontend-design 要求 AI主动识别并绕开这些默认值，真正按项目自身的内容和调性来选择视觉方向。

安装方式

在 Claude Code 里直接安装：

在 Smithery.ai 页面搜索「frontend-design」，或直接用 Agent 安装：

支持配合 tldraw（画板工具）、Hugeicons（图标库）、MantleKit（Launch Planner）等 MCP 工具使用，设计到构建一气呵成。

适合谁用？

• 对 AI 生成页面「总感觉差点意思」的前端工程师
• 需要快速输出高保真原型、但不想套模板的产品设计师
• 希望 AI 真正学会「设计决策」而不是只会「生成代码」的团队

与其给 AI 一个需求让它自己猜设计方向，不如把 frontend-design 这套设计思维教给它——出来的结果真的会不一样。

👉 GitHub 仓库直通车

GitHub: https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design/skills/frontend-design