Anthropic Frontend Design：挡住网页 AI 套版
让编程 Agent 做落地页，出来的常是同一套脸：Inter 一类默认无衬线、紫粉渐变按钮、圆角卡片加一层灰阴影。Anthropic 把对策写成开源 Skill frontend-design：一份 SKILL.md，在做新 UI 或改版时自动加载，逼模型先按题材定方向，再写代码。下面按仓库原文拆它解决什么问题、黑名单写了啥、以及 Claude Code / skills CLI / claude.ai 怎么装。
前置条件：会用 Claude Code，或任意支持 Agent Skills（SKILL.md）的客户端；本机有 Node（跑 npx skills）更省事。下文按官方文档与仓库原文整理安装路径，不依赖某一版 CLI 的截图。
它是什么，数字先说清楚
frontend-design 是 Anthropic 公开仓库 anthropics/skills 里的一条 Agent Skill：目录里主要是 SKILL.md（约 9KB）和 Apache-2.0 许可。YAML 描述写得很直——指导做有辨识度的视觉设计，帮你选型、排版，少出「模板默认脸」。同一内容也打成 Claude Code 官方市场插件 frontend-design@claude-plugins-official，装上后做前端相关任务时会按描述自动触发。
外传常把「18.5 万 GitHub stars、76 万+ 安装」一股脑算到这条 Skill 头上。按 2026-10-31 北京时间核对：
| 口径 | 数字 | 出处 |
|---|---|---|
anthropics/skills 整仓 star | 约 18.5 万（API 读到 185,285） | GitHub API，同日 |
frontend-design 在 skills.sh 的安装量 | 页面显示 1.1M（约 110 万） | skills.sh/anthropics/skills，同日 |
Star 是整仓（里面还有 pptx、pdf、skill-creator 等十几条），不是单 Skill；安装量是 skills.sh 对这条 Skill 的累计安装计数，已经明显高于早年流传的「76 万」。写介绍时分开写这两项，别合并成「Frontend Design 有 18.5 万星」。
Skill 值钱的是约束，不是星标。先看
SKILL.md禁止什么、要求先产出什么，再决定要不要装。
它解决什么：默认脸，而不是「不会写 CSS」
模型缺的不是能出页面，而是题材相关的审美决策。没有 Skill 时，常见结果是：不管你是儿童玩具站还是金融看板，都长得像同一份 SaaS 模板。Skill 一上来就把角色定成「设计工作室主美」——客户已经拒过套版提案，要付费买观点：调色、字体、布局必须贴这个 brief，该冒险就冒险。
和站内 UI 去 AI 感提示词、TasteSkill、Design Agent 品味 harness 同一方向：把品味写进可加载的规则，而不是每次口头骂「别用紫渐变」。
SKILL.md 实际写了什么
下面按 2026-09-03 前后仍在 main 上的正文归纳（以仓库文件为准）。它没有逐条点名「禁止 Inter / 禁止紫粉渐变」；它写的是更宽的默认族与 2026 年前后扎堆的生成审美，再配流程逼你改掉。
题材落地，再谈视觉
brief 没说产品是什么，先自己定一个具体题材、受众、主任务，再跟用户确认。差异来自行业材料与行话：8–11 岁女孩玩具站，和金融分析师仪表盘，本来就不该共用一套皮肤。整页都要用真实题材内容，别拿假 Lorem 撑布局。
排版
- 一到两个字体家族即可；两个就要区分角色分明。
- 刻意选字，别随手抓「任何项目都会用的默认族」；字号阶梯参考《The Elements of Typographic Style》那套常规做法，字重、字宽、间距要有意图。
- 行长默认压在约 80 字符以内；衬线正文可以略长，行高也略松。
- 明确点名的排版套版：标题里只把某一个词改斜/加粗/换色；标签全大写；内容上方塞无意义的装饰标签。
布局与结构
Hero 要打开题材世界里最有辨识度的那一下——大标题、图、动画、实机 demo、可交互片段都行。「大数字 + 小标签 + 辅数据 + 渐变点缀」被写成默认套路，只有真合适才用。编号 01/02/03、eyebrow、分割线等结构件是信息编码，不是装饰；内容根本不是序列时，别硬上序号。
动效
非用户触发的动效少用，只为引起注意。整页一次编排好的入场，好过每个区块 fade-slide、每张卡都加 hover。用户动作引起的反馈（展开、确认）可以有，但要让人看懂「变了什么」。
色彩与「生成脸」校准清单
Skill 列出当前 AI 生成设计常扎堆的几类，强调它们对某些 brief 合法，但出现时往往是「默认」而不是「选择」：
- 暖奶油底（约
#F4F1EA）+ 高对比衬线标题 + 陶土/暖黏土强调色（常靠近#D97757——也是 Claude 交互强调色，用在用户项目上容易穿帮）。 - 近黑底 + 单一荧光绿或朱红强调。
- 大报风格：细线、零圆角、密报纸栏。
- SaaS 卡片套件：内容切成同样圆角卡、同一套软灰阴影
rgba(0,0,0,.1)、装饰性渐变冲洗。 - 与题材无关的模板壳：字距拉开的全大写 eyebrow、中点串起来的元信息（A · B · C）、
WORD — fragment式标签、假黑（#0B0B0B/#111）、小数据用等宽、链接按钮尾部硬加→。
brief 若明确要其中一种，就按 brief；轴空着时，别把自由度花在这几项默认上。
流程：先计划，再对照 brief，再写代码，边做边批
两遍走：先交一份短设计计划——4–6 个命名色值、字体角色、布局概念（可带 ASCII 线框与对齐说明）、几条「这页凭什么不像别人」的原则。对照 brief 审一遍：哪里像「随便换个站名也能交差」的默认，就改掉并说明理由，然后才写代码。CSS 选择器 specificity 要小心，避免 .section 和 .cta 互相抵消间距。
克制：大胆用在一处，周围保持安静；响应式、键盘焦点、尊重 prefers-reduced-motion、可读对比当质量地板，别当口号。环境允许就截图自检。文案也是设计：用用户听得懂的词，主动语，CTA 说清会发生什么；错误与空状态给方向，不卖萌、不道歉糊弄。
怎么安装
三条常用路，装一种即可。和 npx skills、手写第一个 Skill 同一套生态。
1）skills CLI（跨多种 Agent）
npx skills add anthropics/skills --skill frontend-design也可先 npx skills add anthropics/skills 再按交互选。skills.sh 上这条命令对应 Anthropic 公开技能包；安装计数就是这里累计的。
2）Claude Code 官方插件市场
# 会话里（官方市场一般已自动添加）
/plugin install frontend-design@claude-plugins-official
# 或在 shell 里装到 user scope
claude plugin install frontend-design@claude-plugins-official官方市场仓库是 anthropics/claude-plugins-official，插件源目录 plugins/frontend-design，内含同名 Skill。装完后用自然语言提前端需求即可，例如「给音乐流媒体做个仪表盘」；也可在支持斜杠调用时用插件命名空间触发。旧的 anthropics/claude-code 插件市场已弃用，文档要求改走 @claude-plugins-official。
3）本地目录 / claude.ai 自定义 Skill
- Claude Code：把
frontend-design/SKILL.md放进~/.claude/skills/frontend-design/（个人）或项目.claude/skills/frontend-design/。 - claude.ai：在设置里以 zip 上传自定义 Skill（需开通代码执行等能力；以帮助中心当前说明为准）。各端自定义 Skill 不同步，API / 网页 / Code 要分别管。
实用建议
- 开工第一句写题材。「儿童数学 app 家长端落地页，受众是焦虑但识货的家长，主任务是预约试听」比「做个现代感落地页」有效得多。
- 禁止项写进 brief。若你特别讨厌某套脸，直接写「不要奶油底+陶土强调、不要统一圆角卡片阴影」。Skill 说 brief 原文优先。
- 先要设计计划再要代码。让 Agent 先吐 token/字体/线框，你点头后再实现；这一步就是 Skill 写的两遍流程。
- 和去 AI 味文案 Skill 分开装。界面壳用
frontend-design，中文正文去腔调用站内写过的去 AI 味方案，各管一层。 - 看 README 里的 cookbook。插件 README 指向 Anthropic cookbooks 里的 Frontend Aesthetics 笔记，适合补「怎么提示」；约束仍以
SKILL.md为准。
常见坑
- 把整仓 star 当成 Skill 热度。对外介绍写「anthropics/skills 约 18.5 万星；frontend-design 在 skills.sh 约 110 万次安装」，两项并列。
- 以为装了就永远不长套版脸。brief 空、又催「快出页面」时，模型仍可能滑回默认清单里的某一类；计划审阅那一步不能省。
- 插件市场名写错。用
@claude-plugins-official，不要再教人marketplace add anthropics/claude-code。 - 只拷了 SKILL.md 文件名不对。目录名与 frontmatter
name: frontend-design保持一致，方便/frontend-design与自动匹配。
完成标准
- 能向同事讲清：star 是整仓、安装量是 skills.sh 单条计数。
- 合上文档也能说出至少 3 条排版/动效禁令，以及 5 类「生成脸」校准项里的 2 类。
- 本机或团队项目里，用插件或 skills CLI / 本地目录之一装上，并成功让一次 UI 任务加载到该 Skill。
- 下一次提需求时，brief 里已经带题材、受众、至少一条「不要」。
最后
打开仓库里的 skills/frontend-design/SKILL.md 通读一遍，再在 Claude Code 里 /plugin install frontend-design@claude-plugins-official（或 npx skills add anthropics/skills --skill frontend-design）。下一次做页面，先逼出设计计划，再写代码——套版脸少大半，靠的是约束，不是多喊两句「要有品味」。
