没有设计师,AI 生成的界面看着是挺好看,但和我们的设计系统完全对不上,对吧?Figma 正面解决了这个问题。
这是什么?
2026 年 3 月 24 日,Figma 以公测(Open Beta)形式发布了名为 use_figma 的全新 MCP 工具。顾名思义,它让 AI 代理可以直接对 Figma 画布进行写入(write)操作。
其实 Figma MCP 服务器之前就有,但主要偏向"读取"。要么是拉取设计上下文来生成代码,要么是通过 generate_figma_design 把代码转成 Figma 图层。这次新增的 use_figma 完全是另一个量级。AI 代理可以参照你的设计系统,直接在画布上生成和修改组件。
目前已经支持 Claude Code、Codex、Cursor、Copilot CLI、VS Code、Augment、Factory、Firebender、Warp 等主流 MCP 客户端。OpenAI Codex 团队的 Ed Bayes 表示:"Codex 现在可以找到并利用 Figma 里所有重要的设计上下文。"
这个工具真正的核心,是一同发布的 Skills。Skills 是用 Markdown 文件写的代理指南,它定义了代理在 Figma 画布上应该怎么工作——用哪些组件、应用哪些变量、按什么顺序推进。不需要开发插件,也不需要写代码,光靠 Markdown 就能搞定。
Skills = 设计系统的机器翻译
一直以来,设计系统都是给人看的文档。Skills 把它翻译成了 AI 能遵守的规则。团队规范不再沉睡在文档里,每次代理执行时都会自动应用。
Anthropic 的 Claude Code 产品负责人 Cat Wu 解释道:"Skills 教会 Claude Code 如何直接在设计画布上工作,让它能以忠实于团队意图和判断的方式来构建。"
发布时同步开放了 9 个社区 Skills,包含 Uber 的无障碍规范自动生成、Edenspiekermann 的设计系统对接、Firebender 的 Token 同步等实战案例。
有什么不同?
核心变化一句话总结:AI 生成的设计不再是"没有上下文的线框图"了。你看,以前让 AI 画界面时,它根本不知道你的字体、组件库和间距系统,就只能吐出一个看起来"像模像样"的界面。
| 以往的 AI 设计生成 | use_figma + Skills | |
|---|---|---|
| 设计系统识别 | 无 — 生成通用组件 | 使用团队库里的真实组件和变量 |
| 产出质量 | 截图/图片级别,不可编辑 | 原生 Figma 帧 — 包含自动布局和变量绑定 |
| 团队规范落地 | 每次在提示词里反复说明 | 在 Skills 中定义一次 → 每次执行自动应用 |
| 自我修正能力 | 无 | 截图对照结果后自动修正 |
| 安全性 | 数据发送到外部 API | 支持本地运行方案(企业可用) |
特别值得关注的是 self-healing loop(自愈循环)。代理生成设计之后会截图,把和预期不符的地方自动修正。关键在于它不是在修像素,而是在调整真实的组件属性和变量,因此系统结构得以保留。
Uber 已经基于 Figma MCP 建起了一套系统,把数百个组件的规范文档从几周压缩到几分钟。屏幕阅读器规范(VoiceOver、TalkBack、ARIA)三个平台的内容,用一个提示词就能在 2 分钟内生成。
Muzli 的分析一针见血:"设计系统的质量直接决定代理产出的质量。乱的系统做出乱的结果,整齐的系统才能做出真正能用的东西。"
上手指南
- 连接 Figma MCP 服务器
在 MCP 客户端(Claude Code、Cursor、VS Code 等)里添加远程服务器 URLhttps://mcp.figma.com/mcp。Claude Code 的话,claude mcp add --transport http figma https://mcp.figma.com/mcp一行就行。 - 安装基础 Skill
装上 Figma 的基础 Skill/figma-use。这个 Skill 会告诉代理 Figma 的结构和核心原则。Claude Code 用claude plugin install figma@claude-plugins-official安装插件即可,Skill 已经打包在内。 - 整理设计系统
确保代理将要引用的组件、变量、自动布局整理到位。图层命名要语义化(别再用Group 5,换成CardContainer),并用 Code Connect 把代码组件关联起来,能获得最好的效果。 - 编写自定义 Skills
把团队特有的规范写进 Markdown 文件。在.claude/skills/或各客户端的 Skill 目录里创建SKILL.md即可。把"先搜哪个库、变量用什么命名、用哪些组件"这类规则写进去就行。 - 发起提示并验证
尝试发出这样的指令:"用这个 Figma 文件里已有的组件做一个登录页面。"看看结果,再持续打磨 Skills。公测期免费,放开手脚去实验吧。
公测期限时免费
use_figma 未来会转为按用量计费的付费 API。公测期免费,正好趁现在试用、建立工作流。
