不会 Figma 也能出设计稿：我开源了一个让 AI 直接在 Figma 里画 UI 的工具

支持两种接入方式：

• MCP Server — 兼容所有 MCP 客户端（Claude Desktop、Cursor、Continue、Windsurf 等）
• OpenClaw 扩展 — 直接作为 OpenClaw 智能体网关的插件运行，开箱即用

先看效果

一句话告诉 AI「帮我设计一个用户管理后台」，它会：

1. 在 Figma 里创建 Frame
2. 搜索 Ant Design 组件库里的 Table、Button、Input
3. 把组件实例化到画布上
4. 配置变体属性（行数、列数、按钮类型）
5. 设置 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 时：

1. MCP Server 发送 { action: "create_frame", args: { name: "登录页", width: 1440 } } 到 WebSocket
2. Figma 插件接收到消息，调用 figma.createFrame() 创建节点
3. 返回 { nodeId: "123:456", type: "FRAME" } 给 MCP Server
4. MCP Server 将结果返回给 AI

每个请求 30 秒超时，断线自动重连。

从 6 个读取工具到 50+ 全能工具

第一版只有 6 个 REST API 读取工具。加上 WebSocket 桥接后，写入能力爆发式增长：

• 创建：Frame、矩形、椭圆、线条、多边形、星形、文本、图片、页面
• 查找与选择：按类型/名称搜索节点、跨页面搜索、选择/获取选中
• 节点操作：重命名、删除、复制、缩放、旋转、移动、编组、层级调整
• 样式：填充、描边、圆角、透明度、混合模式、阴影/模糊
• 布局：Auto Layout 全参数配置、约束、布局网格
• 文本：内容、样式、颜色
• 组件：搜索组件库、实例化、变体属性读写、布尔运算
• 导出：PNG / JPG / SVG 导出

一共 50+ 工具，覆盖 Figma 设计的完整工作流。

和市面上产品的对比

vs Figma 官方 MCP

本质区别： 官方 MCP 是「设计师已经画好了，AI 帮你转成代码」。我这个是「AI 来画，你来审」。两者互补。

vs v0 / bolt.new / Screenshot-to-Code

这类工具的思路是「跳过设计，直接出代码」。看起来高效，但上面分析过了，省掉设计稿会带来一系列问题：非技术人员无法评审、多页面不一致、迭代成本高、设计规范无从沉淀。

更关键的是 —— 这些工具生成的是一次性代码。如果你想修改布局，要么重新 prompt，要么手改代码。而 figma-designer-mcp 生成的是 Figma 原生设计稿，后续任何人都可以直接在 Figma 里拖拽修改。

vs Pencil / OpenPencil

Pencil 是一个 AI 原生设计工具，也提供 MCP 接入（29 个工具），支持 AI 创建和修改设计。但它和 figma-designer-mcp 走的是完全不同的路线：

核心区别： 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：

然后看 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。