设计师都在找的”体系化”秘诀：一个 Skill 搞定 Design System 三层架构

做过设计系统的同学都懂那种痛——接手一个祖传代码库，颜色散落在几十个文件里，间距全靠”差不多”，换个主题要改到天荒地老。

最近我发现了一个超级能打的 Claude Skill，叫 Design System Patterns，专门解决这个。GitHub 5.7k stars，在 Claude Skills 圈子里口碑极好，安装量也排在前排。

它的核心思路非常清晰——把设计系统拆成三层：

第一层：Primitive Tokens（原始值）
最底层的”原子”，比如颜色灰度 #fafafa 到 #171717、间距 4px 到 32px。直接写死数值，不带任何语义。

第二层：Semantic Tokens（语义化）
这一层开始有含义了——text-primary 引用 gray-900，surface-elevated 引用 gray-50。换主题？改这一层就够了，原子层完全不动。

第三层：Component Tokens（组件专属）
再往上是给具体组件用的——button-bg 引用 interactive-primary，card-border 引用 border-default。改动不会扩散到其他组件。

这种三层架构，你换皮肤、换品牌、换平台（Web / iOS / Android），改动都精确可控，不会改 A 坏 B。

实操体验：5 分钟搭出主题切换

我实际跑了一遍，用 Claude Code 安装这个 Skill 之后，让它帮我建一套双主题（Light / Dark）的按钮组件。

整个过程：定义 Primitive Tokens → 建 Semantic Layer → 写 CSS Custom Properties → React Context 接入主题切换。

Claude 吐出来的代码直接带完整的 token 结构和主题上下文，复制到项目里就能跑。而且它自动处理了 prefers-color-scheme 系统偏好检测，还顺手加了 reduced-motion 模式——这些细节没有特别要求，它自己就带上了。

为什么我推荐这个 Skill

适合谁用：
– 前端工程师要搭组件库
– 设计系统从 0 到 1 的团队
– 需要 Figma Token → 代码自动化的设计师
– 想让 AI 输出更”有体系”而不是一盘散沙

和其他 Skill 比起来，它的优势：
– 架构思路非常成熟（三层 token + 主题基础设施）
– 支持 CSS、iOS、Android 多平台
– 组件模式覆盖了 compound component、polymorphic、variant/size 系统这些高级玩法
– Style Dictionary 集成，可以做 CI/CD 自动同步 Figma → 代码

说实话，很多 Design System Skill 只教你”用什么颜色”，这个 Skill 教的是”怎么组织”，这是本质区别。

安装方式

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

装完在 Claude Code / Cursor / Codex 里直接开干，非常顺。

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

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