前言¶
用 Cursor、Claude Code 等 AI 编程工具搭前端页面，效率确实高：描述需求，几分钟就能出整页 HTML/CSS。但用过几次之后，很多人会有同样的感受——暖米色背景配衬线大标题、深色底加荧光绿点缀、报纸式细线分栏……换项目也换汤不换药，界面能跑，却像套了同一张设计模板。
Anthropic 在官方 Skills 仓库里提供了一个专门面向 UI 设计的 Skill：frontend-design。它不教你怎么写 React 组件，而是教 Agent 在动手写代码之前，先像设计负责人一样做审美决策、排版规划和自我审查，尽量避开 AI 生成界面常见的「默认审美」。
这是什么¶
frontend-design 是 Anthropic 维护的 Agent Skill，仓库地址为 anthropics/skills/skills/frontend-design。
Skill 本体是一个 SKILL.md 文件，遵循 Agent Skills 开放标准，可在 Cursor、Claude Code、Claude.ai 等支持该标准的 AI 编程工具中使用。官方描述为：在新建 UI 或改造现有界面时，提供有辨识度、有意图的视觉设计指导，涵盖美学方向、字体排版等，帮助产出不像模板默认方案的设计。
与直接写代码的 Skill 不同，frontend-design 几乎全是设计方法论与流程约束，不包含可执行脚本，核心作用是改变 Agent 做 UI 时的思考路径。
核心功能与亮点¶
1. 以「设计负责人」视角切入¶
Skill 要求 Agent 把自己当作小型设计工作室的负责人：客户已经拒绝过模板感方案，付费买的是有观点的视觉身份。因此需要在配色、字体、布局上做出 deliberate（刻意）且 opinionated（有立场）的选择，并至少承担一处可辩护的美学风险。
2. 先锚定主题，再谈视觉¶
如果需求里没有明确产品或主题，Agent 需先自行确定：具体主题是什么、受众是谁、页面唯一任务是什么。设计灵感应来自主题本身的世界——材料、工具、器物、行业语境——而不是套用通用 UI 套路。
3. 五条设计原则¶
Skill 对 Web 设计给出了可操作的约束：
- Hero 是论点：首屏应呈现主题世界中最有特征的元素，而不是默认「大数字 + 小标签 + 渐变强调」。
- 字体承载性格：展示字体与正文字体需刻意配对，建立清晰的字阶、字重与间距，让排版本身成为记忆点。
- 结构即信息：编号、分隔线、标签等结构元素应编码内容含义，而非纯装饰；例如 01/02/03 编号仅适用于真实有序流程。
- 动效有目的：页面加载、滚动揭示、悬停微交互等应服务主题；过度动效反而强化「AI 生成感」。
- 复杂度与愿景匹配：极繁需要精细执行，极简需要间距与细节上的精确。
4. 点名 AI 界面的三种「默认审美」¶
Skill 明确列出了当前 AI 生成设计容易收敛的三种外观，并提醒：它们对特定 brief 可能合理，但作为「没想清楚就选的默认值」应当警惕：
- 暖奶油色背景（约
#F4F1EA）+ 高对比衬线展示字体 + 陶土色点缀； - 近黑背景 + 单一亮酸性绿或朱红强调色；
- 宽版报纸式布局：极细分割线、零圆角、密集分栏。
若 brief 未指定方向，Skill 要求 Agent 不要把「自由度」浪费在这些默认方案上。
5. 两阶段工作流：先规划，再写代码¶
正式编码前，Agent 需完成两轮工作：
第一轮——设计规划（Design Plan），输出紧凑的设计 token 体系：
- Color：4–6 个具名 hex 色值；
- Type：至少两种角色字体（有性格的展示字体、互补的正文字体，必要时加辅助字体）；
- Layout：用一句话 + ASCII 线框描述布局概念；
- Signature：页面唯一会被记住的元素，需与 brief 呼应。
第二轮——对照 brief 审查：若规划中的任一部分换个项目也会得到类似结果，则必须修订并说明改动理由。确认「相对独特」之后，才按修订后的规划写代码，所有颜色与字体决策均从规划中推导。
写 CSS 时，Skill 还提醒注意选择器优先级冲突（如 .section 与 .cta 叠加导致 padding/margin 互相抵消），这是 AI 批量生成样式时的常见坑。
6. 克制、自检与无障碍底线¶
Skill 要求把「大胆」集中在一处——Signature 元素足够醒目，其余保持克制；并内置质量底线：移动端响应式、键盘焦点可见、prefers-reduced-motion 需被尊重。鼓励在构建过程中自我批评，环境支持时可截图审视。
7. 界面文案同样纳入设计¶
Skill 专设「writing in design」章节：文案是设计材料而非装饰。要求从用户视角命名控件、使用主动语态、错误与空状态给出可操作的指引，保持词汇在全流程一致——这些规则与视觉规范同等重要。
安装与启用¶
frontend-design 目录结构很简单，仅含 SKILL.md 与 LICENSE.txt，无额外脚本。各工具安装方式如下。
Claude Code¶
Anthropic 官方将该 Skill 打包在 example-skills 插件中。先注册 marketplace，再安装插件：
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
安装完成后，在对话中提及 UI 设计需求，或直接说明「使用 frontend-design skill」即可触发。
Claude.ai¶
Anthropic 仓库 README 说明，部分示例 Skill 已对付费计划用户开放。也可按 Using skills in Claude 上传自定义 Skill。
Cursor¶
Cursor 启动时会自动扫描 Skill 目录。将 Skill 放入项目或用户级目录即可：
| 路径 | 作用域 |
|---|---|
.cursor/skills/ |
项目级 |
~/.cursor/skills/ |
用户级（全局） |
手动安装步骤：
mkdir -p .cursor/skills/frontend-design
curl -o .cursor/skills/frontend-design/SKILL.md \
https://raw.githubusercontent.com/anthropics/skills/main/skills/frontend-design/SKILL.md
也可在 Cursor 侧边栏 Customize → Rules → Add Rule → Remote Rule (Github) 中填入仓库地址 https://github.com/anthropics/skills 导入。
安装后在 Customize → Skills 中可查看是否已被发现。Agent 会根据 description 自动判断是否启用；也可在 Agent 对话中输入 /frontend-design 手动调用。
其他兼容 Agent Skills 标准的工具¶
Codex CLI、Claude Code 等工具同样支持将 Skill 目录放在 .agents/skills/、.codex/skills/ 等路径，具体以各工具文档为准。Skill 的 frontmatter 仅需 name 与 description 两个必填字段：
---
name: frontend-design
description: Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one.
---
典型用法示例¶
启用 Skill 后，向 Agent 描述 UI 任务即可。Skill 会引导 Agent 在写代码前先输出设计规划。以下是贴近官方流程的提示词示例。
新建落地页：
请使用 frontend-design skill，为一款 indie 音乐播客 App 设计落地页。
目标用户是 25–35 岁独立音乐爱好者，页面唯一任务是引导下载。
先给出 Color / Type / Layout / Signature 的设计规划，对照 brief 自检是否落入 AI 默认审美，确认后再写 HTML/CSS。
改造现有页面：
现有首页太像通用 SaaS 模板，请按 frontend-design 的方法重做视觉方向：
1. 明确页面主题、受众与核心任务；
2. 列出当前设计落入的「三种默认审美」中的哪一种；
3. 输出修订后的 token 体系与 Signature 元素；
4. 再修改代码，注意 CSS 选择器优先级冲突。
仅要设计规划、暂不写代码：
用 frontend-design 的流程，为「本地咖啡烘焙工坊」官网首屏做设计规划，
包含 4–6 个命名色值、字体配对、ASCII 线框和 Signature 元素说明，先不要写代码。
Skill 本身不含固定 CLI 命令，价值在于 Agent 读取 SKILL.md 后按其中流程执行—— brainstorm → plan → critique → build → critique again。
适用场景与注意事项¶
适合谁、什么场景：
- 前端/全栈开发者，希望 AI 辅助出码的同时保留视觉辨识度；
- 独立开发者、小团队，没有专职设计师但需要可上线的营销页、产品页；
- 对 AI 生成 UI「千篇一律」感到审美疲劳，想从流程层面约束 Agent 的创作者。
需要注意：
- 这是设计指导，不是组件库。Skill 不提供现成 UI 框架或图标包，产出质量仍依赖 Agent 模型能力与你的 brief 质量。
- brief 越具体，效果越好。Skill 强调「brief 的文字优先」——若你已指定视觉方向，Agent 应严格遵循，而非强行「创新」。
- 演示性质。Anthropic 仓库 README 注明，这些 Skill 仅供演示与教育，Claude 实际行为可能与 Skill 文件描述存在差异，关键项目需自行充分测试。
- 仅 Markdown，无自动化测试。与 skill-creator 等带 eval 流程的 Skill 不同，frontend-design 没有内置评测脚本，是否被正确触发，需在真实任务中观察 Agent 是否先出设计规划再写代码。
小结¶
AI 写前端快，但快不等于有品牌感。frontend-design 的价值，在于把「像模板」这个问题从提示词层面上升到 Skill 流程层面：先锚定主题、建立 token 体系、识别并避开三种常见默认审美、集中一处 Signature、写代码前必须自检。
如果你已经在用 Agent Skills 生态，这个 Skill 值得放进 .cursor/skills/ 或 Claude Code 的 example-skills 插件里，下次做 landing page 或改版首页时试一次——先要看设计规划，再批准写代码。
官方仓库：https://github.com/anthropics/skills/tree/main/skills/frontend-design
