# frontend-design：Anthropic 官方出品的设计 Skill，凭什么冲到总榜第三 ## 本期范围与核心发现 本期是单 Skill 深拆。对象是 `anthropics/skills` 官方仓库里的 **frontend-design** —— 截至 2026-08-28，它在 skills.sh 全时段 Installs 榜上以 **79.67 万次安装排名第三**，仅次于 vercel-labs 的 find-skills（3.0M）和 Matt Pocock 的 grill-me（911.2K），是**安装量最高的 Anthropic 官方 Skill**。 核心发现有三条： 1. **它是“纯提示词 Skill”的天花板**。整个 Skill 只有两个文件：`LICENSE.txt` 和 `SKILL.md`，没有任何脚本、模板或参考资源——全靠一段约 1500 词的英文提示词，就让 Claude 的前端产出从“AI 味模板”跳到“有主见的设计”。这证明 Skill 生态里最值钱的未必是代码，而是**写进 SKILL.md 的领域判断力**。 2. **它把“反 AI 俗套”写成了明文规则**。SKILL.md 里直接点名了当前 AI 生成设计的三大街头样式（奶油底+衬线字+陶土色、近黑底+荧光绿、报纸风细线布局），并禁止模型在 brief 没有要求时使用——这种“负样本校准”写法值得所有 Skill 作者抄走。 3. **官方仓库本身已成生态巨无霸**：`anthropics/skills` 在 GitHub 上已有约 **17.2 万 Star、2.04 万 Fork、853 个开放 PR**（2026-08-28 页面数据），官方文档类 Skill（docx/pdf/pptx/xlsx）为 source-available 授权而非 Apache 2.0，frontend-design 的 frontmatter 同样指向 LICENSE.txt，授权写法与文档类一致。 作为对照组，本文同时拆解 vercel-labs 的 **web-design-guidelines**（全时段第 37 名，55.77 万安装）——前者管“造”，后者管“审”，两个 Skill 恰好构成前端设计的完整闭环。 ## 评测对比表 | 维度 | 权重 | frontend-design（anthropics） | web-design-guidelines（vercel-labs） | |------|------|------------------------------|--------------------------------------| | 功能完整度 | 25% | ★★★★☆ 生成侧覆盖审美/字体/文案/动效，但不做代码审查 | ★★★★☆ 审查侧规则极细，但不参与设计生成 | | 设计质量 | 25% | ★★★★★ 提示词工程教科书级，负样本校准是全生态罕见写法 | ★★★★☆ 薄壳+运行时拉取，架构聪明，但 SKILL.md 本身信息量薄 | | 实战效果 | 20% | ★★★★☆ 社区广泛用于落地页/作品集，“去 AI 味”效果反馈明显 | ★★★★☆ 规则可执行性强，file:line 输出直接可改 | | 上手难度 | 15% | ★★★★★ 零配置，装完即生效 | ★★★★★ 零配置，但审查依赖运行时抓取 GitHub raw | | 社区活跃度 | 15% | ★★★★★ 官方仓库 17.2 万 Star，持续更新 | ★★★★☆ 依附 vercel-labs/agent-skills，随 Vercel 官方维护 | **综合**：frontend-design 4.8 / web-design-guidelines 4.2。两者不是竞品，是上下游。 ## 拆解前的定位：它是什么、不是什么 先看文件构成。GitHub 上 `skills/frontend-design` 目录下只有： ``` frontend-design/ ├── LICENSE.txt └── SKILL.md ``` 没有 `scripts/`、没有 `references/`、没有示例图。对比同仓库的 docx/pptx 这类带 Python 脚本的重型 Skill，frontend-design 是另一个极端：**它不操作任何文件格式，它只改变模型的“审美默认值”**。 它**不是**：CSS 生成器、组件库、设计系统工具。你让它“做个落地页”，它不会替你引入 Tailwind 或选框架；它的作用域是**视觉决策层**——配色、字体、布局概念、动效取舍、文案语气。 ## SKILL.md 逐段拆解 以下引用均来自 `anthropics/skills` 仓库 `main` 分支的 SKILL.md 原文（2026-08-28 抓取）。 ### 1. Frontmatter：一句话 description 塞了三层信息 ```yaml --- name: frontend-design description: Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults. license: Complete terms in LICENSE.txt --- ``` 这段 description 是触发机制的全部。它包含三层信息： - **动作域**：`building new UI` **或** `reshaping an existing one`——既管从零建站，也管改造旧页面。这扩大了触发面：用户说“帮我重做首页”同样命中。 - **能力域**：`aesthetic direction, typography`——告诉模型内部路由：涉及审美方向、字体排印时启用。 - **反目标域**：`choices that don't read as templated defaults`——这句最关键。它不仅是能力描述，还**预埋了价值判断**：这个 Skill 存在的理由就是反对模板化默认值。模型在加载正文之前就已经被设置了“默认值=坏”的先验。 没有 `metadata`（版本号、作者），也没有 `argument-hint`。官方文档类 Skill 同样极简——frontmatter 只做触发，不做别的。 ### 2. 开场人设：被客户拒绝过的设计主理人 正文第一段： > Approach this as the design lead at a small studio known for giving every client a visual identity that could not be mistaken for anyone else's. This client has already rejected proposals that felt templated, and is paying for a distinctive point of view... take one real aesthetic risk you can justify. 拆开看是三个提示词技巧叠加： - **角色锚定**：小工作室的设计主理人，而非“AI 助手”。工作室的生存逻辑就是“每家客户的视觉身份不能被认错”。 - **预反驳**：`This client has already rejected proposals that felt templated`——客户已经拒绝过模板方案。这句话堵死了模型最舒适的输出路径：还没开始，默认方案就被宣告“已死”。 - **强制风险**：`take one real aesthetic risk you can justify`——必须冒一次“能自圆其说的真实审美风险”。注意限定词 `you can justify`，它防止模型为怪而怪：风险要能被论证。 这个“预设客户挑剔”的写法，比单纯写“要有创意”有效得多——它把创意从愿望变成了**生存约束**。 ### 3. Ground it in the subject：先钉死主题，再谈设计 > If the brief does not pin down what the product or subject is, pin it yourself before designing: name one concrete subject, its audience, and the page's single job, and state your choice. 规则很具体：如果 brief 没说清主题，就自己先钉死三件事——**一个具体主题、它的受众、这个页面的唯一任务**，并把选择明说。这解决的是 LLM 做设计的老毛病：在模糊需求上直接开产，产出“什么都是、什么都不是”的通用页。 这一段还有一句容易被忽略的话：要求模型利用记忆中关于用户偏好、正在构建的东西、之前做过的设计的线索。这是在提示模型把**会话上下文和持久记忆**当作设计输入——官方在用自己的 Skill 示范“记忆驱动个性化”。 ### 4. Design principles：五条反模板原则 这一段是给模型的“审美宪法”，逐条看： **① Hero 是论点。** `the hero is a thesis`——首屏要开口就说出这个主题世界里最具特征的东西，形式不限（标题、图片、动画、可交互时刻）。然后点名批评默认答案：`a big number with a small label, supporting stats, and a gradient accent is the template answer`——“大数字+小标签+渐变点缀”就是模板答案，除非真是最优解，否则别用。 **② 字体承载人格。** `Typography carries the personality of the page`——展示字体和正文字体要“刻意配对”，不能每个项目都顺手抓同一批字族；字阶、字重、字宽、间距都要有意图。要求是“让字体处理本身成为设计中被记住的部分，而不是内容的中性运输工具”。 **③ 结构即信息。** `Structure is information`——这一段藏着全文最锋利的一刀：它点名了 AI 生成页面的标志性俗套 `01 / 02 / 03` 编号装饰，并规定**只有内容真的是序列**（真实流程、按时间排序的时间线）时才允许用编号。“结构性装饰必须编码内容的某种真实属性，而非点缀”。 **④ 动效要克制且有编排。** `an orchestrated moment usually lands harder than scattered effects`——一个编排好的瞬间胜过满天散落的特效；同时留了退路：`sometimes less is more, and extra animation contributes to the feeling that the design is AI-generated`——过多动画反而加重“AI 生成感”。 **⑤ 复杂度匹配愿景。** 极简方向拼的是间距、字体、细节的精确度；华丽方向要有配得上的执行复杂度。`Elegance is executing the chosen vision well`——优雅是把选定的愿景执行到位。 ### 5. 校准段：点名三大 AI 俗套（全文最狠的一段） > AI-generated design right now clusters around three looks: (1) a warm cream background (near #F4F1EA) with a high-contrast serif display and a terracotta accent; (2) a near-black background with a single bright acid-green or vermilion accent; (3) a broadsheet-style layout with hairline rules, zero border-radius, and dense newspaper-like columns. 这是我认为**整个 Skill 生态里最值得抄的一段提示词工程**。它精确到色号地列出了当前 AI 设计的三大聚集样式： 1. **奶油底派**：接近 `#F4F1EA` 的暖奶油背景 + 高对比衬线展示字 + 陶土色（terracotta）点缀； 2. **暗黑荧光派**：近黑背景 + 单一荧光绿或朱红 accent； 3. **报纸派**：broadsheet 版式、发丝线分隔、零圆角、密集报纸式多栏。 然后是两句话的处理规则，非常克制： - `the brief's own words always win`——如果 brief 明确要求其中某一种，**照做**，用户的话永远赢； - 如果 brief 在某个轴上留白，`don't spend that freedom on one of these defaults`——别把自由花在这些默认值上。 为什么这段有效？因为 LLM 的“俗套”本质是训练数据的高概率聚集区。对抗它的办法不是喊“要有创意”（模型不知道什么叫创意），而是**把高概率聚集区逐个点名拉黑**——负样本校准。这比任何正面描述都精确。 ### 6. 两遍工作法：token system → 自审 → 才许写代码 流程规定为 `brainstorm, explore, plan, critique, build, critique again`，实际操作是硬性的两遍： **第一遍：产出一份紧凑的设计计划（token system）**，四个字段缺一不可： | 字段 | 要求 | |------|------| | Color | 4–6 个**命名**的 hex 色值 | | Type | 2+ 角色的字体（克制使用的性格展示体 + 互补正文体 + 视需要的标注/数据用 utility 体） | | Layout | 一句话散文式布局概念 + **ASCII 线框图**用于多个方案间的比较 | | Signature | “这个页面将被人记住的**唯一**元素”，必须体现 brief | **中间必须自审一次**：`if any part of it reads like the generic default you would produce for any similar page... revise that part, say what you changed and why`。这里有个精巧的自查法——让模型想象“用一个类似的需求，自己会产出什么”，如果当前方案和那个假想通用产出撞车，就改，并且**要说出改了什么、为什么**（强制外化推理，防止敷衍式微调）。 **第二遍**：确认方案独特性之后才开始写代码，且“严格遵循修订后的计划，每一个颜色和字体决定都从计划推导”。 还有一个容易忽略的指令：`Try to do a lot of this planning and iteration in your thinking, and only show ideas to the user when you have higher confidence it'll delight them`——把迭代放在思维链里，只在高置信时给用户看。这是对交互体验的提示词级优化：别拿半成品烦用户。 ### 7. 实战坑提示：CSS 优先级互相抵消 > It's easy to generate CSS classes that cancel each other out (especially with a type-based selector like .section and a element-based selector like .cta). This can happen often with paddings/margins between sections. 一段非常“工程师写给自己人”的提醒：LLM 生成的 CSS 经常出现选择器优先级互相覆盖，区块间距（padding/margin）是重灾区。把这种**模型已知的高频翻车点**直接写进 SKILL.md，是官方仓库里少见的“踩坑备忘”式内容——Skill 作者最该模仿的部分：你的领域里模型总在哪儿摔跤，就写那儿。 ### 8. Restraint：把大胆花在一处 + 香奈儿法则 > Spend your boldness in one place. Let the signature element be the one memorable thing, keep everything around it quiet and disciplined... Not taking a risk can be a risk itself! 预算制审美：大胆只准花在 signature 一处，其余一切保持安静克制。紧接着是质量底线（`Build to a quality floor without announcing it`）：响应式到移动端、可见的键盘焦点、尊重 `prefers-reduced-motion`——做到即可，不必宣告。 然后是两个漂亮的收尾技巧： - **自审回路**：构建过程中持续自我批评，环境支持就截图检查——`a picture is worth 1000 tokens`（官方亲自下场鼓励模型用多模态看自己的产出）； - **香奈儿法则**：`before leaving the house, take a look in the mirror and remove one accessory`——出门前摘掉一件饰品。用一句时尚界格言替代十行“请做减法”的指令，这是全文提示词写作最优雅的一处。 最后还鼓励模型把试过的方案记进笔记：人类创作者靠记忆避免重复，模型靠笔记文件。 ### 9. 写作段：文案是设计材料 SKILL.md 用整整一章讲 UI 文案，开头一句定调：`Words appear in a design for one reason: to make it easier to understand... They are design material, not decoration`。规则全是可执行的硬约束： - 从用户侧命名：`A person manages notifications, not webhook config`（人管理的是通知，不是 webhook 配置）； - 主动语态、按钮说清楚会发生什么：`"Save changes," not "Submit"`；`Publish` 按钮产出的 toast 必须叫 `Published`——**动词贯穿全流程一致**； - 错误信息不许卖萌不许含糊：`Errors don't apologize, and they are never vague about what happened`； - 空状态是行动邀请：`An empty screen is an invitation to act`； - 每个元素只干一件事：`A label labels, an example demonstrates`。 把文案规范放进设计 Skill，是因为官方判断：**文案的模板化和设计的模板化一样致命**——“Copy can make a design feel as templated as the design itself"。 ## 能抄走的三板斧：给 Skill 作者的设计模式总结 1. **预反驳人设**：在正文第一段就宣告“默认方案已被拒绝”，把反模板从愿望变成约束。适用一切“要创意”类 Skill。 2. **负样本校准**：把领域内的 AI 高频俗套**逐个具名拉黑**（精确到色号、到 `01/02/03` 编号这种粒度），同时留出“用户明确要求则照做”的豁免口。比正面描述“要有独特性”有效一个数量级。 3. **强制自审外化**：两遍工作法 + “说出你改了什么、为什么” + 截图自检。让模型在交付前自己跑一轮 critique，是零成本的质量杠杆。 ## 对照组：vercel 的 web-design-guidelines，管“审”的另一半 如果 frontend-design 是**生成时注入审美**，web-design-guidelines 就是**交付前按清单审判**。它的 SKILL.md 展示了另一种架构——“薄壳型”： ```markdown description: Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX" ... ``` 三个设计点： - **触发词用引号短语**：description 里直接列出用户可能说的原话（"review my UI" / "check accessibility" / "audit design"），这是把 description 当搜索引擎 query 优化——和 frontend-design 写能力域不同，它写的是**用户口语**。 - **SKILL.md 只留流程壳**：正文第一步就是 `Fetch the latest guidelines from the source URL below`，规则本体放在 `vercel-labs/web-interface-guidelines` 仓库的 `command.md`，每次审查实时抓取。规则更新不用重新装 Skill——SKILL.md 永不腐化。 - **输出格式限定**：`terse file:line` 格式，审查结果直接定位到行，可执行性拉满。 它拉取的规则清单覆盖面非常工程化，摘几条感受一下密度：焦点必须可见（`:focus-visible`，禁止裸 `outline: none`）、表单禁止禁用粘贴、动画只动 `transform/opacity`、禁止 `transition: all`、必须尊重 `prefers-reduced-motion`、中文排版级的细节如弯引号替代直引号、数字列用 `tabular-nums`、标题用 `text-wrap: balance` 防孤字、超 50 项列表虚拟化、状态进 URL 查询参数、破坏性操作必须有确认或撤销窗口、`touch-action: manipulation` 消除移动端双击缩放延迟…… **组合用法**：用 frontend-design 生成视觉方向，再用 web-design-guidelines 做一轮审查——一个管“像不像人做的”，一个管“对不对得起用户”。 ## frontend-design 工作流程图 ```mermaid flowchart TD A[收到 UI 设计需求] --> B{brief 是否锁定主题?} B -- 否 --> C[自行钉死: 主题 / 受众 / 页面唯一任务] B -- 是 --> D[第一遍: 产出设计计划 token system] C --> D D --> D1[Color: 4-6 个命名色值] D --> D2[Type: 2+ 角色字体配对] D --> D3[Layout: 一句话概念 + ASCII 线框] D --> D4[Signature: 唯一记忆点元素] D1 --> E{对照三大 AI 俗套自查} D2 --> E D3 --> E D4 --> E E -- 撞上默认样式 --> F[修改方案并说明改了什么、为什么] --> E E -- 通过自查 --> G[第二遍: 严格按计划写代码] G --> H[构建中持续自审 + 截图检查] H --> I[香奈儿法则: 摘掉一件多余的饰品] I --> J[质量底线: 响应式 / 键盘焦点 / prefers-reduced-motion] ``` ## 安装与使用 ```bash # 方式一：skills.sh CLI（同时支持 Claude Code / Cursor / Codex 等 20 个 agent） npx skills add anthropics/skills # 方式二：Claude Code 插件市场（官方 README 给出的方式） /plugin marketplace add anthropics/skills /plugin install example-skills@anthropic-agent-skills # 对照组：Vercel 审查类 Skill npx skills add vercel-labs/agent-skills ``` 装完后直接说“帮我做一个 xx 的落地页”或“把我的首页重新设计一下”即可触发；对 web-design-guidelines 则说“review my UI”。 ## 适用与不适用 **frontend-design 适合**：落地页、作品集、活动页、产品官网等“视觉即卖点”的场景；旧页面“去 AI 味”重设计；给客户提方案前的差异化构思。 **不适合**：后台管理系统、表单密集型工具页（这类场景要的是效率和一致性，恰恰需要“默认值”，它的反模板指令反而添乱）；不解决组件库选型、构建配置等工程问题。 **web-design-guidelines 适合**：上线前的无障碍/交互细节体检、代码审查流程中的一环。**不适合**：审美方向决策——它的清单里没有一条告诉你“该用什么颜色”。 ## 推荐排行榜 - **提示词工程教科书**：frontend-design（负样本校准 + 预反驳人设，全生态样本级） - **架构最抗腐化**：web-design-guidelines（薄壳 + 运行时拉取规则） - **最适合二创学习的**：frontend-design（只有两个文件，全部价值集中在一个 SKILL.md 里，读完就能复用其写法做自己的领域 Skill） - **组合价值最高**：两者串联——frontend-design 管“造得像人”，web-design-guidelines 管“审得够细” ## 参考来源 1. [skills.sh — The Agent Skills Directory 全时段榜单](https://skills.sh) — frontend-design 796.7K 安装列第 3、web-design-guidelines 557.7K 列第 37、各仓库安装总量及支持的 20 个 agent 名单（2026-08-28 抓取） 2. [anthropics/skills — skills/frontend-design/SKILL.md 原文](https://raw.githubusercontent.com/anthropics/skills/main/skills/frontend-design/SKILL.md) — 本文逐段引用的提示词全文 3. [anthropics/skills — GitHub 仓库](https://github.com/anthropics/skills) — 17.2 万 Star / 2.04 万 Fork / 853 PR 数据、目录结构（frontend-design 仅含 LICENSE.txt 与 SKILL.md）、Apache 2.0 与 source-available 授权说明 4. [vercel-labs/agent-skills — web-design-guidelines/SKILL.md 原文](https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/web-design-guidelines/SKILL.md) — 薄壳架构与触发词设计分析依据 5. [vercel-labs/web-interface-guidelines — command.md 规则清单](https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md) — 审查规则明细（焦点、表单、动画、排版、性能、暗色模式等） > [!tip] 51学通信知识星球 > **星主：爱卫生**（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。 > **星球定位**：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。 > **当前规模**：5200 篇主题 / 990 个回答，198 元/年。 > **加入福利**：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。 > **AI 加持**：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。