📌 theme-factory 是什么？

给界面做主题（浅色、深色、不同配色方案）是前端里的细碎活，变量多、容易漏。theme-factory 是 Anthropic 官方技能，让 AI 按设计稿或描述，批量生成结构清晰、风格统一的 CSS 主题。

它把"做主题"变成一句话的事，产出的是能直接用的设计令牌和样式变量。

🧩 核心功能

生成主题变量：产出颜色、字体、间距等设计令牌。

多套配色：浅色、深色、品牌色一次配齐。

风格统一：整套主题视觉一致。

可落地：CSS 变量可直接接入项目。

👍 优点

快：一套主题几分钟。

规范：变量组织清晰。

可复用：多套配色随意换。

⚠️ 不足与局限

高度定制的动效和组件细节仍需人工。

需理解设计令牌概念。

品牌色要你先定。

🙋 适合谁用

前端开发：给项目搭主题系统。

设计师：把设计稿转成设计令牌。

产品团队：快速换肤、做 A/B 配色。

🛠️ 第一次安装

前提：电脑装了 Node.js（18+），有支持 Skill 的 AI 工具（如 Claude Code）。打开终端执行：

bash
npx skills add anthropics/skills --skill theme-factory

CLI 会自动检测你装的 AI 助手，确认安装位置后即可使用。

✍️ 上手：几个真实例子

场景一：做主题

提示词
根据这个设计稿，生成一套"清新科技风"的 CSS 主题，含浅色和深色。

场景二：多配色

提示词
帮我给这个主题再配一套高对比度的深色版本。

🎯 典型应用场景

主题系统：搭主题变量。

多配色：浅色深色。

换肤：快速换肤。

设计令牌：设计稿转变量。

⚖️ 和类似方案对比

和"手写一堆 CSS 变量"相比，theme-factory 的价值是"批量 + 规范"——浅色、深色、品牌色一次生成，变量命名和层级都清晰，改一处全局生效。前端不用再为配色和主题头疼。

💡 常见问题 FAQ

问：设计令牌是什么？
颜色、字号、间距、圆角这些基础变量。

问：能接入现有项目吗？
能，CSS 变量直接套。

问：多主题怎么切换？
用 data-theme 或 class 切换。

问：要懂设计吗？
懂基础更好，不懂 AI 会帮你定。

📌 总结

总的来说，theme-factory 的价值在于把原本繁琐、重复、容易出错的工作，变成几句对话就能搞定。如果你正好是它的目标用户，装一个试试——成本很低，上手只要几分钟，带来的效率提升却实实在在。如果需求比较轻量，也可以先让 AI 演示一遍再决定是否长期使用。

🤖 适合哪些 AI 工具

Anthropic 官方 Skill，Claude Code、Claude 桌面端原生可用，也能装到 Cursor、Codex 等。