cdn.sanity.io

4行代码变成14个Figma框架 — AI代理现在可以直接写入画布

Figma MCP, Write to Canvas, Skills, 代理设计工作流, use_figma设计

开发者用代码实现了14个页面，但Figma里只有4个。代理找到了其余10个，直接放到了Figma画布上。用的是设计系统组件。

3秒摘要

代码实现完毕 → 代理探索状态 → 用设计系统组件生成框架 → 设计师在画布上审查修改 → Dev Mode交付

到底新增了什么？

2026年5月，Figma正式为MCP服务器添加了代理写入权限（Write to Canvas）。在此之前，Figma MCP只能走"设计→代码"这一个方向。现在方向反转了——代理可以直接在Figma画布上生成和修改框架。

核心工具有两个。use_figma让代理能用设计系统的组件、变量、令牌在画布上生成和修改框架；generate_figma_design则将实时应用的HTML转为可编辑的Figma图层。

9个

官方Skills上线

4→14

代理发现的实现状态

10+

支持的MCP客户端

支持的客户端也大幅增加了。Claude Code、Cursor、Codex、Warp、Augment、Factory、Firebender、VS Code Copilot——几乎所有支持MCP的AI编程工具都可以使用。

不过这次更新真正的亮点是Skills系统。Skills是将团队约定打包为Markdown文件的可复用指令集。把"始终使用设计令牌"、"只从这个组件库获取"这样的规则写一次，代理就会每次都遵循这些规则。

旧版Figma MCP（只读）和新的Write to Canvas看起来相似，但完全是两回事。之前是代理从Figma获取设计数据，用来更好地写代码。现在代理直接在Figma里创建东西——还是用你的设计系统组件。

Bitovi的Ali Shouman实际测试后发现，代理在创建页面时会先创建需要的基础组件，再复用它们来组装页面。不是简单地截图上传，而是真正理解了Figma的组件层级结构。

但局限也很明显。没有明确指示的话，代理不会自动识别连接的设计系统，而是倾向于硬编码而非使用变量。这就是为什么需要Skills——没有Skills会得到不确定的结果。

核心要点

设计系统越完善，Write to Canvas效果越好。命名规范、组件结构、令牌体系越清晰，代理的输出就越整洁。

连接MCP服务器
远程服务器（推荐）：claude mcp add --transport http figma https://mcp.figma.com/mcp
需要Figma Professional Plan + Full席位。Dev席位仅限只读。
注册Skills文件
从Figma Community下载9个官方Skills，有/figma-use、/sync-figma-token等。根据团队约定修改后，注册到MCP客户端设置中。
通过文件URL提供上下文
在提示词中直接粘贴Figma文件URL：「在这个文件中创建按钮组件集：figma.com/file/...」
从小事开始测试
先从一个组件而不是复杂页面开始。有20KB输出限制，大型任务需要分步进行。
先在草稿中实验
先在草稿文件而不是生产文件中尝试。代理可能不按预期运行。这是Beta质量，必须手动审查。