Frontend Design

Frontend Design 评测：Anthropic 官方技能，让界面不再像生成出来的

AI 做的网页大多长一个样。暖米色背景、衬线大标题、陶土色点缀；或者近乎黑色的页面配一个荧光绿高亮；或者不管产品是什么，都是同一套圆角 SaaS 卡片加同一层柔和阴影。这些默认值现在太容易辨认了，用户一眼就能看出这是 AI 做的页面。

Frontend Design 是 Anthropic 给这个问题的官方答案。它是 Claude 背后团队出品的设计技能，收录在官方 anthropics/skills 仓库里，该仓库在 GitHub 上有近 19 万个 Star。它在 skills.sh 上的安装量约 100 万次，是整个生态中使用最多的技能之一，里面的指导读起来像一位真正干活的设计主创，而不是一张检查表。

什么是 Frontend Design？

Frontend Design 只有一个 SKILL.md 文件，它要求智能体像一家设计工作室的主创那样对待每个界面：每个客户都要有独特的视觉身份。需求文档说了算：主题、受众、页面要完成的任务，决定配色、字体和布局。需求没规定的地方，智能体被要求大胆做审美选择，而不是把自由浪费在通用默认值上。

这个技能对当下 AI 生成设计长什么样异常坦诚。它把陈词滥调逐个点名，从米色加陶土色的首屏，到每个标题上方都有的全大写小标签，并且禁止使用它们，除非需求本身就要求那种风格。

核心功能

1. 一份点名要避开的风格清单

技能把最常见的 AI 设计痕迹列了出来：米色背景配陶土色、近黑页面配荧光绿、细线分隔的报纸式排版、千篇一律的 SaaS 卡片套件、拿渐变当装饰。点名之后，才能真正避开。

2. 主题先行的设计方向

写任何代码之前，智能体必须先立足主题做设计：产品是什么、给谁用、页面要完成什么任务。给儿童的玩具和给金融分析师的仪表盘，永远不该得到同样的处理，技能把这一点说得很直白。

3. 两步流程：先规划，再动手

先出一份紧凑的设计方案，包括颜色、字体、布局和原则的 token 体系，用简短文字和 ASCII 线框图勾勒。再对照需求检查方案里有没有读起来像通用默认值的部分，改好之后才写代码。

4. 字体即个性

字体承载页面的个性。技能给出了具体规则：一种或两种字体，两种的话必须明显不同；行长不超过 80 个字符；标题里不要只给一两个词加颜色强调；内容上方不要加多余的标签。文案被当作设计内容，而不是装饰。

5. 克制与自我批判

把大胆用在一个地方，其他地方保持安静克制。按质量底线交付而不自我吹嘘：移动端自适应、键盘焦点可见、尊重减弱动效的设置、配色无障碍。智能体被要求在搭建过程中批判自己的作品，环境允许时截图检查。

使用方法

用 skills CLI 安装。下面这条命令只从 Anthropic 官方仓库拉取这一个技能：

npx skills add https://github.com/anthropics/skills --skill frontend-design

之后用大白话描述你想要的页面，包括它是干什么的、给谁用。智能体会先做设计规划，对照你的需求检查方案，然后再动手搭建。给出反馈后，它改的是方案，而不只是代码。它也可以从同一个仓库以 Claude Code 插件的方式安装。

适合谁用？

所有让智能体做落地页、仪表盘、原型或营销网站的人都应该装它。对没有设计师、独自交付页面的创始人和独立开发者尤其有价值，对厌倦了每个 AI 页面都像同一个模板的团队也一样。纯后端工作永远不会触发它，所以装着没有任何成本。

价格

Frontend Design 安装和使用都免费，技能本身不花钱。但有一个条件需要注意：anthropics/skills 仓库是源码可见，不是开源软件。它的许可文件是专有的，使用受你与 Anthropic 的协议约束，不得复制这些材料，不得在 Anthropic 服务之外保存副本，不得制作衍生作品或分发。在别处复用其中的文字之前，请先读许可文件。

优点与缺点

优点：出自 Claude 背后的团队，建议与模型实际工作方式一致；光是那份反陈词滥调清单就值得安装；是真正的两步流程，而不是直接生成代码；约 100 万次安装，指导经过实战检验。

缺点：许可是专有源码可见，不是 MIT 或 Apache，分发受到限制；精神上以 Claude 为先，在其他智能体上的效果会有差异；它修不好含糊的需求，遇到含糊会追问而不是猜测；最终效果仍取决于模型是否按方案执行。

最终评价

Frontend Design 是所有用智能体交付网页的人杠杆最高的技能。它没有增加任何工具，它改变的是智能体所做一切的品味。下次做落地页之前先装上它，再和上次交付的页面对比一下。去 GitHub 试试：anthropics/skills。