做设计总是一团乱？这套 Token 架构让团队少吵50%的架

做设计的时候，最怕什么？

颜色乱飞、字体不统一、间距全靠感觉——好不容易搭了一套风格，过两天换个设计师接手，全毁了。

这不是团队不认真，是设计系统没做到位。

今天推荐一个刚发现的设计 skill——design-system，来自 GitHub 仓库 hwchiu/mochia。这个仓库整套有 4 个设计类 skill，但最核心的就是 design-system，专门解决”如何用一套结构化的方法管理设计”。

它的核心思路：三明治式 Token 架构

这个 skill 没有搞花哨的概念，直接给出最实用的三层 Token 体系：

Primitive Layer（基础层） → 最原始的值，比如具体的 hex 色值 #FF5733、具体的 16px
Semantic Layer（语义层） → 用名字定义含义，比如 --color-primary、--spacing-md
Component Layer（组件层） → 直接对应 UI 组件，比如 --button-bg、--card-padding

这样做的好处是什么？换主题的时候不用改组件层，只动中间那层就行。整个团队基于同一套语义说话，不会有”这个蓝是哪个蓝”的争论。

具体能做什么

技能文档里写得很清楚，适合这几类场景：

• 建立设计系统：输出 Token 文档，团队成员照着调就行
• 设计稿交接：直接输出 CSS variables，工程师不用猜
• 制作品牌幻灯片：生成带设计系统支撑的演示稿，而不是随便找个模板套

技能直接集成了 spacing scale（间距刻度）和 typography scale（字体层级）的参考值，不用每次都从零搭。

怎么安装使用

# 直接在 Claude Code 里安装
npx skills add https://github.com/hwchiu/mochia --skill design-system

# 或者指定 agent
npx skills add https://github.com/hwchiu/mochia --skill design-system -a claude-code

安装完之后，只要跟 AI 说”帮我用 design-system 的规范做一个登录页面”，它会自动加载 Token 层级、spacing 规范，直接出符合系统设计的代码。

适合谁用

老实说，这套 skill 不适合纯设计师小白——你需要对设计系统有基本概念才能用好它。

最适合：
– 前端开发工程师，要维护团队 design tokens
– 设计 lead，要给工程师输出一套可落地的设计规范
– AI coding 工具用户，想让 AI 生成的东西别那么”AI味儿”

它不教你怎么配色、怎么选字体——那是另外几个 skill 的职责（mochia 仓库里 design、ui-styling 各自负责一块）。design-system 只专注做一件事：把设计决策结构化，让它可复用、可传递。

团队里设计师和工程师用同一套 token 说话，协作效率能提升不少。算是设计系统建设的”基础设施”skill。

GitHub 仓库：https://github.com/hwchiu/mochia

GitHub: https://github.com/hwchiu/mochia