让AI帮你搭设计系统！Design System Patterns 把 Figma Tokens 那套搬进 Claude

做设计系统还在靠”感觉”？这个 Skill 把 Google/Vercel 那套方法论直接写进 AI 了

做设计系统最怕什么？颜色一会儿一个调，字体大小全凭心情，换个主题改到崩溃。说白了就是缺一套可以复用的设计语言——而 Design System Patterns 这个 Skill，就是把 Figma 设计Tokens那套规范流程，直接武装给 AI。

这是 wshobson 出品的 Skill，GitHub 33K+ 星，火爆程度不用多说。它解决的问题非常明确：怎么让 AI 帮你搭建一套可以跨平台、可持续、可维护的设计系统。

核心功能是什么

这个 Skill 围绕三大模块展开：

• Design Tokens：把颜色、字体、间距、阴影这些原始值抽成可复用的变量。先定义原子值（primitive），再抽象成语义变量（semantic），最后落实到具体组件上。三层结构，层层引用，修改一处全局生效。
• Theming Infrastructure：做亮色/暗色主题切换不用再写两套 CSS。它教你用 CSS Custom Properties + React Context 搭建主题系统，支持系统偏好检测（prefers-color-scheme）、主题持久化，甚至考虑到了 Reduced Motion 和高对比度模式。
• Component Architecture：组件怎么设计才能灵活又一致？Skill 里涵盖了复合组件、Polymorphic 组件（as prop）、Variant/Slot 模式，以及 Headless UI 的最佳实践。

支持哪些平台

这不只是 Web 的 Skill。通过 Style Dictionary 配置，它能同时输出 CSS、iOS（Swift）、Android（XML）和 SCSS 的设计 Tokens。Figma 设计 → 代码 Tokens 的同步流程也内置了，做设计系统维护的同学应该懂这有多省事。

适合谁用

• 正在搭建或重构设计系统的前端/全栈工程师
• 希望 AI 帮你生成规范配色、Typography Scale 的 UI/UX 设计师
• 需要做多品牌、多主题支持的产品团队

怎么安装

在 Claude Code 或支持的 AI 编程工具里直接运行：

npx skills add https://github.com/wshobson/agents --skill design-system-patterns

Skill 会引导你按步骤建立：先定义 Tokens → 再搭 Theming 层 → 最后写组件。每一个阶段都有代码示例和最佳实践参照，不用自己摸索。

说在最后

现在 AI 生成代码越来越快，但生成的组件往往缺乏统一的视觉语言——同一个项目里按钮风格差了三个版本，配色随心所欲。Design System Patterns 解决的恰恰是这个”AI 产出标准化”的问题。它不是让 AI 帮你写 UI，而是让 AI 帮你建立和维护那套 UI 背后的一致性规则。

如果你正在做设计系统，或者经常需要 AI 生成可复用、可维护的界面组件，这个 Skill 值得直接装进工具链。

GitHub 仓库地址 →

GitHub: https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/design-system-patterns