让 AI 操作 Figma 有两条路：读设计稿（Framelink MCP 一类）与写设计稿。而东南亚出行巨头 Grab 开源的 TalkToFigma（cursor-talk-to-figma-mcp）走的是后者——让 AI Agent 直接在 Figma 画布里动手：创建矩形、文本、画板，改颜色、圆角、自动布局，批量替换文案、传播组件覆盖。它以"MCP 服务器 + WebSocket 中继 + Figma 插件"三段式架构绕开了 Figma REST API 基本只读的限制，约 7.1k Star、MIT 协议。本文按"概述 → 架构 → 工具面 → 安装 → 对比 → 总结"组织全文。
1、概述
TalkToFigma 定位为 AI Agent（Cursor、Claude Code、Codex）与 Figma 之间的 MCP 集成：Agent 既可读取设计，也能以编程方式修改设计。由 Grab（GrabTaxi Holding，东南亚最大超级应用公司）2025 年 3 月开源，约 7.1k Star、782 Fork、MIT 协议，TypeScript 主体，配套 Figma 社区插件与 Discord 视频教程。
它解决的核心矛盾：Figma 的 REST API 面向数据读取，设计稿的写入操作（改颜色、挪位置、建组件）没有开放 API——而设计师的真实工作流恰恰以"改"为主。TalkToFigma 用插件 + WebSocket 打通写入通道，让"AI 设计自动化"从演示变成可操作的日常。
README 给出两个来自社区的招牌自动化案例：批量文本替换（扫全稿改文案）与实例覆盖传播（把一个组件实例的定制项一键刷到多个目标实例）——官方称后者能"戏剧性地减少重复设计工作"。
2、架构：三段式链路
项目由三个组件构成，理解结构就理解了它为什么能"写"Figma。
Cursor / Claude Code（Agent）
│ MCP 协议（stdio）
▼
MCP 服务器（src/talk_to_figma_mcp/）
│ WebSocket
▼
Figma 插件（src/cursor_mcp_plugin/，跑在 Figma 内部）
│ 插件 API 直接操作画布
▼
Figma 文档
三段分工：MCP 服务器把 Agent 的请求转成工具调用；WebSocket 服务器（src/socket.ts）做中继，沟通 MCP 服务器与 Figma 插件；Figma 插件跑在 Figma 客户端内部，通过插件 API 直接操纵文档——写入能力全部来自插件端，这正是绕开 REST API 只读限制的关键。
工作前置：插件须先执行 join_channel 加入频道与 WebSocket 服务器建立连接，之后所有命令经频道下发。官方最佳实践第一条就是"发命令前先 join 频道"。
3、工具面：七大类五十余个工具
MCP 服务器暴露的工具按功能分七类，覆盖读、建、改、样式、布局、组件与导出。
文档与选区：get_document_info、get_selection、read_my_design（选中节点的详细信息）、get_node_info / get_nodes_info、set_focus、set_selections
标注：get_annotations、set_annotation、set_multiple_annotations、scan_nodes_by_types（扫特定类型节点定位标注目标）
原型与连接：get_reactions（取原型交互流）、set_default_connector、create_connections（基于原型流生成连线）
创建元素：create_rectangle、create_frame、create_section、create_text
修改文本：scan_text_nodes（智能分块扫描大稿）、set_text_content、set_multiple_text_contents（批量更新）
自动布局与样式：set_layout_mode（NONE / HORIZONTAL / VERTICAL + 换行行为）、set_padding、set_axis_align、set_layout_sizing（FIXED / HUG / FILL）、set_item_spacing、set_fill_colour（RGBA）、set_stroke_color、set_corner_radius、set_image_fill（本地路径 / URL / base64，FILL / FIT / CROP / TILE）
组织与组件：move_node、resize_node、delete_node / delete_multiple_nodes、clone_node、rename_node、set_parent、get_styles、get_local_components、create_component_instance、get_instance_overrides、set_instance_overrides（提取覆盖项应用到目标实例）
导出：export_node_as_image（PNG / JPG / SVG / PDF）
值得一提的还有内置 MCP 提示词：服务器自带六个最佳实践提示（design_strategy、read_design_strategy、text_replacement_strategy、annotation_conversion_strategy、swap_overrides_instances、reaction_to_connector_strategy），把"怎么读设计、怎么批量替换、怎么转换标注"的作业方法直接喂给 Agent——工具与用法一起交付。
4、安装与使用
标准路径四步（bun 驱动）：
# 1. 安装 Bun
curl -fsSL https://bun.sh/install | bash
# 2. 一键设置（同时把 MCP 装进 Cursor 当前项目）
bun setup
# 3. 启动 WebSocket 服务器
bun socket
第 4 步：从 Figma 社区页面安装配套插件（cursor-talk-to-figma-mcp-plugin），或本地 manifest 导入。
手动配置 Cursor 的 ~/.cursor/mcp.json：
{
"mcpServers": {
"TalkToFigma": {
"command": "bunx",
"args": ["cursor-talk-to-figma-mcp@latest"]
}
}
}
使用要点：
- Windows + WSL 需把 src/socket.ts 的 hostname 取消注释为 0.0.0.0，经 PowerShell 装 bun
- 日常顺序：启动 WebSocket → 确认 MCP 已配置 → Figma 里运行插件 → 插件 join 频道 → 在 Cursor 里自然语言指挥
- 改前先 get_document_info 与 get_selection 确认状态；容器用 create_frame、基本形状用 create_rectangle；大稿用 chunk 参数分块扫描；能上组件实例就别手搓
5、横向对比
Figma 与 AI 协作的三种深度：
| 方案 | 方向 | 能力 | 局限 |
|---|---|---|---|
| TalkToFigma | 读 + 写 | 全套画布操作、批量自动化、组件覆盖传播 | 三段链路维护成本高，需保持插件运行 |
| Framelink MCP | 只读 | 降噪后的精确设计数据，还原代码准确率高 | 不能改 Figma |
| html.to.design（BuilderIO/figma-html 同门） | 网页转 Figma | 把任意网站转成可编辑 Figma 设计 | 方向相反，不涉及 Agent 写入 |
选型建议：
- 要 Agent 直接改 Figma（批量改稿、自动化设计任务）→ TalkToFigma
- 只要拿设计数据写代码 → Framelink 更轻
- 组合玩法：Framelink 拉数据生成代码，TalkToFigma 回写设计侧批量调整——读写两条链各司其职
6、总结
TalkToFigma 是 Grab 开源的 Figma 双向 MCP 集成（约 7.1k Star、MIT、TypeScript）：以"MCP 服务器 + WebSocket 中继 + Figma 插件"三段式架构绕开 REST API 只读限制，五十余个工具覆盖文档读取、元素创建、文本批量替换、自动布局、样式修改、组件实例覆盖传播与节点导出，配套六个内置最佳实践提示直接教 Agent 作业方法；bun setup 一键初始化，Figma 社区插件即装即用。
它适合两类场景：批量设计自动化（全稿文案替换、组件定制项一键传播到多个实例——官方实测显著减少重复劳动），以及 Agent 驱动的设计生成（对话式在画布上搭建界面原型）。边界方面：三段链路意味着维护成本高于单进程方案，WebSocket 断连需重连频道；操作粒度是"画布级"的元素与属性，复杂交互逻辑与设计意图仍需人来把关；Figma 插件须保持运行，无人值守的长时间任务要注意插件休眠。对于"AI 能不能替我改稿"这个问题，它给出的答案是：能，而且从读设计到写设计，链路已经通了。
