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 文件里开插件。
企业数字化 ERP 产品动态
相关推荐
老照片修复与动态生成全流程：从扫描到AI复活 前阵子帮朋友修一张他奶奶年轻时的黑白照片，本来只是顺手去个划痕、提个清晰度，结果修完发现奶奶的表情是微微侧头的，我一时兴起，用AI生成了一段短视频——画面里她轻轻眨了眨眼，嘴角跟着动了一下。朋友看完愣了好半天… · 2026/9/23 3:12:18
需求分析与方案设计：从模糊想法到可落地系统的完整路径 你遇到过这种情况吗？业务方说“我想要一套客户管理系统”，结果你调研了半个月，方案画了一堆页面，对方却说“这不是我要的”；或者反过来，需求文档写得满满当当，开发一拿到就傻眼了——字段没定义… · 2026/9/23 3:12:12
JSP酒店管理系统开发实战：从数据库建模到并发事务处理 简介：JSP酒店管理系统是一套基于B/S模式的完整Web工程项目，面向学习JSP/Java Web开发的在校学生、课程设计作者及初级程序员，可用于理解酒店客房、预订、入住等核心业务流程，并掌握JSPServletMySQL的整合开发方式。压缩包共包含18… · 2026/9/23 3:12:12
SAP Concur国产替代深度评测：8款差旅费控平台选型指南 做费控选型这件事，我前前后后参与过好几次。最早一批国内企业用户接触到SAP Concur，多半是因为外企总部统一要求，或者企业有海外上市、审计背景。Concur本身确实是全球差旅费用管理的标杆，流程严谨、功能成熟，这一点没… · 2026/9/23 3:54:37
计算机组成原理入门：从数据通路到控制器详解 简介：面向计算机组成原理零基础读者的入门PDF，从冯诺依曼体系结构切入，系统讲解运算器、控制器、存储器、输入输出设备五大部件，进而展开CPU内部结构、存储系统的层次划分、程序执行全流程，以及数据表示、总线系统与发… · 2026/9/23 3:54:31
htc刷机避坑指南：环境配置卡壳？这份保姆级教程救你 htc刷机避坑指南：环境配置卡壳？这份保姆级教程救你 还在为配置ADB环境就卡半天而抓狂？很多HTC老用户想折腾系统，结果在开发者选项里转悠半小时，连接上电脑却提示“未识别的设备”，或者刷入包后直接变砖。这种“配置环境就卡半天”的挫败感，是… · 2026/9/23 3:54:31
守捉郎核心逻辑拆解：面试必问的底层原理 守捉郎核心逻辑拆解：面试必问的底层原理 版本升级后 API 全变了，很多人还在死记硬背旧的接口调用方式，结果一上项目就崩。这不仅是代码层面的崩溃，更是底层思维没跟上的体现。在最近的几场技术交流中，我发现不少开发者卡在“守捉郎”这个概念的理解… · 2026/9/23 3:54:31
芯片封装类型全解析：从DIP到BGA的选型与焊接指南 1. 芯片封装到底在封什么刚入行那会儿，我对封装的理解就停留在“给芯片穿件衣服”这个层面。直到有次帮朋友修一块工控板，一颗QFN封装的电源芯片虚焊，风枪温度没控好，直接把PCB焊盘给掀了，才意识到封装这件事远比想象中… · 2026/9/23 3:54:31
12款大模型Three.js代码生成实测：GPT-6 Astra鹈鹕骑车场景夺冠 1. 从“鹈鹕骑车”说起：一个被玩坏的经典测试题第一次看到“鹈鹕骑车”这个测试题，大概是在某个深夜刷技术社区的时候。当时的第一反应是：这帮人真会玩。用 Three.js 渲染一只鹈鹕骑自行车的 3D 场景，然后让大模型来生成代码&… · 2026/9/23 3:54:25
3招搞定手机怎么下载微信面试难题实战项目解析 3招搞定手机怎么下载微信面试难题实战项目解析 面试被问“手机怎么下载微信”背后的原理，90%的人答不上来。别笑，这看似弱智的问题，实则是考察你对移动应用分发机制、安全校验及网络协议理解的试金石。我带过不少校招新人，他们背了八股文，却连一个A… · 2026/9/23 0:00:03
你有新短消息请注意查收：3个新手避坑指南搞定消息系统选型 你有新短消息请注意查收：3个新手避坑指南搞定消息系统选型 面试被问“高并发下如何保证消息不丢失”，你张口就是“用Redis”，结果面试官追问“如果Redis宕机了怎么办”，你瞬间卡壳。这种场景太常见了，很多新手在背八股文时，只记住了技术名词… · 2026/9/23 0:00:29
