做设计系统还在「拍脑袋」？这个 Skill 把 token 哲学搬进了 AI 工作流

做设计系统还在「拍脑袋」？这个 Skill 把 token 哲学搬进了 AI 工作流

做设计系统的团队，最常遇到一个困境：设计师给了一套色值，开发说”我没问题”，然后线上跑出来就是跟设计稿差了三个色阶。

问题不在人，在交接断层——没有一套中间语言能把「这个蓝是哪个蓝」说清楚。

Design System Patterns 就是来解决这个的。它不是帮你画图，是帮你建立一套从值到语义的完整设计语言，让 AI 也能读懂「text-primary 是什么，surface-elevated 什么时候用」。

四层能力，完整覆盖

1. Design Tokens：三层 token 架构——Primitive（原始色值）、Semantic（语义映射）、Component（组件级使用）。不只是给颜色命名，是建立一套可以跨平台复用的词汇表。

2. Theming Infrastructure：CSS 自定义属性架构 + React Theme Context，帮你把 light/dark 切换做成基础设施而不是硬编码。

3. Component Architecture：复合组件模式、多态组件、Slot 组合……这套东西在大厂设计系统文档里通常要花三天培训，Skill 直接给你决策树。

4. Token Pipeline：Figma 同步到 Style Dictionary，再到 CI/CD——设计师动一个色值，代码自动更新，不需要人肉通知。

为什么值得装

大部分 AI 生成界面的问题不是「画得丑」，是「没有一致性」。今天蓝色按钮，明天紫色按钮，后天渐变背景。

这个 Skill 教 AI 建立的是一种结构性约束——在动手画第一个像素之前，先把规则说清楚。

对于正在做或者准备做设计系统的团队，这是一个可以从零开始搭架构的脚手架。对于 AI 开发者，它是一套如何把设计意图转译成可执行代码的参考范本。

安装一行命令：
npx skills add https://github.com/wshobson/agents --skill design-system-patterns

适合人群：前端开发、设计系统工程师、产品设计师，以及任何想让 AI 输出保持「看起来像一套系统」而不是「随机生成的 UI」的人。

GitHub 源码仓库（⭐ 33,871，20 个独立 Skill 之一）

GitHub: https://github.com/wshobson/agents