Skills 推荐 | frontend-design：Anthropic 官方设计技能，让 Agent 告别千篇一律的「模板感」
一句话核心：frontend-design 是 Anthropic 官方维护的 Agent 设计技能——它教 AI 识别并避开「奶油底+陶土色」「纯黑底+荧光绿」等 5 大模板陷阱，通过「先规划、再写代码」的两阶段流程，让 Agent 产出的 UI 真正有辨识度。175.6k Star 的 anthropics/skills 仓库发布，Apache 2.0 开源，跨任意 Agent Skills 标准 agent 通用。
痛点：你一眼就能认出「AI 做的 UI」
用过 AI 生成前端页面的同学大概都有这种体验——点开预览，奶油色背景、圆角卡片、陶土色按钮、SaaS 套件模板般的布局，像从一个模具里批量压出来的。
这不是你的 Prompt 写得不好，而是 AI 默认会收敛到训练数据里最高频的「安全模式」——奶油底配陶土色，就是那个模式。
frontend-design 的整个设计逻辑就是反这个直觉：它不教 Agent 怎么写代码，而是教 Agent 怎么思考设计。
内置 5 大「AI 模板陷阱」
技能内部维护了一份识别清单，Agent 生成设计之前先过一遍：
- 奶油底配陶土色：最典型的「一眼 AI」配色方案
- 纯黑底配荧光绿：另一个极端——过于「科技感」但毫无可读性
- SaaS 卡片套件：Product Hunt 式千篇一律的卡片布局
- 无设计师参与的排版：font-size 分层僵硬、行距和字距不会呼吸
- 空心内容区：可以塞进任何模板的占位文案
Agent 被引导从 Brief 的题材和行业本身出发做差异化——比如做一个「音乐节售票页」和做一个「碳信用交易平台」，视觉语言应该是完全不同的——这个道理人类设计师秒懂，但 AI 需要被明确教。
两阶段设计流程：「先想清楚，再动手」
和其他"一条 Prompt 扔进去直接出代码"的 Skill 不同，frontend-design 强制两阶段：
阶段一：设计规划
- 构建配色 Token 系统（主色、辅色、语义色）
- 确定字体层级体系（标题/正文/注释的比例和间距）
- 定义布局概念和设计原则
- 审阅规划的「独特性」：这个设计凭什么不和别的 AI 产出撞脸？
阶段二：代码实现
- 基于阶段一的规划写代码
- 结果与规划对照，确认没有「规划写得好、实现跑偏了」
这个流程的核心洞察：AI 的代码能力没问题，它缺的是「做设计决定」的那一步——而 frontend-design 就是补这一步。
适用场景
| 场景 | 效果 |
|---|---|
| 快速搭建 Landing Page | 不再「一眼 AI」，有辨识度的品牌感 |
| 非设计师团队出 UI | 不需要 designer，Agent 自带设计方向 |
| 内容型页面（博客、产品页） | 配色和字体有系统、不散乱 |
| Dashboard / 数据看板 | 不再全是蓝白卡片，有信息层级 |
| 多 Agent 协作中负责前端环节 | 作为工具链的「设计」一环，交给专门技能 |
上手
- 安装：遵循 Agent Skills 标准，跨 30+ agent 平台通用（非 Claude Code 专属）
- 协议：Apache 2.0 开源
- 仓库：anthropics/skills（175.6k Star，Anthropic 官方维护）
- 上线：2026-09-03
与已推荐 Skills 形成完整工具链
把之前推荐的几个 Skill 串起来，就是一条「发现 → 对齐 → 设计 → 验证 → 交接」的流水线：
- find-skills：发现你需要的 Skill（280 万安装，全球第一）
- grill-me：动手前先对齐需求，别闷头干错方向
- frontend-design（本篇）：把「AI 模板感」从设计环节干掉
- grill-with-docs：用自己的品牌规范/设计标准审问 Agent 产出
- tdd：先测试、再产出，质量可验证
- handoff：多 Agent 协作时无缝交接上下文
来源链接
- GitHub 官方仓库：https://github.com/anthropics/skills（175.6k Star）
- skills.sh 页面：anthropics/skills — Agent skills
- skillsmp.com 索引：Frontend Design | anthropics/skills Agent Skill | SkillsMP