Anthropic frontend-design Skill：让 AI 生成的界面不再千篇一律
- Smars
- Agent skill , AI 设计
- 08 Jun, 2026
你让 AI agent 搭一个登录页，看着还行。再让它做一个仪表盘，长得和登录页一模一样。又一个设置页，还是那个调调。三个页面，一套风格，而你说不出这风格叫什么，因为它什么都不是。Inter 字体、紫色渐变、白底圆角卡片——AI 套路的制服，每次从同一套训练数据里印出来。
这不是代码质量的问题。CSS 有效，组件能用。问题是 agent 没有审美。它不做方向选择，不做风格决策，不全力以赴。它把训练过的所有界面取一个平均值，然后把网页的统计学中位数丢给你。
Anthropic 的 frontend-design skill 通过在设计代码写入之前注入设计思维来解决这个问题。它不只是生成 UI，它先逼 agent 做一个大胆的审美选择，然后围绕这个选择去构建一切。
它是怎么做到的
这个 skill 的核心是一个设计思维流程，agent 在写任何 HTML 之前先走一遍。它问四个问题，并且要求给出明确答案：
| 问题 | 作用 |
|---|---|
| 用途 | 这个界面解决什么问题？谁在用？ |
| 风格 | 选一个极端：粗野主义、极繁主义、复古未来、有机自然、奢华精致、趣味玩具、杂志编辑、装饰艺术、工业实用，或者自创一个 |
| 约束 | 技术框架、性能、无障碍要求 |
| 识别度 | 别人看完记忆中最深的一件事是什么？ |
核心规则：选一个清晰的概念方向，然后精准执行。这个 skill 明确拒绝折中性审美。极繁和极简都成立，犹豫不决不行。
然后把方向落到五个实现维度：
- 字体排版：不用 Inter、Roboto、system font。非常规字体组合。标题用 display 字体，正文用精致的 body 字体。有性格的选择决定视觉身份
- 配色与主题：CSS 变量保持统一。主导色配锋利强调色，不是四平八稳的安全调色板。对视觉身份的承诺
- 动效：CSS 动画和微交互。一次精心编排的页面加载动画，比分散的 hover 效果更有冲击力。滚动触发、意料之外的状态切换
- 空间构图：不对称、重叠、对角线流动、打破栅格、大量留白或精准紧凑。反 Bootstrap 布局
- 背景与视觉细节：渐变网格、噪点纹理、几何图案、层叠半透明、戏剧性阴影、自定义光标、颗粒叠加。用氛围代替纯色背景
这个 skill 内置了一份明确的负面清单：不用滥用的字体、不用俗套配色（尤其是白底紫渐变）、不用可预测的布局、不用千篇一律的组件模式。
真正有用的场景
当你生成的界面需要作为一个独立的设计产品去存在，而不是功能占位符时，这个 skill 才有意义。
- 着陆页和营销站：这类页面的成败取决于视觉冲击力。这个 skill 产出的是有观点的页面，不是模板克隆
- 作品集和个人站：当网站本身就是作品集时，和别人长得一样就是方向错了
- 需要品牌识别的后台和应用：生成的界面看起来是有意设计的，不是从 UI 库里拼出来的
- 需要给利益相关方看的产品原型：看起来平庸的原型会被当作”只是个草稿”。风格明确的原型会被认真对待为产品方向
- 创意项目和艺术驱动型应用：复古未来、装饰艺术、粗野主义——这个 skill 给 agent 提供了一套它本来没有的审美语言
如果你在做内部门户没人看的后台页面，用不上这个。但如果界面本身很重要，那它就是重要的。
边界在哪
这个 skill 的效果受两个因素限制：底层模型写复杂 CSS 的真实能力，以及你愿意接受”不一样”的程度。
模型方面，Claude Code 配合 Sonnet 或 Opus 能较好地处理视觉复杂度。小模型可能概念对了，但实现细节会翻车。动画时序、CSS 变量继承、响应式边界情况——这些仍然需要人工审查和修正。
人的方面，生成的设计可能让你不习惯。本来就是故意的。这个 skill 的设计目标就是产出出人意料的审美风格。部分输出会偏离目标，因为 agent 对某个方向的投入过头了。提示框架有帮助，但设计审美不是 LLM 完全拥有的东西。你仍然需要判断输出质量，然后迭代。
这个 skill 不是设计师的替代品，但它远远胜过完全没有设计方向。“帮我做个页面”和”帮我做一个粗野主义风格的着陆页，大字号，单色配色”之间的差距，就是”起步草稿”和”接近终稿”的差距。
安装方式
这个 skill 托管在 Anthropic 官方的 skills 仓库里，安装走标准 skills CLI 流程：
npx skills add https://github.com/anthropics/skills --skill frontend-design或者直接克隆仓库：
git clone https://github.com/anthropics/skills.git兼容 Claude Code 和其他支持 skills 格式的 AI agent。
怎么用
当你让 agent 构建任何前端界面时，这个 skill 会自动触发。关键在于你怎么提问。
普通输入：
给一个项目管理工具做一个着陆页
够模糊，skill 的设计思维框架会自动介入，引导 agent 选择具体的视觉方向。
更好的输入：
给一个项目管理工具做着陆页，面向设计团队。要有点意思的，别太商务
给 agent 的审美选择提供了更精准的目标。
agent 的执行流程：
- 分析你的需求，确定用途、受众、约束条件
- 提出具体的审美方向和风格定位
- 规划字体、配色、动效、布局、视觉细节
- 输出能跑的生产级代码
代码框架取决于你项目的技术栈：HTML/CSS/JS、React 或 Vue 都可以。
如果你想一开始就指定方向，可以直接说：
做一个着陆页，复古未来风格，终端配色，几何字体
这样仍然会走完完整的设计思维流程，只是起点明确。
实战示例
假设你要给一个摄影师做作品集网站。没有这个 skill，agent 会生成一个干干净净、普普通通的图库，Inter 字体，淡淡阴影，规整网格式布局。那种你关掉就不记得的站。
用上这个 skill 后，agent 会考虑场景：摄影、视觉艺术、独立创作者。它可能选”杂志编辑”方向——大号衬线标题、不对称布局、图片覆盖导航元素、大量留白、克制的双色调。也可能走粗野主义——裸露的网格线、零装饰、超大文本、通栏图片。
输出是一个可以直接在浏览器里打开的独立文件。你能立刻看到视觉意图。方向对了就改内容，方向不对就调审美参数，重新生成。
一句话
前端审美不是锦上添花，是别人看到的第一个东西。看起来平庸的界面传递出一个信号：产品本身也平庸。有设计感的界面传递出相反的信号，哪怕代码是 AI 生成的。
Anthropic 的 frontend-design skill 给 AI 编码 agent 补上了它天生缺的一块：设计流程。它把”做个好看的”替换成”选方向，下决定，全力以赴”。产出的是你不会一眼认出 “这是 AI 做的” 的界面。
下次让 agent 做页面的时候，别满足于它训练数据里所有网站的平均值。给它一个方向，或者让它自己选一个。
GitHub: https://github.com/anthropics/skills | Skills: https://www.skills.sh/anthropics/skills/frontend-design
