📌 tailwind-design-system 是什么？

用 Tailwind CSS 搭一套可复用的设计系统，颜色、间距、组件都规范起来。tailwind-design-system 是技能，让 AI 帮你搭。

它把 Tailwind 从"工具类"升级成"设计系统"——先定设计令牌（颜色、字号、间距），再做组件，最后形成一套统一、可维护的规范。

🧩 核心功能

设计令牌：定义颜色、字号、间距等变量。

组件库：做可复用的组件。

规范统一：保持视觉一致。

主题：支持多主题。

👍 优点

一致：视觉统一。

可维护：改动一处全局生效。

开发快：复用组件。

⚠️ 不足与局限

前期设计投入大。

过度规范会束缚。

需要团队共识。

🙋 适合谁用

前端开发者：搭设计系统。

设计/前端团队：统一视觉。

🛠️ 第一次安装

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

bash
npx skills add wshobson/agents --skill tailwind-design-system

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

✍️ 上手：几个真实例子

场景一：搭令牌

提示词
帮我用 Tailwind 定义一套设计令牌：主色、字号、间距。

场景二：做组件

提示词
帮我基于令牌做一套按钮和卡片组件。

🎯 典型应用场景

设计系统：搭统一视觉。

组件库：做复用组件。

主题：多主题支持。

⚖️ 和类似方案对比

和"直接用 Tailwind 工具类写样式"相比，design-system 的价值是"规范"——颜色、间距、组件都定义好，团队不会写出五花八门的样式；改动也集中，改令牌全局生效。

💡 常见问题 FAQ

问：令牌怎么定？
从设计稿提取，或从品牌色出发。

问：组件要多少？
常用的先做，按需补充。

问：和组件库冲突吗？
可以在 shadcn 等基础上建，不是二选一。

问：多主题怎么做？
用 CSS 变量 + data-theme 切换。

🤖 适合哪些 AI 工具

Claude Code、Cursor、Codex 等支持 Skill 的工具都能装。