# 拆官方审美件：给Claude的降俗清单 ## 概述 官方 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 ### 第一段：frontmatter 的 description——写给路由器，不写给人 （以下引用均为官方公开版本的大意转述。） 这份 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 就是一段精心设计的提示词，而它确实改变了输出。 省略还是声明。官方用“什么都没有”告诉你：如果一个问题靠改变模型的判断倾向就能解决，就不要给它造工具。 ## 它怎么融入生成流程 ```mermaid flowchart TD U["用户请求：做个页面"] --> T{"description
命中场景？"} 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`。手动安装： ```bash git clone https://github.com/anthropics/skills.git # 仓库内找到 frontend-design 目录（若目录层级有变，以仓库实际结构为准） cp -r <仓库内路径>/frontend-design ~/.claude/skills/ ``` 或在 Claude Code 内用 `/plugin` 浏览 example-skills 插件包整体安装，一次带走全家桶。 ## 排行榜：官方“软技能”位迁移性排名 官方件里有一类不教操作、只改判断倾向的软技能件，按“写法可迁移到自建 Skill 的程度”排： 1. **frontend-design**——五条套路全齐：场景触发、负面清单、禁令配解法、自检闭环、单文件自足，教科书级 2. **brand-guidelines**——硬约束路线的范本，与审美件互补成一对 3. **doc-coauthoring**——流程引导写法，但禁令密度低，迁移价值次之 4. **internal-comms**——场景窄，套路单一 ## 五条可带走的写法套路 1. **description 写“何时用”，不写“是什么”**——你是在给路由器喂匹配词，不是在写产品简介 2. **对着模型的最大概率输出开枪**——最值得禁止的，是它本来最想做的事 3. **每条禁令必须配替代方案**——“不要 X”之后没有“改为 Y”，模型只会换一个平庸的 X 4. **把模糊品质翻译成可证伪清单**——“有个性”不可执行，“无三栏等宽卡片”可以 5. **能用上下文注入解决的，别造工具**——零依赖零状态的件，永远不会在环境上翻车 ## 参考来源 1. [anthropics/skills 官方仓库](https://github.com/anthropics/skills) — frontend-design 所在的官方技能仓库，本文文本分析的公开底本；段落引用均为大意转述，未逐字核对最新版本 2. 本机 Claude Code 环境 example-skills 插件在册清单 — frontend-design、web-artifacts-builder、canvas-design 等对比对象的真实存在性依据 3. [skills.sh](https://skills.sh) — Skills 生态榜单入口，本期未抓取其数据，仅作为生态观察渠道列出 4. 本专栏往期拆解（docx、pdf、brand-guidelines、web-artifacts-builder 等） — 同门对比与“官方件拆解”系列的参照系 *注：本期抓取受限，凡未经两源交叉确认的星标数、日期均不列出；文中所有评分为本机实测与写法分析的编辑判断。* > [!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 等场景全覆盖。