市面上的 Figma MCP 都是「读设计稿 → 生成代码」。我做了一个反方向的：「AI → 直接在 Figma 画布上画设计」。
支持两种接入方式：
- MCP Server — 兼容所有 MCP 客户端（Claude Desktop、Cursor、Continue、Windsurf 等）
- OpenClaw 扩展 — 直接作为 OpenClaw 智能体网关的插件运行，开箱即用
先看效果
一句话告诉 AI「帮我设计一个用户管理后台」，它会：
- 在 Figma 里创建 Frame
- 搜索 Ant Design 组件库里的 Table、Button、Input
- 把组件实例化到画布上
- 配置变体属性（行数、列数、按钮类型）
- 设置 Auto Layout、间距、颜色
全程不需要你碰 Figma。
GitHub：github.com/a1245582339… | npm：npx figma-designer-mcp
为什么要做这个
起因：不会用 Figma 的人，才最需要 Figma
你有没有遇到过这样的场景：
- 工程师脑子里清楚知道页面应该长什么样，但打开 Figma 完全不知道怎么操作 —— Auto Layout 是什么？组件变体怎么配？
- 产品经理想快速画个原型给团队对齐，但手画的线框图太粗糙，等设计师排期又太慢
- 独立开发者一个人干全栈，设计环节成了最大瓶颈，因为自己根本不是设计师
这些人不是没有想法，他们缺的是把想法变成设计稿的执行能力。
2025 年以来，AI 写代码已经非常好了。但你可能会问：既然 v0 / bolt.new 能直接生成代码级 UI，为什么还需要设计稿？
为什么不能跳过设计稿直接写代码？
v0、bolt.new 这类工具直接生成代码，看起来更快。但实际踩过坑就知道，跳过设计稿的代价比想象中大：
- 非技术人员无法评审 —— PM、业务方、老板想看 UI？Figma 链接人人能看；React 代码或者需要部署的预览地址？聊不起来。
- 多页面一致性失控 —— 十几个页面独立生代码，导航栏长得不一样、间距不统一、颜色微妙不同。设计稿里所有页面平铺在画布上，一眼就能发现问题。
- 迭代成本差 10 倍 ——「Table 从 5 列改 8 列，按钮换个颜色」在 Figma 里拖一下就完了，在代码里要找组件、理解 props、确认不影响其他页面。
设计稿不是多余的一步，而是让团队对齐、低成本迭代的基础。
那问题来了 —— 谁来画？
专业设计师来画当然最好，但现实是：
- 很多团队没有专职设计师
- 设计师排期紧张，来不及覆盖所有需求
- 早期原型和内部工具不值得投入设计资源
我做 figma-designer-mcp 的初衷就是：让不会 Figma 的人，用自然语言告诉 AI，AI 帮你在 Figma 里画出来。
你不需要知道 Auto Layout 怎么配，不需要知道组件变体怎么切换，甚至不需要知道 Figma 的任何操作 —— 只要说清楚你想要什么，AI 来执行。
Figma REST API 的局限
Figma 的 REST API 只能读，不能写。这意味着你无法通过 API 在 Figma 画布上创建任何东西。
但 Figma Plugin API 可以。
于是我设计了一个 WebSocket 桥接架构：
AI 客户端（Claude / Cursor / ...）
│ MCP stdio
▼
figma-designer-mcp（Node.js 进程）
├── REST API → Figma API（读取）
└── WebSocket Server（端口 3055）
▼
Figma 插件（浏览器 / 桌面 App 内运行）
└── 调用 Plugin API 执行写入操作
MCP Server 和 Figma 之间通过 WebSocket 实时通信。当 AI 调用 figma_create_frame 时：
- MCP Server 发送
{ action: "create_frame", args: { name: "登录页", width: 1440 } }到 WebSocket - Figma 插件接收到消息，调用
figma.createFrame()创建节点 - 返回
{ nodeId: "123:456", type: "FRAME" }给 MCP Server - MCP Server 将结果返回给 AI
每个请求 30 秒超时，断线自动重连。
从 6 个读取工具到 50+ 全能工具
第一版只有 6 个 REST API 读取工具。加上 WebSocket 桥接后，写入能力爆发式增长：
- 创建：Frame、矩形、椭圆、线条、多边形、星形、文本、图片、页面
- 查找与选择：按类型/名称搜索节点、跨页面搜索、选择/获取选中
- 节点操作：重命名、删除、复制、缩放、旋转、移动、编组、层级调整
- 样式：填充、描边、圆角、透明度、混合模式、阴影/模糊
- 布局：Auto Layout 全参数配置、约束、布局网格
- 文本：内容、样式、颜色
- 组件：搜索组件库、实例化、变体属性读写、布尔运算
- 导出：PNG / JPG / SVG 导出
一共 50+ 工具，覆盖 Figma 设计的完整工作流。
和市面上产品的对比
vs Figma 官方 MCP
| figma-designer-mcp | Figma 官方 MCP | |
|---|---|---|
| 方向 | AI → 设计（创建和编辑） | 设计 → 代码（读取和生成） |
| 写入工具 | 44+ 写入工具 | 几乎没有 |
| 组件操作 | 搜索、实例化、配置变体 | 只读 |
| Auto Layout | 完整配置 | 无 |
| 部署 | 自托管、开源 MIT | Figma 托管 / 桌面应用 |
| 价格 | 免费 | 需要付费方案 |
本质区别： 官方 MCP 是「设计师已经画好了，AI 帮你转成代码」。我这个是「AI 来画，你来审」。两者互补。
vs v0 / bolt.new / Screenshot-to-Code
这类工具的思路是「跳过设计，直接出代码」。看起来高效，但上面分析过了，省掉设计稿会带来一系列问题：非技术人员无法评审、多页面不一致、迭代成本高、设计规范无从沉淀。
更关键的是 —— 这些工具生成的是一次性代码。如果你想修改布局，要么重新 prompt，要么手改代码。而 figma-designer-mcp 生成的是 Figma 原生设计稿，后续任何人都可以直接在 Figma 里拖拽修改。
| figma-designer-mcp | v0 / bolt.new | |
|---|---|---|
| 产出物 | Figma 设计稿 | React / HTML 代码 |
| 谁能评审 | PM、设计师、开发、业务方都能看 | 需要跑起来才能看，非技术人员不友好 |
| 修改成本 | Figma 里拖拽即改 | 改代码、理解依赖、重新渲染 |
| 多页面一致性 | 画布上平铺对比，复用组件库 | 每个页面独立生成，风格难统一 |
| 设计系统 | 天然基于组件库（Ant Design 等） | 临时样式，无规范沉淀 |
| 和设计团队对接 | 设计师可以直接接手迭代 | 设计师拿到代码无法继续工作 |
vs Pencil / OpenPencil
Pencil 是一个 AI 原生设计工具，也提供 MCP 接入（29 个工具），支持 AI 创建和修改设计。但它和 figma-designer-mcp 走的是完全不同的路线：
| figma-designer-mcp | Pencil / OpenPencil | |
|---|---|---|
| 设计平台 | 直接在 Figma 里操作 | 自己的编辑器（需导入 .fig 文件） |
| 团队协作 | 设计稿就在团队的 Figma 文件中，无缝协作 | 需要在 Pencil 和 Figma 之间导入导出 |
| 组件库 | 直接使用 Figma 社区的组件库（Ant Design 等） | 自有组件体系，需要额外配置 |
| 设计→代码 | 不涉及（专注 AI→设计） | 内置双向 Design↔Code 同步 |
| MCP 工具数 | 50+ | 29 |
| 运行方式 | WebSocket 桥接 Figma 插件 | 本地无头渲染 |
核心区别： Pencil 是「重新做一个设计工具，内置 AI」。figma-designer-mcp 是「不换工具，让 AI 在你已经用的 Figma 里画」。
如果你的团队已经在用 Figma，figma-designer-mcp 零迁移成本 —— AI 产出的设计稿直接在 Figma 里，设计师照常评审、标注、交付，不需要改变任何现有工作流。Pencil 更适合想要一体化 设计+代码 工作流且不介意切换工具的场景。
vs 其他开源 Figma MCP
GitHub 上有不少 Figma MCP 项目，但绝大多数只做了读取：
figma-mcp—— 读取节点、获取样式cursor-talk-to-figma-mcp—— 读取 + 有限的写入figma-context-mcp—— 读取设计上下文
figma-designer-mcp 是目前 写入能力最完整的：50+ 工具，覆盖从创建图形到组件变体配置的全链路。
核心玩法：让 AI 用组件库设计
这个工具的真正威力不是「AI 画矩形」，而是 AI 使用设计系统组件来设计。
打开一个 Ant Design 的 Figma 社区文件，AI 可以：
1. figma_search_components({ query: "Button" })
→ 找到 Button 组件，变体有 Primary/Default/Dashed/Text/Link
2. figma_create_instance({ componentId: "12:345", parentId: "card_id" })
→ 直接放一个标准 Button 到画布上
3. figma_set_component_properties({ nodeId: "btn_id", properties: { "Type": "Primary", "Size": "Large" } })
→ 配置为大号主按钮
一个完整的用户管理页面 —— 包含 Table、搜索框、按钮、面包屑 —— 通常只需要 30-50 次工具调用。
详细的优化策略参见最佳实践文档。
按需加载工具，省 Token
50+ 工具的 schema 如果全量发送给 LLM，大约消耗 4000 tokens。所以服务器默认采用 按需加载 —— 初始只加载 ~9 个核心工具 + 一个 figma_load_toolset 元工具。AI 根据任务按需加载对应类别：
用户："帮我设计一个登录页"
AI：figma_load_toolset("create,style,text,layout") → 加载 24 个相关工具
AI：开始设计...
典型场景节省 60-80% 的工具定义 token。
快速开始
1. 启动 MCP Server
FIGMA_TOKEN=figd_xxxxxxxxxxxx npx figma-designer-mcp
在 Claude Desktop 或 Cursor 的 MCP 配置中加上即可。
2. 安装 Figma 插件（写入功能需要）
cd $(npm root -g)/figma-designer-mcp
npm run build:plugin
在 Figma 中导入 figma-plugin/manifest.json，运行插件并连接。
3. 开始设计
打开一个 Ant Design 的 Figma 文件副本，告诉 AI：
"在当前文件中设计一个用户管理后台，包含侧边栏导航、顶部搜索栏、数据表格。使用文件中已有的 AntD 组件。"
然后看 AI 在你的 Figma 画布上一步步画出来。
写在最后
这个项目起源于一个很朴素的观察：团队里最需要设计稿的人，往往是最不会用 Figma 的人。
工程师需要原型来理解需求，产品经理需要设计稿来对齐团队，独立开发者需要 UI 来让产品像样 —— 但他们都卡在了「不会用设计工具」这一步。
而「直接跳过设计出代码」并不是答案 —— 你省掉的不只是一张图，而是整个团队对齐、评审、迭代的基础。
figma-designer-mcp 想解决的就是这个问题：你不需要学 Figma，只要说清楚你想要什么，AI 帮你在 Figma 里画出来。 产出的是正经的 Figma 设计稿，设计师能接手、PM 能评审、开发能对照实现。
从第一个只读 REST API 封装，到搞定 Figma Plugin API 的 WebSocket 桥接，再到 50+ 工具、组件库集成、按需加载 —— 一路走来最大的感受是：把 AI 对接到正确的工具链上，它的能力会超出预期。
AI 画出来的设计稿不会比资深设计师好，但它可以在几分钟内完成一个初版。对于不会 Figma 的人来说，从 0 到 0.7 这一步，就是最大的价值。
GitHub： github.com/a1245582339…
npm： npm install -g figma-designer-mcp
如果觉得有用，欢迎 Star ⭐ 和 PR。有问题随时开 Issue。
