# 官方视觉四件套横评：一个仓库四种写法 ## 概述 本期是 Skills 生态拆解第 7 轮，做同赛道对比横评。选题落在一个此前从未拆过的赛道：**视觉产出**。对象是 Anthropic 官方示例技能包（example-skills）里的四件套——`frontend-design`、`canvas-design`、`theme-factory`、`brand-guidelines`。它们出自同一个仓库、同一个作者团队、同一条「让 Claude 产出视觉物」的赛道，但四个 SKILL.md 的写法完全不同：一份是纯条款的「审美宪法」，一份是两段式流水线还内置强制返工，一份是素材册加点单门禁，一份是精确到色值的品牌参数表。本文全部内容基于本机插件缓存中对四个 SKILL.md 的逐段实读，不掺二手转述。核心发现一句话：**同一赛道可以共存四个技能，前提是描述层把「产物类型」划清了边界——这四份文件恰好是四种可复用的 SKILL.md 写作范式。** ## 评测对比表 | 维度（权重） | frontend-design | canvas-design | theme-factory | brand-guidelines | |---|---|---|---|---| | 功能完整度（25%） | ★★★★★ | ★★★★ | ★★★☆ | ★★★ | | 设计质量（25%） | ★★★★★ | ★★★★★ | ★★★★ | ★★★★ | | 实战效果（20%） | ★★★★★ | ★★★★ | ★★★★ | ★★★☆ | | 上手难度（15%） | ★★★★★ | ★★★★ | ★★★★★ | ★★★★★ | | 社区活跃度（15%） | ★★★★☆ | ★★★★ | ★★★☆ | ★★★☆ | | **加权总分** | **4.9** | **4.3** | **4.0** | **3.7** | 说明：四件同属官方示例包，更新节奏随主仓库统一，社区活跃度按公开讨论热度做定性判断，未做精确数据核验；其余维度依据实读内容评定。 ## 四件套逐个看 ### frontend-design：4.9 分，纯条款写法的天花板 定位是「做出有辨识度、可上生产的前端界面」，一句话点出行业痛点：avoid generic "AI slop" aesthetics——别再产出一眼 AI 味的页面。它没有任何脚本、没有任何附属资产，整份 SKILL.md 就是给模型上的一道审美宪法：写代码前先做 Design Thinking，选定一个极端的美学方向（brutalist、editorial、luxury、retro-futuristic……），然后用五个章节约束执行——字体、配色、动效、空间构图、背景细节。最有价值的是两条负面清单：一条禁用 Inter、Roboto、Arial 和「白底紫渐变」这类俗套；另一条更狠——「NEVER converge on common choices (Space Grotesk, for example) across generations」，连模型自己最爱用的安全牌 Space Grotesk 都点名封杀，防止它每次生成趋同。短板几乎没有，唯一要适应的是它的「主见」：如果你就是想要 Inter，必须在提示词里显式指定，否则它会替你做冒险的选择。 ### canvas-design：4.3 分，两段式流水线 + 预埋的二刷 这是四件里工序设计最精致的一个。它把一次设计任务拆成两个交付物：先写一份「设计哲学宣言」（.md）——给这个虚构的艺术运动起名（示例里有 Brutalist Joy、Chromatic Silence 这种味道），写 4-6 段空间、色彩、构图的主张；第二步再拿着宣言去画布上产出 .pdf 或 .png。中间还藏了一个彩蛋环节叫 Deducing the Subtle Reference：把用户的主题处理成「内行才看得出的暗梗」，原文的比喻是爵士乐手引用另一首歌——懂的人会心一笑，不懂的人也觉得构图漂亮。两处写法堪称教科书：一是反复向「下一个 Claude」强调 craftsmanship，要求成品看起来像顶级高手熬了无数小时；二是在 FINAL STEP 里直接预埋了一句「用户已经说了：It isn't perfect enough. It must be pristine」——把二刷打磨写成了必经工序，不依赖用户真的去挑剔。代价是工序长、产物限定在 png/pdf，赶时间或想要网页代码的别用它。 ### theme-factory：4.0 分，素材册 + 点单门禁 定位最克制：它不生成设计，只做「换肤」。内置 10 套现成主题（Ocean Depths、Midnight Galaxy、Desert Rose……），每套含色板 hex 码和标题/正文字体对，存放在 themes/ 目录按需读取，另附一份 theme-showcase.pdf 作为可视化的菜单。它的 SKILL.md 最大的特点是把交互顺序写成了硬性门禁：先展示 showcase 给用户看，再询问选哪套，然后「等待用户明确确认」，最后才动手套用——四件里唯一一个把「停下来等用户」写成流程的。还有一条逃生通道：十套都不合适时，按同样规格现造一套新主题给你过目。短板在功能边界：只管视觉一致性，不管内容和布局质量，deck 本身烂它救不了；另外它面向 presentation slide decks 的场景描述，也让它基本退出其他赛道的路由。 ### brand-guidelines：3.7 分，一份可以抄作业的品牌参数表 名字容易误导：它不是通用工具，而是 Anthropic 自家品牌规范的技能化——精确到 hex 的色值（主色 #141413/#faf9f5，强调色橙 #d97757、蓝 #6a9bcc、绿 #788c5d）、字体对 Poppins 配 Lora、字号阈值（24pt 以上标题用 Poppins）、以及完整的回退链（缺字体时退 Arial/Georgia）。技术上依托 python-pptx 的 RGBColor 做精确上色。它是四件里唯一显式写触发关键词的——开头一行 Keywords: branding, corporate identity, visual identity…，其余三件全靠描述隐式路由。单件实用价值一般（你多半不想让自己的文档一身 Anthropic 味），但它是一间样板间：想知道「怎么把一套品牌规范翻译成机器可执行的 SKILL.md」，抄它的结构最省事——色值表、字体回退、应用规则三段式，换成你家 VI 就是你的品牌技能。 ## SKILL.md 逐段对比：一个仓库，四种范式 把四份文件并排放，真正的价值才显出来。它们其实是四种可复用的写法范式： | 技能 | 写法范式 | 附属资产 | 交互模式 | 产物 | |---|---|---|---|---| | frontend-design | 审美宪法（纯条款） | 无 | 一把梭直出 | 可运行前端代码 | | canvas-design | 两段流水线 + 强制二刷 | canvas-fonts/ 字体目录 | 一次交付三件套 | 宣言 .md + 成品 .pdf/.png | | theme-factory | 素材册 + 点单门禁 | showcase.pdf + themes/×10 | 展示→等确认→套用 | 套肤后的 deck | | brand-guidelines | 品牌参数表 | 无（依托 python-pptx） | 直接应用 | 品牌化文档 | **范式一：宪法式。** frontend-design 证明了一个反直觉的事实——不配任何脚本和素材，只靠条款密度也能造出最强技能。它的条款全是「负面清单 + 反趋同」结构：不告诉你该做什么，而是把模型的所有惯性路径逐一点名封死。适合「输出质量取决于品味」的任务。 **范式二：流水线式。** canvas-design 的核心技巧是「把中间产物显式化」：先让模型写一份给自己的设计哲学，再让它执行。等于把一次生成拆成两次思考，中间产物还能给用户审。FINAL STEP 里预埋「用户已不满意」更是神来之笔——它利用了指令的既成事实感，模型读到「用户已经说了不完美」时，返工不再是可选项而是既定流程。 **范式三：门禁式。** theme-factory 解决的是「选择权归属」。当技能自带一个素材库，最糟的体验是模型擅自挑一套就开干。它把「展示菜单 → 问 → 等确认 → 执行」写成四步硬流程，把 SKU 型技能的用户体验一次定型。凡是内置素材库的技能都该学这一手。 **范式四：参数表式。** brand-guidelines 展示了最低门槛的写法：一份数值精确的规范（hex、pt、fallback 链）就是一份合格 SKILL.md。它还是唯一写 Keywords 行的样本——在描述层之外又加了一层显式触发词保险。 同赛道共存不打架的秘密也在描述层：四个描述各自锁死了产物类型——frontend-design 交付「可运行的界面代码」，canvas-design 只出 md/pdf/png，theme-factory 只提 presentation slide decks，brand-guidelines 只认品牌词。用户说「做张海报」「做个落地页」「给 deck 换肤」「按品牌规范排」，各走各的门，互不抢活。 ## 分流全景图 ```mermaid flowchart TD A["用户提出视觉需求"] --> B{产物是什么} B -->|可运行的界面代码| C["frontend-design"] B -->|单页海报或画布作品| D["canvas-design"] B -->|给幻灯片换主题| E["theme-factory"] B -->|按品牌规范排版| F["brand-guidelines"] C --> G["HTML React Vue 代码"] D --> H["哲学宣言 md 加成品 pdf/png"] E --> I["10 套主题色板加字体对"] F --> J["Anthropic 品牌参数表"] ``` canvas-design 的内部流水线单独看一眼： ```mermaid flowchart LR A["一句模糊需求"] --> B["写设计哲学宣言 md"] B --> C["推敲隐性梗"] C --> D["按宣言产出画布"] D --> E["预埋终审：假定已被告知不完美"] E --> F["二刷打磨后交付"] ``` ## 安装命令 四件套同属官方示例技能包 example-skills，随包附带。两种装法： ```bash # 方式一：插件面板（推荐） # 在 Claude Code 会话中执行 /plugin，打开插件面板 # 搜索 example-skills（Anthropic 官方示例技能包）一键安装，四件套全部到位 # 方式二：手动安装任意单件 git clone https://github.com/anthropics/skills mkdir -p ~/.claude/skills # 在仓库内找到对应技能目录（如 skills/frontend-design），整目录复制： cp -r skills/frontend-design ~/.claude/skills/ ``` 装完在会话里直接说「做一个 XX 落地页」「给这份 deck 换个主题」「按 Anthropic 品牌规范排一份 PPT」即可触发对应技能。 ## 推荐排行榜 - **综合第一：frontend-design**（4.9）——零依赖、零配置、效果立竿见影，新手装机第一件。 - **写法教科书：canvas-design**（4.3）——想学 SKILL.md 流水线设计，它是全网最好的免费教材。 - **PPT 党刚需：theme-factory**（4.0）——配合任何幻灯片生成技能组成「生成+换肤」流水线。 - **品牌方样板间：brand-guidelines**（3.7）——自己不常用，但抄它的结构写自家品牌技能最划算。 按使用频率排：frontend-design > theme-factory > canvas-design > brand-guidelines。按「值得逐行精读」排：canvas-design > frontend-design > theme-factory > brand-guidelines——两个榜单顺序相反，这本身就是本期最有意思的发现：**最常用的和最值得学的，往往不是同一件。** ## 注意事项 - **同装四件存在轻微触发竞争**：「把页面做好看」这类模糊指令可能同时唤起 frontend-design 和 theme-factory，指令里带上产物类型（代码/海报/换肤/品牌）可精准路由。 - **canvas-design 工序最长**：两阶段加二刷，一个任务出三个文件，快节奏场景慎用。 - **brand-guidelines 直接产出会一身 Anthropic 味**：橙蓝色板加 Poppins/Lora 是人家的 VI，通用场景请当模板而非工具。 - **frontend-design 有强烈主见**：显式指定字体和色板才能压住它的冒险偏好。 - 仓库目录结构可能随版本调整，手动安装时以仓库内实际路径为准。 ## 参考来源 1. [anthropics/skills](https://github.com/anthropics/skills) — Anthropic 官方 Skills 仓库，四件套所在 2. skills/frontend-design/SKILL.md — 本机插件缓存（anthropic-agent-skills/example-skills）逐段实读 3. skills/canvas-design/SKILL.md — 同上，两段式流水线与预埋二刷条款出处 4. skills/theme-factory/SKILL.md — 同上，四步点单门禁与 10 套主题目录出处 5. skills/brand-guidelines/SKILL.md — 同上，色值表与 Keywords 触发行出处 > [!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 等场景全覆盖。