用 AI 一口气搭出整套设计系统?现在还做不到。但设计系统里最枯燥的那些活儿——Token 审计、文档撰写、一致性校验——交给 AI 能快上 50 倍。UI Collective 的 Kirk 分享了他实际在用的工作流,关键在于 Figma MCP + Cursor 的组合。
这是什么?
先坦白说一下 AI 和设计系统目前的状况,AI 还做不到的事其实不少:
- 从零搭建变量库
"帮我给一家 SaaS 医疗科技初创公司做一套变量库"——做不到。这需要大量输入参数和反复调整。 - 用设计系统生成 Figma 设计稿
Figma Make 也能试,但精度不够。会出现 padding 138.07px、文本样式未应用这类问题。 - 生成组件
AI 能画出设计,但会用 Group 代替 Auto Layout frame,做出来的东西实战里根本没法用。
那么 AI 擅长的事是什么?审计(audit)和文档化(documentation)。那些让人盯到眼花的重复验证工作,AI 瞬间搞定。
重点:Figma MCP 是什么?
通过 Model Context Protocol(MCP)让 Cursor AI 能直接读取 Figma 文件的一种连接方式。 AI 可以实时掌握设计文件里的颜色、padding、字体、组件结构。配置也简单,只要在 Cursor 设置 → MCP 里添加 Figma 服务器即可。
有什么不同?
以前要确认设计系统的 Token 有没有正确应用,设计师得一个个点开组件挨个验证变量。一个仪表盘上有几百个元素?简直是噩梦。
| 手动审计 | AI 自动审计(Figma MCP + Cursor) | |
|---|---|---|
| 耗时 | 每个组件数分钟 | 整页数秒完成 |
| 准确度 | 靠人眼(会出错) | 基于规则自动检测 |
| 一致性 | 审计人不同结果不同 | 同一套规则,结果始终一致 |
| 可扩展性 | 页面越多耗时越久 | 几乎不受页面数量影响 |
Kirk 的实战工作流主要分两大自动化:
自动化 1:设计 Token 审计
把 Figma 里整理好的 Token 表(Token 名称、浅色/深色模式值、说明)以 Figma 链接形式传给 Cursor,AI 会自动生成 Cursor Rule。 这个 Rule 就是类似 "surface-default 只能用于背景,text-primary 只能用于文本" 这样的变量使用规则。
接着做一个可复用的 Command。调用 @check-variables 并附上 Figma 链接,AI 就会分析该设计的所有元素,找出用错的变量。 比如 "文本上应用了 border 变量 → 应该用 text-primary-on-color"、"border 用了硬编码 hex 值 → 请改用 border-default" 这样给出具体的修改建议。
自动化 2:组件文档生成
传入 Figma 组件链接,AI 会分析组件并自动生成文档,包括名称、用途、使用场景、不适用场景、无障碍指引、属性、变体。 生成后可以直接发到 Zero Height 或 Supernova 这类文档站点。
注意
AI 生成的文档只是起点,不是成品。 一定要复核并补充上下文。关键是在 Rule 里写明:当 AI 推测组件用途时必须请求确认。
上手指南
- 安装 Cursor + 连接 Figma MCP
去 cursor.com 下载,在 Figma MCP 目录里点 "Add MCP to Cursor",再把 Figma 个人访问 Token 设成环境变量。 - 准备 Token 表
Figma 里要有一张整理好 Token 名称、浅色/深色模式值、说明的表格。没有的话现在就做——这是 AI 自动化的基础输入。 - 生成 Cursor Rule
把 Token 表的 Figma 链接发给 Cursor,说 "基于这个帮我生成变量使用规则"。AI 会整理每个 Token 的用途和上下文,生成 Rule 文件。 - 创建可复用 Command
在 Cursor 设置 → Rules and Commands 里创建一个 "check-variables" Command,配置它接收 Figma 链接作为输入,并写好分步审计指令。 - 运行 + 迭代
用 Command 调用任意设计或组件的 Figma 链接,审计结果立刻出来。文档化也一样,做一个对应的 Command 即可复用。
