1. Figwright 到底是什么为什么前端团队开始盯上它如果你每天的工作流是「设计师在 Figma 画完我照着写组件」那你大概率经历过这几件事像素眼对着间距调半小时、Dev Mode 席位要单独付费、第三方插件生成的代码全是div1、div2这种没法维护的类名。Figwright 这个免费 MCP 项目就是冲着这几个痛点来的。一句话概括Figwright 把 MCP Server 和 Figma 插件用本地 WebSocket 连起来让 Cursor、Claude Code、Codex 这类 MCP 客户端既能读 Figma 选区生成框架感知代码也能反过来在画布上建 Frame、写文字、改 Auto Layout、绑定变量。它不需要 Figma Dev Mode 付费席位免费版账号就能跑所有数据走127.0.0.1不经过 Figma 云。适合谁天天把设计稿翻成 React/Vue 组件的前端、不想为 Dev Mode 掏钱的小团队、已经用上 Cursor 或 Claude Code 的 MCP 工作流玩家。不适合谁不用 Figma 的团队、完全不允许 AI 触碰设计文件的保守流程。这篇我按「配 TaoToken 拿模型能力 → 写 config.toml 骨架 → Cursor 一句话改稿 → 验证同步」的顺序走一遍每一步都给可复制的配置和验证动作照着做十分钟能跑通。2. 前置准备TaoToken 接入与 Figwright 环境Figwright 本身只是「手」真正理解设计上下文、生成代码的是背后的大模型。所以第一步是把模型通道准备好。我用 TaoToken 做统一接入一个 Key 就能在 Cursor 里切换不同模型省得每个客户端单独配一遍。2.1 拿 API Key打开 TaoToken 控制台在 API Keys 页面新建一个 Key复制出来先存好。地址是 https://taotoken.net/api 控制台入口在 https://taotoken.net/console 。Key 只在创建时完整显示一次丢了就重建一个别嫌麻烦。2.2 确认 Node 版本Figwright 的 MCP Server 通过npx启动对 Node 有硬性要求20.19 或 22.1218 和 21 不支持22.0 到 22.11 也不行。先验证node --version npm --version如果版本不对用 nvm 或 fnm 切一下。这一步踩坑的人特别多因为报错信息往往只显示「Connection closed」看不出是 Node 版本问题。2.3 安装 Figma 插件插件还没上架 Figma Community需要从 GitHub Release 手动导入。下载figwright-plugin.zip解压到固定目录比如D:\figma-plugins\figwright\然后打开 Figma 桌面版菜单 Plugins → Development → Import plugin from manifest选中解压目录里的manifest.json。注意必须用桌面版导入浏览器版后续可以连但导入开发插件不行。3. config.toml 可复制骨架与 Cursor 配置Cursor 的 MCP 配置现在主流走config.toml比早期 JSON 更好读。下面这份骨架我实测可用把command和env换成你自己的路径和 Key 即可。3.1 完整 config.toml 骨架# ~/.cursor/mcp.json 对应的 toml 写法Cursor 新版本支持 [mcp_servers.figwright] command npx args [-y, figwright/mcplatest] env { TAOTOKEN_API_KEY sk-你的Key, TAOTOKEN_BASE_URL https://taotoken.net/api } [mcp_servers.figwright.env_extra] # 可选指定模型Cursor 侧也可覆盖 DEFAULT_MODEL claude-sonnet如果你用的是 JSON 版配置等价写法是{ mcpServers: { figwright: { command: npx, args: [-y, figwright/mcplatest], env: { TAOTOKEN_API_KEY: sk-你的Key, TAOTOKEN_BASE_URL: https://taotoken.net/api } } } }3.2 关键参数说明参数作用建议值command启动 MCP Server 的可执行文件npx或绝对路径args传给 Server 的参数-y figwright/mcplatestTAOTOKEN_API_KEY模型调用凭证控制台新建的 KeyTAOTOKEN_BASE_URL模型网关地址https://taotoken.net/apiDEFAULT_MODEL默认模型按需Cursor 内可切注意npx每次启动都会去拉 npm 包网络抖动会直接导致 MCP 连接断开。生产用建议改成项目本地依赖npm i -D figwright/mcp然后把 args 里的latest去掉npx 会优先用node_modules里的版本。3.3 启动 Figma 插件并连接Figma 菜单 Plugins → Development → Figwright打开插件面板。面板显示 Connected 就说明 WebSocket 通了。回到 Cursor在对话里让 AI 跑一次 ping用 figwright ping 一下确认插件在线。如果返回 pong 和插件版本号链路就活了。这一步是整个流程的分水岭ping 不通后面全白搭。4. Cursor 一句话改稿与双向同步验证配置通了之后真正的验证动作是「一句话改设计稿看 Figma 画布是否真的变了」。这是 Figwright 和只读型 MCP 最大的区别。4.1 读方向选区变 React 组件在 Figma 里选中一个卡片 Frame切到 Cursor 输入用 figwright 把当前选区做成一个 React 组件TypeScript CSS Modules 按钮复用项目里已有的 Button 组件颜色用 design token。AI 会依次调用get_design_context拉选区完整信息再调component_map、token_map对齐你项目里的现有资产最后生成.tsx和.module.css。实测下来只要项目里有对应的组件和 token它不会自己造一套.btn-primary而是直接复用。4.2 写方向一句话在画布建 Frame这是验证双向同步的关键。在 Cursor 里输入用 figwright 在当前 Figma 文件新建一个 Frame1440 宽 做一个定价页顶部 Logo 导航中间三档价格卡底部 FAQ 和 CTA。 主色用 --color-primary字体 Inter。AI 会调用create_frame、create_text、create_rectangle再用apply_auto_layout设好约束和间距用set_variable绑定样式。切回 Figma画布上应该已经出现整屏结构。如果没出现先看插件面板的 Activity Tab每次调用都有记录能定位到是哪一步失败。4.3 改现有设计选中一个卡片输入把选中的卡片标题改成 Pro 版价格改成 $29/月按钮换成主色填充。AI 直接改节点不用手动点。这一步能过说明写权限和节点定位都没问题。4.4 验证同步的检查清单插件面板 Activity Tab 有对应调用记录耗时和节点 ID 都能看到Figma 画布出现预期变更不是只改了图层名Cursor 侧返回的 JSON 里success: true反向再读一次选区确认改动被get_design_context识别到5. 本篇常见报错排查5.1 npx command not foundMCP 客户端是直接 spawn 进程不读你 shell 的 PATH。用 fnm、nvm、volta 的同学最容易踩。终端执行where npxWindows或which npxmacOS拿到绝对路径填进command[mcp_servers.figwright] command C:\\Program Files\\nodejs\\npx.cmd args [-y, figwright/mcplatest]5.2 -32000 Connection closednpx -y figwright/mcplatest每次启动都要拉 npm网络不通直接死。两种修法一是项目本地装npm i -D figwright/mcpargs 去掉latest二是全局装npm i -g figwright/mcpcommand 直接填figwright-mcp的完整路径。5.3 插件一直 Waiting检查三件事MCP 客户端是否在跑且配置生效、插件是否在同一台机器的同一个 Figma App 里打开、防火墙有没有拦127.0.0.1:3055。Figwright 不支持远程连接跨机器一定连不上。5.4 写操作失败但读正常大概率是在 Dev ModeInspect里操作。Figma 限制 Dev Mode 下插件只读写操作会失败截图和 PDF 导出还能用。切回 Figma Design 模式即可。FigJam 里 frames、shapes、text 能用组件和变量不存在。5.5 模型调用 401检查TAOTOKEN_API_KEY是否填对、有没有多余空格TAOTOKEN_BASE_URL是否是https://taotoken.net/api。Key 泄露或过期就重建一个。6. 把链路固化进团队工作流跑通之后建议把 Figwright 的 Skills 装上让 AI 在合适时机自动触发不用每次手动喊npx skills add awdr74100/figwright/skills这会装figma-codegen和figma-build两个 skill前者负责选区变代码后者负责从代码构建设计稿。长期做编码和 Agent 任务的团队可以顺手把 Coding Plan 也配上模型额度和调用策略统一管理入口在 https://taotoken.net/coding-plan 。模型对话调试用 https://taotoken.net/models 接入文档在 https://taotoken.net/doc API Keys 管理在 https://taotoken.net/api-keys 。安全上提醒一句写工具会改你的 Figma 文件导出工具会写磁盘MCP 客户端的工具审批弹窗是最后一道防线别无脑点允许。公司项目接入前先和设计师、安全团队对齐别在不信任的 Figma 文件里开插件。
1. Figwright 到底是什么为什么前端团队开始盯上它如果你每天的工作流是「设计师在 Figma 画完我照着写组件」那你大概率经历过这几件事像素眼对着间距调半小时、Dev Mode 席位要单独付费、第三方插件生成的代码全是div1、div2这种没法维护的类名。Figwright 这个免费 MCP 项目就是冲着这几个痛点来的。一句话概括Figwright 把 MCP Server 和 Figma 插件用本地 WebSocket 连起来让 Cursor、Claude Code、Codex 这类 MCP 客户端既能读 Figma 选区生成框架感知代码也能反过来在画布上建 Frame、写文字、改 Auto Layout、绑定变量。它不需要 Figma Dev Mode 付费席位免费版账号就能跑所有数据走127.0.0.1不经过 Figma 云。适合谁天天把设计稿翻成 React/Vue 组件的前端、不想为 Dev Mode 掏钱的小团队、已经用上 Cursor 或 Claude Code 的 MCP 工作流玩家。不适合谁不用 Figma 的团队、完全不允许 AI 触碰设计文件的保守流程。这篇我按「配 TaoToken 拿模型能力 → 写 config.toml 骨架 → Cursor 一句话改稿 → 验证同步」的顺序走一遍每一步都给可复制的配置和验证动作照着做十分钟能跑通。2. 前置准备TaoToken 接入与 Figwright 环境Figwright 本身只是「手」真正理解设计上下文、生成代码的是背后的大模型。所以第一步是把模型通道准备好。我用 TaoToken 做统一接入一个 Key 就能在 Cursor 里切换不同模型省得每个客户端单独配一遍。2.1 拿 API Key打开 TaoToken 控制台在 API Keys 页面新建一个 Key复制出来先存好。地址是 https://taotoken.net/api 控制台入口在 https://taotoken.net/console 。Key 只在创建时完整显示一次丢了就重建一个别嫌麻烦。2.2 确认 Node 版本Figwright 的 MCP Server 通过npx启动对 Node 有硬性要求20.19 或 22.1218 和 21 不支持22.0 到 22.11 也不行。先验证node --version npm --version如果版本不对用 nvm 或 fnm 切一下。这一步踩坑的人特别多因为报错信息往往只显示「Connection closed」看不出是 Node 版本问题。2.3 安装 Figma 插件插件还没上架 Figma Community需要从 GitHub Release 手动导入。下载figwright-plugin.zip解压到固定目录比如D:\figma-plugins\figwright\然后打开 Figma 桌面版菜单 Plugins → Development → Import plugin from manifest选中解压目录里的manifest.json。注意必须用桌面版导入浏览器版后续可以连但导入开发插件不行。3. config.toml 可复制骨架与 Cursor 配置Cursor 的 MCP 配置现在主流走config.toml比早期 JSON 更好读。下面这份骨架我实测可用把command和env换成你自己的路径和 Key 即可。3.1 完整 config.toml 骨架# ~/.cursor/mcp.json 对应的 toml 写法Cursor 新版本支持 [mcp_servers.figwright] command npx args [-y, figwright/mcplatest] env { TAOTOKEN_API_KEY sk-你的Key, TAOTOKEN_BASE_URL https://taotoken.net/api } [mcp_servers.figwright.env_extra] # 可选指定模型Cursor 侧也可覆盖 DEFAULT_MODEL claude-sonnet如果你用的是 JSON 版配置等价写法是{ mcpServers: { figwright: { command: npx, args: [-y, figwright/mcplatest], env: { TAOTOKEN_API_KEY: sk-你的Key, TAOTOKEN_BASE_URL: https://taotoken.net/api } } } }3.2 关键参数说明参数作用建议值command启动 MCP Server 的可执行文件npx或绝对路径args传给 Server 的参数-y figwright/mcplatestTAOTOKEN_API_KEY模型调用凭证控制台新建的 KeyTAOTOKEN_BASE_URL模型网关地址https://taotoken.net/apiDEFAULT_MODEL默认模型按需Cursor 内可切注意npx每次启动都会去拉 npm 包网络抖动会直接导致 MCP 连接断开。生产用建议改成项目本地依赖npm i -D figwright/mcp然后把 args 里的latest去掉npx 会优先用node_modules里的版本。3.3 启动 Figma 插件并连接Figma 菜单 Plugins → Development → Figwright打开插件面板。面板显示 Connected 就说明 WebSocket 通了。回到 Cursor在对话里让 AI 跑一次 ping用 figwright ping 一下确认插件在线。如果返回 pong 和插件版本号链路就活了。这一步是整个流程的分水岭ping 不通后面全白搭。4. Cursor 一句话改稿与双向同步验证配置通了之后真正的验证动作是「一句话改设计稿看 Figma 画布是否真的变了」。这是 Figwright 和只读型 MCP 最大的区别。4.1 读方向选区变 React 组件在 Figma 里选中一个卡片 Frame切到 Cursor 输入用 figwright 把当前选区做成一个 React 组件TypeScript CSS Modules 按钮复用项目里已有的 Button 组件颜色用 design token。AI 会依次调用get_design_context拉选区完整信息再调component_map、token_map对齐你项目里的现有资产最后生成.tsx和.module.css。实测下来只要项目里有对应的组件和 token它不会自己造一套.btn-primary而是直接复用。4.2 写方向一句话在画布建 Frame这是验证双向同步的关键。在 Cursor 里输入用 figwright 在当前 Figma 文件新建一个 Frame1440 宽 做一个定价页顶部 Logo 导航中间三档价格卡底部 FAQ 和 CTA。 主色用 --color-primary字体 Inter。AI 会调用create_frame、create_text、create_rectangle再用apply_auto_layout设好约束和间距用set_variable绑定样式。切回 Figma画布上应该已经出现整屏结构。如果没出现先看插件面板的 Activity Tab每次调用都有记录能定位到是哪一步失败。4.3 改现有设计选中一个卡片输入把选中的卡片标题改成 Pro 版价格改成 $29/月按钮换成主色填充。AI 直接改节点不用手动点。这一步能过说明写权限和节点定位都没问题。4.4 验证同步的检查清单插件面板 Activity Tab 有对应调用记录耗时和节点 ID 都能看到Figma 画布出现预期变更不是只改了图层名Cursor 侧返回的 JSON 里success: true反向再读一次选区确认改动被get_design_context识别到5. 本篇常见报错排查5.1 npx command not foundMCP 客户端是直接 spawn 进程不读你 shell 的 PATH。用 fnm、nvm、volta 的同学最容易踩。终端执行where npxWindows或which npxmacOS拿到绝对路径填进command[mcp_servers.figwright] command C:\\Program Files\\nodejs\\npx.cmd args [-y, figwright/mcplatest]5.2 -32000 Connection closednpx -y figwright/mcplatest每次启动都要拉 npm网络不通直接死。两种修法一是项目本地装npm i -D figwright/mcpargs 去掉latest二是全局装npm i -g figwright/mcpcommand 直接填figwright-mcp的完整路径。5.3 插件一直 Waiting检查三件事MCP 客户端是否在跑且配置生效、插件是否在同一台机器的同一个 Figma App 里打开、防火墙有没有拦127.0.0.1:3055。Figwright 不支持远程连接跨机器一定连不上。5.4 写操作失败但读正常大概率是在 Dev ModeInspect里操作。Figma 限制 Dev Mode 下插件只读写操作会失败截图和 PDF 导出还能用。切回 Figma Design 模式即可。FigJam 里 frames、shapes、text 能用组件和变量不存在。5.5 模型调用 401检查TAOTOKEN_API_KEY是否填对、有没有多余空格TAOTOKEN_BASE_URL是否是https://taotoken.net/api。Key 泄露或过期就重建一个。6. 把链路固化进团队工作流跑通之后建议把 Figwright 的 Skills 装上让 AI 在合适时机自动触发不用每次手动喊npx skills add awdr74100/figwright/skills这会装figma-codegen和figma-build两个 skill前者负责选区变代码后者负责从代码构建设计稿。长期做编码和 Agent 任务的团队可以顺手把 Coding Plan 也配上模型额度和调用策略统一管理入口在 https://taotoken.net/coding-plan 。模型对话调试用 https://taotoken.net/models 接入文档在 https://taotoken.net/doc API Keys 管理在 https://taotoken.net/api-keys 。安全上提醒一句写工具会改你的 Figma 文件导出工具会写磁盘MCP 客户端的工具审批弹窗是最后一道防线别无脑点允许。公司项目接入前先和设计师、安全团队对齐别在不信任的 Figma 文件里开插件。
