用 Claude Code 做前端，很多人都遇到过同一个问题：登录页、Dashboard、落地页，生成出来的东西长得差不多。千篇一律的字体、渐变背景、三张一样的圆角卡片排一排，再加一个居中的按钮。
原因并不神秘：模型在没有约束时，会倾向于训练数据里最常见、最安全的方案。Anthropic 官方为此提供了一个 Skill，名字就叫 frontend-design，专门用来把 Claude 从这些“默认选项”里拉出来。
这篇介绍 frontend-design Skill 现在的内容、安装方法、几种好用的提示词写法，以及怎么配合项目自己的设计规范使用。
frontend-design 是什么
frontend-design 不是模型微调，也不是额外的设计软件，而是一个 SKILL.md 文件。Claude Code 在做前端相关工作时会自动加载它，也可以手动调用。它同时收录在 anthropics/claude-code 仓库的插件目录和 anthropics/skills 仓库里。装 Skill 之前也值得算一下上下文开销，ECC 一次装进 292 个 skill 的上下文账里有具体的估算方法。
需要说明的是，这个 Skill 已经更新过。早期版本篇幅很短，核心是一份“黑名单”，例如直接禁止 Inter、Roboto 等常见字体；当前版本扩展到 70 行左右，写法也从“禁止清单”变成了一套设计工作方法。
上图是早期版本的四条核心规则，可以和下面当前版本的写法对照着看。
当前版本让 Claude 做哪几件事
1. 先像设计工作室负责人一样思考。 Skill 开头就设定了角色：客户已经否掉了俗套、模板化的方案，要的是有辨识度的视觉表达。配色、字体、版式都要针对这个需求做有立场的选择。
2. 从题材出发。 如果需求没写清产品是什么，Claude 要先自己提出具体的题材、受众和页面的主要任务，再和你确认。页面首屏要呈现这个题材里最有代表性的东西，而不是套一个“大数字加小标签加渐变”的通用首屏。
3. 认清当前 AI 设计的“通病”。 Skill 里点名了几类常见的生成痕迹，例如暖奶油色底配高对比衬线标题和陶土色强调色、近黑底配单一荧光强调色、所有内容切成一样的圆角卡片并加同样的灰色阴影、每个标题上方都有全大写小标签等。它也说明：这些样式本身并非不能用，如果需求明确要求就照做；但在需求没有限定的地方，不要把自由度浪费在默认选项上。
4. 两遍工作法。 先写一份简短的设计方案：4 到 6 个具名色值、字体和用途、用文字和 ASCII 线框描述的布局、几条设计原则；再拿方案对照需求检查，凡是“换个类似需求也会得出同样结果”的部分都要改掉并说明原因，之后才开始写代码。
5. 克制与自查。 只在一个地方大胆，让一个元素成为记忆点，其余保持安静；同时守住质量底线：移动端适配、键盘焦点可见、尊重减少动效设置、配色可读。动效也要节制，一次编排好的页面加载动画胜过到处都是的淡入和悬停效果。
安装方法
方式一：通过插件市场安装
在 Claude Code 里输入 /plugin，选择添加插件市场，填入 anthropics/claude-code，然后在列表里找到 frontend-design 安装。装好后全局生效。
方式二：作为项目级 Skill 放进仓库
在项目里新建 .claude/skills/frontend-design/ 目录，把官方仓库中 frontend-design 的 SKILL.md 下载后放进去，只对当前项目生效，适合想针对某个项目修改规则的情况。
装好后不需要额外配置，Claude Code 判断当前是前端任务时会自动使用，也可以在提示词开头写 /frontend-design 主动调用。
三种效果较好的提示词写法
写清方向
/frontend-design 做一个 AI 写作工具的落地页。目标用户是内容创作者，不是程序员。风格偏杂志编辑感，大量留白，字体排版是核心表达。
给出参照
/frontend-design 做一个 SaaS 定价页。参考 Linear 的克制感：深色底、动画少、信息密度高但不拥挤。
反向约束
/frontend-design 重做这个后台登录页。现在的问题是太模板化、没有品牌感。不要渐变背景，不要居中的圆角卡片，给出一个让人记得住的方案。
当前版本的 Skill 会先产出设计方案再写代码，这正好是纠偏的时机：如果方向不对，在它动手写代码之前直接指出来，比事后返工省事得多。
配合 DESIGN.md 保持多页面一致
frontend-design 解决的是“不要偷懒”，但多个页面分开生成时，风格仍可能不统一。比较稳的做法是在项目里加一份设计规范文件，例如放在 .claude/ 目录下的 DESIGN.md，写明：
- 字体：标题、正文、代码各用什么字体；
- 色板：主色、强调色、背景色、深色模式配色的具体色值；
- 组件约定：按钮圆角、卡片用阴影还是边框、间距基准；
- 动效：在哪些地方使用、时长和缓动方式。
再在 CLAUDE.md 里注明“前端工作先读 DESIGN.md”。这样 Skill 负责“别套模板”，DESIGN.md 负责“在品牌框架内发挥”。因为 Skill 明确写了需求中的具体要求优先，两者不会冲突。
注意事项
- Skill 内容会更新：网上流传的“42 行”“禁用 Inter”等说法来自早期版本，以官方仓库当前的 SKILL.md 为准；
- 安装量数据会变化：文章、榜单里的安装量只代表某个时间点，不必作为选择依据；
- 它不替代设计判断：方案出来后仍需要你判断是否符合品牌和用户。
总结
frontend-design 的作用，是在 Claude 动手写前端之前给它设一道“设计师的底线”：先从题材出发做方案，避开当前 AI 生成页面的常见套路，再在一个地方大胆、其余保持克制。配合项目自己的 DESIGN.md，多页面项目也能保持一致。
如果你通过 AIGoCode 使用 Claude Code，安装这个 Skill 不需要改动任何接入配置；还没接好的话，可以先看用 CC Switch 导入并启用 AIGoCode。