本期是单 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。
核心发现有三条：
LICENSE.txt 和 SKILL.md，没有任何脚本、模板或参考资源——全靠一段约 1500 词的英文提示词，就让 Claude 的前端产出从“AI 味模板”跳到“有主见的设计”。这证明 Skill 生态里最值钱的未必是代码，而是写进 SKILL.md 的领域判断力。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 或选框架；它的作用域是视觉决策层——配色、字体、布局概念、动效取舍、文案语气。
以下引用均来自 anthropics/skills 仓库 main 分支的 SKILL.md 原文（2026-08-28 抓取）。
---
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 只做触发，不做别的。
正文第一段：
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.
拆开看是三个提示词技巧叠加：
This client has already rejected proposals that felt templated——客户已经拒绝过模板方案。这句话堵死了模型最舒适的输出路径：还没开始，默认方案就被宣告“已死”。take one real aesthetic risk you can justify——必须冒一次“能自圆其说的真实审美风险”。注意限定词 you can justify，它防止模型为怪而怪：风险要能被论证。这个“预设客户挑剔”的写法，比单纯写“要有创意”有效得多——它把创意从愿望变成了生存约束。
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 示范“记忆驱动个性化”。
这一段是给模型的“审美宪法”，逐条看：
① 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——优雅是把选定的愿景执行到位。
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 设计的三大聚集样式：
#F4F1EA 的暖奶油背景 + 高对比衬线展示字 + 陶土色（terracotta）点缀；然后是两句话的处理规则，非常克制：
the brief's own words always win——如果 brief 明确要求其中某一种，照做，用户的话永远赢；don't spend that freedom on one of these defaults——别把自由花在这些默认值上。为什么这段有效？因为 LLM 的“俗套”本质是训练数据的高概率聚集区。对抗它的办法不是喊“要有创意”（模型不知道什么叫创意），而是把高概率聚集区逐个点名拉黑——负样本校准。这比任何正面描述都精确。
流程规定为 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——把迭代放在思维链里，只在高置信时给用户看。这是对交互体验的提示词级优化：别拿半成品烦用户。
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 作者最该模仿的部分：你的领域里模型总在哪儿摔跤，就写那儿。
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——出门前摘掉一件饰品。用一句时尚界格言替代十行“请做减法”的指令，这是全文提示词写作最优雅的一处。最后还鼓励模型把试过的方案记进笔记：人类创作者靠记忆避免重复，模型靠笔记文件。
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"。
01/02/03 编号这种粒度），同时留出“用户明确要求则照做”的豁免口。比正面描述“要有独特性”有效一个数量级。如果 frontend-design 是生成时注入审美，web-design-guidelines 就是交付前按清单审判。它的 SKILL.md 展示了另一种架构——“薄壳型”：
description: Review UI code for Web Interface Guidelines compliance. Use when
asked to "review my UI", "check accessibility", "audit design", "review UX" ...
三个设计点：
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 做一轮审查——一个管“像不像人做的”，一个管“对不对得起用户”。
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]
# 方式一：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 适合：上线前的无障碍/交互细节体检、代码审查流程中的一环。不适合：审美方向决策——它的清单里没有一条告诉你“该用什么颜色”。
[!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 等场景全覆盖。