frontend-design：让 AI 写界面前先想清楚「这是给谁看的」
Anthropic 官方 skills 仓库里的前端设计 skill。它要求智能体先从产品和行业出发定下配色、字体和版式，再写代码、截图自查，专门用来避开千篇一律的「AI 味」界面。
Skill 资料
安装命令
npx skills add anthropics/skills --skill frontend-design让智能体直接「做个落地页」，结果往往很眼熟：奶油色背景、赤陶色点缀、一排圆角卡片、每个区块都淡入上滑。frontend-design 是 Anthropic 在官方 skills 仓库里放出的一份设计指引，目标就是把这些默认选项挡在门外。
它让智能体按什么顺序做事
这份 skill 把前端工作拆成五步：先弄清产品和所在行业，再定一套精简的设计 token（几种命名颜色、一到两种字体、版式原则），然后拿这套方案对照需求检查是不是太普通，确认后才动手写代码，最后截图自查、删掉多余的东西。
具体会约束什么
- 字体：最多两种字族，正文行宽控制在 80 个字符以内。
- 配色：用 4 到 6 个命名色值定下主色板，并点名避开常见的「AI 默认配色」。
- 动效：少用，而且要有理由；不要给每个区块都加淡入动画。
- 版式：边框和分隔线用来表达信息结构，而不是装饰；内容不是真正的步骤时，就不要用 01/02/03 编号。
适合谁
如果你经常让 Claude Code、Codex 这类智能体写界面，又总要花时间把结果从「模板感」里拉回来，可以把它装进项目。它不替你决定审美，但会逼智能体在写代码前先给出一套说得通的设计方案。