# 审美冻结在皮里：官方换肤件拆解 ## 概述 本期是单件深拆的第 N 钻：anthropics/skills 官方仓库里的 theme-factory。它可能是全家桶里最「不像 Skill」的一个——全文没有一行教模型如何审美，审美被提前冻结成十套预制主题包，运行时只干两件事：选皮、刷 token。本文把它拆到 SKILL.md 每一段的设计意图、主题包的文件构成、渐进加载的省 token 手法，以及「设计决策从运行时挪到发布时」这条架构主线，最后提炼七条可以照抄到自己 Skill 里的写法模式。需要说明：本次写作环境网络受限未能实时重抓仓库，文中结构与片段基于官方仓库公开文件与作者此前实测记录，细节以仓库当前版本为准。 ## 评测对比表 | 维度 | theme-factory | 参照：frontend-design | 参照：canvas-design | |------|:---:|:---:|:---:| | 功能完整度 | ★★★☆☆ | ★★★★☆ | ★★★★☆ | | 设计质量 | ★★★★★ | ★★★★☆ | ★★★★☆ | | 实战效果 | ★★★★☆ | ★★★★☆ | ★★★☆☆ | | 上手难度（低=好） | ★★★★★ | ★★★★☆ | ★★★★☆ | | 社区活跃度 | ★★★☆☆ | ★★★★★ | ★★★★☆ | 先说结论：theme-factory 在「设计质量」上拿全家桶罕见的满分，但「功能完整度」只有三星——它的边界比谁都窄，窄得理直气壮。 ## 一、定位：全家桶里唯一不教审美的审美件 官方全家桶里管「好看」的件至少有三个：frontend-design 管网页品味，canvas-design 管平面构图，theme-factory 管什么？它的官方定位一句话：**给已经存在的 artifact 换皮**。用户手里有一套 HTML 幻灯片、一份报告页、一个数据面板，内容都写好了，就差「变好看」——把 brutalist 的粗粝感刷上去，或者刷成 corporate 的稳妥蓝。 这三件的分工非常清楚，值得画一张图： ```mermaid flowchart TD A["用户要好看"] --> B{"东西存在吗"} B -->|"不存在"| C["frontend-design
从零生成有品味的页"] B -->|"是图片类"| D["canvas-design
从零构图出图"] B -->|"已存在"| E{"要原创设计吗"} E -->|"要"| F["frontend-design
重新设计"] E -->|"只要风格统一"| G["theme-factory
选皮刷token"] ``` 看出门道了吗：theme-factory 排在所有判断链的**末端**。它不产生任何设计决策，它是执行器。正因为它不做决策，它的 SKILL.md 才可以薄——所有重活早在写仓库的时候就干完了。 这是本文最想立住的论点：**theme-factory 把「审美」从运行时挪到了发布时**。模型每次跑这个 Skill 不需要理解什么是 Art Deco 的对称轴、什么是 brutalist 的裸露混凝土感，它只需要机械地执行一份冻结好的规范。审美发生了什么？审美发生在 anthropics 的员工写那十套 CSS 的下午。Skill 运行时只是皮的单位搬运工。 ## 二、SKILL.md 逐段拆解 ### 2.1 frontmatter：一条 description 塞进一个搜索关键词词库 和所有官方件一样，theme-factory 的 frontmatter 只有两个字段：name 和 description。但它的 description 是全家桶里最「话痨」的那一档，大意转述如下： > 主题工厂。为幻灯片、文档、报告等 HTML artifact 创建和应用主题风格。当用户要求「应用主题」「换个风格」「重新配色」「换字体」「让幻灯片好看一点」时使用。 拆开看这句话里埋了什么机关： **第一层：名词埋雷。**「slides」「documents」「reports」三个名词直接圈定输入物类型。用户哪怕只说「给我的 deck 换个风格」，deck≈slides，照样命中。 **第二层：动词同义词铺满。**「apply a theme」「change the style」「restyle」「recolor」——同一件事的四种说法全写进去。这官方件系列拆到今天反复出现的规律：description 不是给人看的简介，是**触发检索的语料**。模型读用户请求时做的是语义匹配，同义词铺得越满，命中率越高。上一轮拆 brand-guidelines 时我们见过同款写法，theme-factory 是更极端的样本——它的功能就一句话，description 却把「用户可能怎么表达这件事」穷举了一遍。 **第三层：排他性边界。** description 明确划出「不碰内容、只碰样式」。这一句是保命符：没有它，模型换皮时看到文案别扭会顺手改两句，用户的内容就污染了。官方件在边界声明上的纪律极强——该干的写清楚，不该干的写得更清楚。 ### 2.2 正文结构：一张菜单，而非一本菜谱 翻过 SKILL.md 正文，结构大概是三段式： 1. **总纲**：说明本件的能力——从预制主题中选一套（或组合）应用到用户的 artifact； 2. **主题菜单**：列出 styles 目录下的主题包及一句话风格简介，让模型（和用户）像翻菜单一样挑； 3. **应用流程**：选中后打开对应主题包的规范文件，按规范把样式刷到 artifact 上。 注意这里最关键的设计抉择：**SKILL.md 里没有一份完整的主题定义**。没有内联的色板表、没有字体清单、没有间距规范。全部设计知识都住在资源文件里，SKILL.md 只是一个目录页 + 动线指引。 这就是官方 skill-creator 反复强调的渐进式加载（progressive disclosure）：启动时只读 SKILL.md 的几百 token；用户选定「neon」之后，才去读 neon 主题包的规范；没选的主题包一个字节都不会进上下文。十套主题如果全部内联进 SKILL.md，每次触发都要烧掉几千 token 读九套用不上的皮——菜单式设计把这笔账砍到了近零。 ### 2.3 主题包内部：一套皮两个文件 styles 目录下每个主题是一个独立文件夹，大致包含两样东西（以作者此前阅读仓库的记录为准，文件名可能随版本微调）： - **theme-spec / 说明文件**：用自然语言+结构化清单描述这套皮的「性格」——定位、色板、字体组合、版式原则、使用禁忌； - **theme.css**：把上述规范落成 CSS 变量与样式的成品文件。 这个双载体设计非常值得抄。为什么一份皮要写两遍？ ```mermaid flowchart TD A["用户: 换成手绘风"] --> B["读SKILL.md菜单"] B --> C["用户选定主题"] C --> D["只读该主题的spec文件"] D --> E{"场景是什么"} E -->|"理解风格意图"| F["spec: 自然语言描述
粗笔触/暖纸色/随性排版"] E -->|"动手改artifact"| G["css: 冻结的变量与规则
直接引用或复制"] F --> H["按意图套用变量"] G --> H H --> I["输出带皮artifact
内容一字未动"] ``` spec 文件是给模型**读**的——它需要理解「hand-drawn 意味着不完美的边框、markers 笔触感」才能处理 spec 没覆盖到的边角组件；CSS 文件是给模型**抄**的——变量名、色值、字体栈都是定死的，直接套。一个管理解，一个管执行，自然语言和代码各司其职。比单一载体强在哪：只有 CSS，模型遇到清单外的组件会瞎编；只有自然语言，执行时每一步都要现发挥，风格漂移。 主题名单方面，据作者此前阅读仓库时的记录，十套左右的主题包括：corporate（企业蓝的稳妥派）、brutalist（裸露结构的粗粝派）、art-deco（装饰艺术的对称奢华）、editorial（杂志排版的呼吸感）、hand-drawn（手绘涂鸦感）、minimalist（极简留白）、neon（霓虹高饱和）、playful（活泼圆润）、scrapbook（拼贴手账）等。名单可能随仓库版本增删，装好后 `ls` 一下为准。 ### 2.4 组合自由：菜单之外的暗门 SKILL.md 里还有一条容易被忽略的授权：**允许混搭**。用户可以说「版式用 brutalist，配色用 corporate」，模型被明确允许跨包取材。这条设计把十套皮瞬间裂变成十的十次方种组合，而成本只是 SKILL.md 里的一句话。 更深一层，它还暗示了新主题包可以按同样的目录结构自制——你完全可以在 styles 里塞一个自己公司的皮包，theme-factory 从此变成你的私有主题库。官方件很少把「可扩展性」写在明面上，但它的目录结构本身就是邀请函。 ## 三、运行时动线：一次换皮的完整旅程 把全流程串起来（竖版防超宽）： ```mermaid flowchart TD A["用户请求换皮"] --> B["命中description
触发theme-factory"] B --> C["读SKILL.md菜单"] C --> D{"用户指定皮了吗"} D -->|"指定了"| F["直接读该包spec"] D -->|"没指定"| E["按内容气质推荐
数据面板推corporate"] E --> F F --> G["读theme.css变量"] G --> H["刷token到artifact"] H --> I{"spec覆盖该组件吗"} I -->|"覆盖"| J["照抄规则"] I -->|"未覆盖"| K["按风格意图推断
不越出皮的性格"] J --> L["输出: 内容零改动
样式整体换血"] K --> L ``` E 节点值得单独说：用户没头绪时，SKILL.md 授权模型主动推荐。推荐逻辑写在各主题 spec 的一句话简介里——corporate 的简介会说「适合商务汇报」，neon 会说「适合创意提案」。菜单上每套皮自带卖点文案，这是把「导购」职责也外包给了资源文件，SKILL.md 依然不用变厚。 ## 四、它为什么是这个形态：三条架构主线 **主线一：设计决策的批发零售。** frontend-design 是零售——每一次生成都现场做设计决策；theme-factory 是批发——设计决策一次性做好，冷冻入库，按需解冻。批发的单价低、上限也低，但它把「好品味」这种稀缺资源摊销到了每一次调用。对绝大多数「我不想丑就行」的场景，批发的性价比碾压零售。 **主线二：Skill 的极限瘦身实验。** 这个件的 SKILL.md 是全家桶最薄的之一，但它交付的视觉变化可能是最大的。它证明了 Skill 生态的一个极端形态：**SKILL.md 可以薄到只剩目录页，只要资源文件的目录结构足够自解释**。对照此前拆过的 gstack（Skill 长成软件仓库）和官方 xlsx（公式不自己算），官方件在「壳薄料厚」这条路上一路走到黑。 **主线三：确定性换确定性。** 模型做设计的不确定性是短板——同一个「做漂亮点」跑三次出三个版本。theme-factory 用冻结的 CSS 变量把输出钉死：选了皮，结果就可复现。这是把 LLM 的短板用工程手段焊掉的标准操作，和官方 docx「改 XML 不重建」、xlsx「公式不自己算」一脉相承——**模型只做模型擅长的选择，其余全部冻结成文件**。 ## 五、写法提炼：七条可照抄的模式 1. **资产前置**：90% 的知识放资源文件，SKILL.md 只当目录页。检验标准：删掉 SKILL.md 正文一半，功能掉多少？掉的越少，前置越成功。 2. **菜单式检索**：用目录结构当选择器，运行时按需读一份，别把全家桶内联进主文件。 3. **同义词铺满 description**：把你能想到的用户表达全部列进去，description 是检索语料不是产品简介。 4. **双载体**：规范写两份——自然语言版给理解，代码/数据版给执行。遇到「既要说清道理又要精确落笔」的领域（配色、排版、公文格式）尤其好用。 5. **越权防火墙**：明确声明「只改 X 不改 Y」。换肤件只碰样式，是它敢薄的前提。 6. **组合授权一句话**：允许跨包混搭，一句白话换来组合爆炸的可表达性。 7. **可扩展尾巴**：目录结构本身就是扩展指南，想清楚「用户往哪个文件夹里塞自己的文件」，你的 Skill 就从工具变成了平台。 ## 六、适用与不适用场景 **适合**：手里已有一套写好的 HTML 幻灯片/报告页/数据面板，要在半小时内变体面；同一批页面需要多套风格出给不同受众（同一份内容，corporate 版给老板、neon 版给产品发布会）；想沉淀自己公司的设计规范让模型永久执行——把品牌色板字体做成一个自定义皮包，一劳永逸。 **不适合**：需要精确落地企业 VI 的场合——那是 brand-guidelines 的专职，theme-factory 的皮是通用审美不是你家品牌；原生 PPT 文件（.pptx）——它只作用于 HTML artifact，要动 pptx 请出门右转 pptx 件；追求原创设计突破的场合——它给的是「及格线以上的统一」，不是「眼前一亮的原创」，预算该给 frontend-design。 一句话记忆：**内容已死，只欠包装，找 theme-factory；内容未生，要求惊艳，找 frontend-design。** ## 七、安装与使用 手动安装（最稳，任何环境可用）： ```bash git clone https://github.com/anthropics/skills.git mkdir -p ~/.claude/skills cp -r skills/example-skills/theme-factory ~/.claude/skills/ ls ~/.claude/skills/theme-factory/styles/ # 查看当前版本的主题名单 ``` 或者用社区 CLI 装法（若你已装有 skills CLI）： ```bash npx skills add anthropics/skills/example-skills/theme-factory ``` 装完直接对 Claude 说人话即可：「给我的幻灯片换成 brutalist 风」或「这份数据面板帮我配一套 corporate 主题」。 ## 八、座次排行 单件深拆没有横评榜，给一个「审美件家族座次」作为收尾： - **最快出活**：theme-factory 第一，选中即换，零设计等待； - **最低 token 成本**：theme-factory 第一，菜单式渐进加载，十套皮只付一套的钱； - **结果可复现**：theme-factory 第一，冻结变量跑三次一个样； - **原创上限**：frontend-design 第一，theme-factory 垫底； - **可资产化复用**：theme-factory 第一——它自己就是一份「如何把设计规范做成 Skill」的模板，你抄的不是它的皮，是它发皮的流水线。 theme-factory 教的最后一课是：一个 Skill 的高级形态，不是让模型变得更聪明，而是让模型**少做决定**。它把十个设计决定冻进文件，自己只剩下一个动作——递皮。你写自己的 Skill 时，值得问的最后一个问题正是：我的哪些决定，也能冻结进文件里？ ## 参考来源 1. [anthropics/skills 官方仓库](https://github.com/anthropics/skills) — theme-factory 所在的官方示例 Skill 仓库，本文对象件的原始出处，styles 目录下可看到全部主题包 2. [theme-factory SKILL.md](https://github.com/anthropics/skills/tree/main/example-skills/theme-factory) — 本文逐段拆解的对象文件，建议对照阅读（本环境未实时复核，结构以当前版本为准） 3. [Anthropic 官方文档：Agent Skills 工程说明](https://docs.claude.com/en/docs/agents-and-tools/agent-skills) — 渐进式加载与 description 触发机制的官方设计依据 4. 作者此前对 frontend-design、canvas-design、brand-guidelines、xlsx 等官方件的系列拆解记录 — 本文对比表的参照系来源 > [!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 等场景全覆盖。