设计系统做一半就散架？这个 Skill 帮你搭一套能活下来的体系

做设计的朋友都有同感：产品一多，颜色、字号、间距、圆角就像开盲盒，每个页面都不一样。最后看起来像“同一个妈生的两兄弟”。

海外最近一个很火的 Skill 刚好解决这个问题：design-system-patterns。

它来自 wshobson/agents 这个仓库，Stars 已经超过 3.8 万，是目前设计系统方向最受关注的 Skill 之一。它不提供 UI 模板，而是帮你从“设计语言”层面建立一套可持续维护的系统——适合正在做组件库、主题切换、多品牌复用，或者觉得设计体系越来越难管的团队。

它到底能做什么？

1. 设计 Token 分层
把颜色、字体、间距、阴影分成三层：Primitive → Semantic → Component。不只是“存一个色值”，而是让每个值都有明确用途，比如 text-primary 而不是“深灰色”。

2. 主题体系架构
内置 light/dark 主题切换、系统自动适配 prefers-color-scheme、多品牌主题切换、高对比度/减少动画等无障碍模式。也就是说，你一次搭好，后续改主题只是换 token 值。

3. 组件架构规范
给出 compound components、polymorphic components、variant/size 系统等真实可用的组件组织方式。读它的时候会感觉“哦，原来设计系统不是纯设计问题，是架构问题”。

4. Token Pipeline
从 Figma 设计稿同步到代码的完整方案，支持 Style Dictionary、CI/CD 自动更新、多平台输出（Web/iOS/Android），这在设计师和开发者的协作里非常实用。

谁适合用？

• 正在搭建组件库的前端团队
• 想统一多产品视觉语言的设计/研发
• 觉得现有设计系统“越来越散”的维护者
• 在做 AIGC/自动化设计工具，需要标准化视觉体系的工程师

说实话，设计系统最大的敌人不是“做不到”，而是“做到一半散架了”。这个 Skill 的价值就是给你一套被验证过的组织方式，避免团队在重复决策里消耗。

如果你是做 AIGC 设计、创意工具、或者自动化出图的，这套“token 分层 + 主题架构 + 组件规范”的组合打法，值得周末看看。

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

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