官方 example-skills 全家桶里的硬技能件——docx、pdf、xlsx、pptx、mcp-builder、web-artifacts-builder——本专栏已经拆了个遍，只剩一个软技能件始终没人动：frontend-design。这是 Anthropic 官方技能仓库里最特别的一件：它不带一行脚本、不接任何外部 API、不产生任何文件，全程只做一件事——在 Claude 写前端之前，往它的上下文里塞一份“别像 AI”的清单。本文把它从 frontmatter 到最后一条禁令逐段拆开，看官方怎么把“审美”这种最玄学的东西，写成机器可执行的设计规则，并提炼出五条可以直接搬去写你自己 Skill 的套路。
同赛道参照对象全部来自本机实际在册的技能（评分为编辑判断，基于官方写法质量与本机实测体验，非量化数据）：
| Skill | 功能完整度 | 设计质量 | 实战效果 | 上手难度 | 社区活跃度 |
|---|---|---|---|---|---|
| frontend-design（官方） | ★★★☆☆ | ★★★★★ | ★★★★☆ | ★★★★★ | ★★★★☆ |
| web-artifacts-builder（官方） | ★★★★★ | ★★★★☆ | ★★★★☆ | ★★★★☆ | ★★★★☆ |
| figma-implement-design | ★★★★☆ | ★★★☆☆ | ★★★★☆ | ★★★☆☆ | ★★★☆☆ |
| canvas-design（官方） | ★★★★☆ | ★★★★☆ | ★★★☆☆ | ★★★★☆ | ★★★☆☆ |
说明：frontend-design 的“功能完整度”只给三星不是短板，而是它压根没打算功能完整——单文件、零依赖，它卖的是判断力不是执行力。上手难度五星指的是几乎零成本：装上即用，无需任何配置。
官方 example-skills 里其他件的动作全是“加法”：docx 教 Claude 解包再缝回一个 Word 文件，pdf 塞给它六条文档配方，mcp-builder 给它一套 94 分才准出厂的质检流程。这些件解决的都是“不会做”的问题。
frontend-design 解决的是另一个问题：“会做，但做出来一眼 AI。”
你大概见过那种页面：蓝紫渐变 hero、三张等宽圆角卡片、Inter 字体、rounded-2xl shadow-md 满天飞、底部一个“了解更多”按钮。这不是 Claude 不会写 CSS，恰恰是因为它太会了——海量训练数据把“均值页面”压进了它的先验。普通生成时，它默认输出的就是统计意义上的最大公约数：没错，但平庸。
所以这件技能的设计目标不是注入知识，而是对抗先验。官方全家桶里它独一份：其他件都在教 Claude 新动作，只有它在管 Claude 别像什么。理解了这一点，它的每一行设计都变得可解释。
（以下引用均为官方公开版本的大意转述。）
这份 SKILL.md 的 description 分两句。第一句说能力：创建有辨识度的、生产级的前端界面。第二句说时机：构建网页、组件、演示页面时使用。
关键在第二句。Skills 的 description 不是文档，是路由信号——主循环的 Claude 靠读它来决定要不要加载这个件。写成“何时用”（Use when building...）而不是“是什么”（这是一个前端设计技能），命中率高得多：用户说“帮我做个落地页”，路由器拿“落地页/组件/页面”去匹配，一击即中；如果 description 写成抽象的能力宣言，匹配就只能靠猜。
对比同门 docx 的 description——它列的是一堆文档操作动词（创建、编辑、读取），因为文档件靠“动作”触发；frontend-design 靠“场景”触发。触发词跟着使用场景走，不跟着功能清单走，这是第一课。
正文开篇不讲 CSS，先讲决策顺序：动手前先搞清楚这个页面为谁服务、传递什么气质、用什么样的强概念统领，然后再落第一行样式。
这段看似废话，实际是在改写模型的默认执行序。没有它，Claude 收到“做个页面”会直接开始铺 HTML 骨架——hero、features、footer 三件套自动流出来。把“定调”写在最前面，等于在生成流水线的最上游插了一道闸门：概念先于结构，结构先于样式。
这两段是全件的火力核心，写法高度一致：每条禁令点名一个具体的俗套，并立刻给出替代方向。
字体段的大意：不要默认 system-ui、Inter、Roboto；根据页面气质选择有性格的展示字体做标题，正文再配可读性好的字体，用字号和字重拉开层级。
色彩段的大意：不要默认蓝、不要紫、不要渐变堆砌；围绕一到两个主色建立大胆的配色承诺，让颜色承担语义。
为什么偏偏点名这几个？因为它们就是模型先验里概率最高的输出。Inter 是训练语料中最常见的“安全”字体，蓝紫渐变是 AI 生成页面最常见的指纹。干预点的选择不是拍脑袋，是对着模型的最大概率输出开的枪——命中率最高的否定，永远是禁止它本来最想做的事。
更值得注意的是成对结构：“不要 X”后面必跟“改为 Y”。只写禁令会留一个真空——模型放弃了 Inter 却不知去哪，最后挑一个同样平庸的备胎；给了方向，禁令才闭环。后面提炼套路时还会回到这一点。
大意：避免机械等分的多栏布局；尝试不对称、错位、编辑排版式的构图；把留白当成主动的设计工具而不是剩余空间。
这一段管的是“页面骨架的俗套”。三栏等宽卡片是 AI 页面第二大指纹，官方的处理手法和字体段相同：点名指纹，给替代解法。
大意：动画必须服务功能——反馈、层级、连续性——而不是装饰；克制时长，认真处理 hover 与过渡状态。
这段短，但立场清晰：它没有禁止动效，而是给动效设了准入条件（有目的）。对比社区很多“审美提示词”一刀切地写“别加动画”，官方的写法保留了表达空间，只关掉了滥用之门。
正文收尾是一份清单：三栏等宽卡片、到处圆角加阴影、hero-features-footer 模板三件套、无意义渐变……逐条列出“一眼 AI”的特征，要求生成后自检。
这是整份 SKILL.md 里最值得学的一笔。“有设计感”是不可判定的模糊目标，模型没法对它做自检；但“页面里有没有三栏等宽卡片”是可判定的。把品味翻译成证伪清单，等于给模型装了一个可以自己跑的验收测试——写完页面，回头扫一遍清单，命中一条改一条。
审美本来是评价性的、事后的，这份清单把它变成了生成性的、事中的。玄学被降维成了 checklist，这是“降俗”二字的真正含义。
最后看它不写什么：没有脚本、没有参考资源文件、没有参数、没有状态、没有“渐进式披露”的第二层文档。docx 件带一整套打包解包脚本，mcp-builder 带评分表，这件只有一页纸。
零依赖零状态意味着：加载成本约等于零，永远不会因环境缺依赖而翻车，任何时候触发都不会有副作用。对比本栏目此前拆过的 long-running-agent（后台三班倒）和 office-mcp（39 只借来的手）这类重装件，frontend-design 展示了技能光谱的另一极端——纯上下文注入型产品：整个 Skill 就是一段精心设计的提示词，而它确实改变了输出。
省略还是声明。官方用“什么都没有”告诉你：如果一个问题靠改变模型的判断倾向就能解决，就不要给它造工具。
flowchart TD
U["用户请求：做个页面"] --> T{"description<br/>命中场景？"}
T -->|命中| L["加载审美件"]
T -->|未命中| G["裸生成：默认蓝紫风"]
L --> S["先定调：概念先行"]
S --> F["选字体：避开Inter"]
F --> C["配色：弃蓝紫默认"]
C --> A["布局：破均分网格"]
A --> M["动效：只留有目的的"]
M --> K["自检：反俗套清单"]
K -->|过关| O["产出成品"]
K -->|命中俗套| L
注意图里那条从“自检”回到“加载”的回边——清单不过关就带着具体罪证重新过一遍设计决策，这是件内建的自我修复循环。
适合： - 从零生成落地页、产品页、组件、演示页——它的主场 - 修复“一眼 AI”的存量页面——把反俗套清单当体检表用 - 搭配 web-artifacts-builder 使用——后者管工程结构，它管观感气质，两人组正是官方把它们放在同一个 example-skills 包里的用意
不适合： - 已有设计系统的项目——你需要的是硬约束型的 brand-guidelines（本栏此前拆过，把 VI 写成不可越线），而不是劝导型的审美建议 - 像素级还原设计稿——那是 figma-implement-design 赛道的事，进料是 Figma，不是品味 - 中文字体场景——这份清单以拉丁字体生态为默认假设，中文页面的字体栈选择它基本没管，用的时候你得自己补一条“中文正文别默认宋体，标题慎用书法体”之类的本地化禁令
固有短板只有一个：它是建议不是法律。清单写在上下文里，长生成中模型仍可能回退到先验——尤其上下文被压缩后，禁令的边际效力会衰减。要强制力，得学 brand-guidelines 的路子把规则写进校验环节。
本机已随 example-skills 插件包在册，插件路由为 example-skills:frontend-design。手动安装：
git clone https://github.com/anthropics/skills.git
# 仓库内找到 frontend-design 目录（若目录层级有变，以仓库实际结构为准）
cp -r <仓库内路径>/frontend-design ~/.claude/skills/
或在 Claude Code 内用 /plugin 浏览 example-skills 插件包整体安装，一次带走全家桶。
官方件里有一类不教操作、只改判断倾向的软技能件，按“写法可迁移到自建 Skill 的程度”排：
注：本期抓取受限，凡未经两源交叉确认的星标数、日期均不列出；文中所有评分为本机实测与写法分析的编辑判断。
[!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 等场景全覆盖。