把设计系统做成 Claude Code 技能

Claude 不知道你的设计系统，所以它靠猜。每画一张屏幕你就得纠正一次。

它挑一个没人批准过的颜色。它手画一个早就存在的按钮。它写阿拉伯语屏幕的办法，是最后把英语那版镜像过去。系统在你脑子里，也在一个 Figma 文件里，而这两样 Claude 都读不了。

这套套件就是把那个系统写成一个文件夹，Claude 在画图、审查或修改任何东西之前先加载它。放进去，把示例品牌换成你的，猜就停了。

你的设计系统在哪一层？

「把设计系统做成 Claude Code 技能」把设计系统分成六层，从散落的数值到一个智能体能读的系统。大多数团队停在第1、2或3层：

1. 散落的数值。 每张屏幕上手敲一个色值和一个像素数。没有名字，所以没法校验。
2. Figma 文件里的样式。 只在一个地方命名。代码里又把同样的数值手敲一遍。
3. 基元令牌。 有一套刻度，每一档有名字。但没有规则说哪一档该用在哪。
4. 语义角色。 令牌按它干的活命名，带浅色和深色、密度和断点的模式。
5. 契约与规则。 每个组件都有一份写下来的规范，校验器会让违反它的数值直接失败。
6. 一个智能体读得懂的系统。 文件夹就是源头。Claude 先加载它、引用它，提方案而不是自己发明。

这套套件把第四、五、六层直接搭好交给你，覆盖八大基础：颜色、字体、间距、圆角、描边、高度、布局、动效。每一项都跑三层，刻度、基元、再到语义角色。你把基元换成你的品牌，整套系统就跟着走。

Claude 读不到你的设计系统时会出什么问题？

没有「把设计系统做成 Claude Code 技能」，Claude 在每张屏幕上都在猜你的设计系统，随之而来的是六个问题：

• 每一次都要你告诉 Claude 用哪个颜色。
• 同一个按钮在三张屏幕上被重画三遍。
• Figma 文件和代码越漂越远，没人知道哪个是对的。
• “这符合品牌吗”只能凭记忆回答。
• 阿拉伯语就是英语布局，最后翻转一下。
• 三月定下的决定，九月又吵一遍。

用了「把设计系统做成 Claude Code 技能」之后有什么变化？

装上这套工具后，Claude 在画之前会把每个数值对照637个令牌和6份组件契约检查一遍。下面每一条都对应上面列表中的一条：

• Claude 把颜色解析到一个语义令牌路径，或者报告说没有对应的令牌。
• 每个元素都对应 components/ 里的一份契约。没有契约就只能提方案，不能随手画。
• figma-variables.js 把同一份 tokens.json 推进文件里，变成八个变量集合，带各自的模式。
• 一条审查发现要么引用一个令牌路径、一个契约字段或一行规则，要么不算数。
• rtl.md 在每次摆放时都生效，令牌本身带着阿拉伯语字号。
• decisions/ 存着记录，HISTORY.md 一跳就能路由过去。

「把设计系统做成 Claude Code 技能」下载包里有什么？

「把设计系统做成 Claude Code 技能」的下载包是一个文件夹，共79个文件：60个工作文件，外加19份PDF指南，共312页。售价39美元，一次付清，在Gumroad购买。

• SKILL.md · MD · 路由器。每类任务一条加载路径、接入规则，以及四条永不让步的规则。
• tokens.json · JSON · 637 个 W3C DTCG 格式的令牌。刻度、基元和语义角色，带浅色和深色模式、紧凑、默认和宽松三档密度，以及四个断点。
• foundations/ · 33 MD · 八大基础。每一项有自己的规则文件，外加 ACCESSIBILITY.md（WCAG 标准和那一项测试）、DEV_HANDOFF.md（CSS 变量和模式切换）和 KNOWLEDGE_BASE.md（一个文件，可以粘进任何对话或 NotebookLM）。
• components/ · 6 YAML · Button、TextField、CodeField、Badge、Banner、EmptyState，外加校验它们所依据的 schema。令牌、几何、属性、状态、文案规则、无障碍，以及该做和不该做。
• references/ · 8 MD · 设计、审查、修复和组件四套方法。外加 rtl.md、content-system.md、figma-sync.md 和 design-system.md。
• GOVERNANCE.md、HISTORY.md、decisions/ · MD · 生命周期阶梯、三段式晋级门槛、两级 SemVer 策略，以及每个决定一条记录，附模板。
• scripts/ · 3 PY + 1 JS · build_tokens.py 从刻度生成 tokens.json。validate.py 拒收组件上的色值、刻度档位或基元。tokens_to_css.py 输出 CSS 变量。figma-variables.js 通过 Claude Figma 连接器建好那八个 Figma 集合，重跑时按名字更新它们。
• docs/ · 19 PDF · 312 页。套件指南（18 页）、基础指南（19 页）和提示词库（27 页，六个阶段共 17 条提示词），然后是八大基础每一项各一份使用指南（20 页）和一份提示词库（11 页）。

「把设计系统做成 Claude Code 技能」怎么开始？

第一条消息问两件事，两件都答上来之前它什么都不写。你是要把 Claude 接到一个已经存在的设计系统上，还是用这套套件从头开一个。以及在第一次改动之前你想要什么备份，Figma 里一个命名版本，还是仓库里一个分支。

「把设计系统做成 Claude Code 技能」适合谁？

在 Claude Code 中搭配 Figma、Cursor，或任何能读技能的编辑器工作的产品设计师、设计系统负责人和创始人。基础的命名沿用 designsystems.surf 的模板，所以如果那些 Figma 文件是你的，令牌能一一对上。阿拉伯语优先的团队还拿到 RTL 规则和阿拉伯语字体层，那些模板里没有。示例品牌是 Bunn，一个咖啡外送应用，贯穿每一份指南，让你在替换之前先看见一个做完的系统。

授权。 一人使用，项目和客户数量不限。你用它搭出来的设计系统归你。更新推送到同一个下载。