量子点-光子芯片纳米级探测技术解析
2026/9/23 3:51:06
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.12+，18 和 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/mcp@latest"] 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/mcp@latest"], "env": { "TAOTOKEN_API_KEY": "sk-你的Key", "TAOTOKEN_BASE_URL": "https://taotoken.net/api" } } } }3.2 关键参数说明
| 参数 | 作用 | 建议值 |
|---|---|---|
| command | 启动 MCP Server 的可执行文件 | npx或绝对路径 |
| args | 传给 Server 的参数 | -y @figwright/mcp@latest |
| TAOTOKEN_API_KEY | 模型调用凭证 | 控制台新建的 Key |
| TAOTOKEN_BASE_URL | 模型网关地址 | https://taotoken.net/api |
| DEFAULT_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 文件新建一个 Frame，1440 宽， 做一个定价页：顶部 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 found
MCP 客户端是直接 spawn 进程，不读你 shell 的 PATH。用 fnm、nvm、volta 的同学最容易踩。终端执行where npx（Windows）或which npx（macOS），拿到绝对路径填进command：
[mcp_servers.figwright] command = "C:\\Program Files\\nodejs\\npx.cmd" args = ["-y", "@figwright/mcp@latest"]5.2 -32000 Connection closed
npx -y @figwright/mcp@latest每次启动都要拉 npm，网络不通直接死。两种修法：一是项目本地装npm i -D @figwright/mcp，args 去掉@latest；二是全局装npm i -g @figwright/mcp，command 直接填figwright-mcp的完整路径。
5.3 插件一直 Waiting
检查三件事：MCP 客户端是否在跑且配置生效、插件是否在同一台机器的同一个 Figma App 里打开、防火墙有没有拦127.0.0.1:3055。Figwright 不支持远程连接，跨机器一定连不上。
5.4 写操作失败但读正常
大概率是在 Dev Mode（Inspect）里操作。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 文件里开插件。