AI写前端终于不丑了？Anthropic官方frontend-design Skill实测

AI 写前端，功能没问题，审美在线吗？

你有没有这种经历：让 Claude / ChatGPT 生成一个登录页、一个 Dashboard，代码跑通了，但一打开——字体糊成一片，配色辣眼，按钮大小不一，整体散发着一股浓浓的“AI 塑料感”。

功能是对的，美感是缺席的。

今天要聊的，就是 Anthropic 官方出品的 frontend-design Skill，专门解决这个痛点。

它是什么？

frontend-design 是 Anthropic 官方维护的一个 Agent Skill，托管在 github.com/anthropics/skills 仓库下。它不是组件库，也不是设计系统，而是一套写进 Claude 大脑里的前端设计准则：当你让 Claude 生成 UI 时，它会自动以“小工作室设计总监”的视角去思考配色、字体、排版、动效，而不是复现训练数据里最常见的模板。

核心亮点

• 拒绝模板化输出：Skill 明确要求 Claude 避开 AI 界面的三大“默认审美”——米黄色衬线体、暗黑荧光绿、报纸式密集排版。没理由的默认，就是偷懒。
• 两轮设计流程：先出设计计划（色板、字体、布局、签名元素），自检一遍，确认“这不是随便换个 brief 也能生成的答案”，再开始写代码。质量控制前置。
• 把排版当设计：字体不是“传递信息的容器”，而是页面性格的一部分。Skill 要求显式配对 display / body / utility 字体，形成可记忆的排版系统。
• 一个签名元素：让页面有一个“过目不忘”的视觉锚点，其余部分保持克制。这和人类设计师的工作方式一致。
• 多平台兼容：Claude Code、Codex、Cursor、Gemini CLI、OpenClaw 等都能用，安装只需一条命令。

适合谁？

任何需要 AI 辅助生成前端界面的人：独立开发者做 MVP、设计师快速验证想法、产品经理画高保真原型、甚至前端工程师想突破自己的“舒适区审美”。它不会替你画 Figma，但会让 AI 写出的代码从“能用”变成“想截图发朋友圈”。

一句话总结

AI 前端生成的终点不是功能正确，而是视觉上有记忆点。frontend-design 就是给 Claude 装的那双“设计眼”。

GitHub 地址：https://github.com/anthropics/skills/tree/main/skills/frontend-design

—

**GitHub:** https://github.com/anthropics/skills/tree/main/skills/frontend-design