1. 为什么要把 Figma 画布接进 Codex 和 Claude Code如果你平时用 Codex 或 Claude Code 写前端大概率遇到过这种场景设计稿在 Figma 里你只能靠截图或者手动描述「这个卡片圆角 12、间距 16、主色 #3B82F6」然后让 AI 猜。猜出来的代码和真实设计稿差一截改起来比手写还累。Figma 画布接入 Codex/CC 这件事本质是让 AI 编码工具通过 MCP模型上下文协议直接读取 Figma 文件的结构化数据——图层、组件、设计 token、自动布局参数而不是看一张扁平图片。MCP 在这里扮演的是「桥梁」角色Codex 或 Claude Code 负责思考和生成代码MCP server 负责和 Figma 通信Figma 画布提供真实的设计数据。适合谁跟做已经在用 Codex CLI 或 Claude Code、手里有 Figma 设计稿、想让 AI 直接读画布数据生成组件的开发者。整条链路里最容易卡住的两个点一是 MCP server 的配置格式Codex 用config.tomlCC 用settings.json或claude mcp add二是模型 API Key 的管理——Codex 和 CC 各自要配一套 Key切换工具时很烦。这篇会把这两块都打通用 TaoToken 统一 Key 收口配置骨架可以直接复制。下面按「前置准备 → 可复制配置 → 验证请求 → 排错」的顺序走每一步都有完整命令和预期结果。2. 前置准备TaoToken 统一 Key 与 Figma 访问令牌2.1 为什么用 TaoToken 收口 KeyCodex 和 Claude Code 默认各自读自己的环境变量Codex 走OPENAI_API_KEYCC 走ANTHROPIC_API_KEY或ANTHROPIC_AUTH_TOKEN。如果你两个工具都用还要在 MCP 配置里再塞 Figma token环境变量会变得很乱。TaoToken 的做法是提供一个兼容 Anthropic 和 OpenAI 协议的统一入口你只需要一个 Key通过不同的 base URL 路径区分模型。这样 Codex 和 CC 可以共用同一个 KeyMCP 配置里也不用重复填。先拿 Key打开 https://taotoken.net/api-keys 登录后创建一个 API Key复制保存。这个 Key 后面会同时填进 Codex 的config.toml和 CC 的环境变量。注意Key 只在创建时显示一次建议直接存进密码管理器。不要写进会提交到 git 的配置文件里用环境变量或本地.env引用。2.2 确认 Node.js 和 npx 可用Figma MCP server 通过npx启动所以本机要有 Node.js。终端里跑node -v npx -v预期输出类似v20.11.0和10.4.0。如果报command not found去 https://nodejs.org 下载 LTS 版本安装装完重启终端再验证一次。Node 版本建议 18 以上低于 18 部分 MCP server 会报fetch is not defined。2.3 生成 Figma 访问令牌打开 Figma 桌面版或网页版进入 Settings → Security → Personal access tokens点 Generate new token。权限至少勾选File content的只读权限如果你要让 AI 回写画布比如自动生成组件再勾File content的读写。命名建议和 MCP server 同名比如figma-console-mcp方便以后识别。生成后立刻复制页面刷新就看不到了。这个 token 是给 MCP server 用的和 TaoToken 的 Key 是两回事Figma token 负责访问你的设计文件TaoToken Key 负责调用模型。两个都要有。3. 可复制配置Codex 与 Claude Code 的 MCP 骨架3.1 Codex 侧config.toml 配置 MCP serverCodex CLI 的 MCP 配置写在~/.codex/config.tomlWindows 是%USERPROFILE%\.codex\config.toml。如果文件不存在就新建。完整骨架如下# ~/.codex/config.toml # 模型走 TaoToken 统一入口 model claude-sonnet-4-5 model_provider taotoken [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api env_key TAOTOKEN_API_KEY # Figma MCP server [mcp_servers.figma] command npx args [-y, figma-console-mcplatest] [mcp_servers.figma.env] FIGMA_ACCESS_TOKEN ${FIGMA_ACCESS_TOKEN} ENABLE_MCP_APPS true几个关键点说明。base_url填https://taotoken.net/api不要带 UTM 参数这是 API 入口。env_key指向环境变量名Codex 启动时会去读这个变量所以你要在 shell 里 exportexport TAOTOKEN_API_KEY你的TaoToken Key export FIGMA_ACCESS_TOKEN你的Figma TokenWindows PowerShell 用$env:TAOTOKEN_API_KEY...。想持久化就写进~/.zshrc或~/.bashrc。mcp_servers.figma这一段就是 MCP server 的启动配置command是npxargs里-y表示自动确认安装figma-console-mcplatest是包名。env块把 Figma token 传进去。ENABLE_MCP_APPS true开启应用级操作能力。3.2 Claude Code 侧settings.json 与 claude mcp addClaude Code 有两种配法。第一种是命令行直接加最省事claude mcp add figma-console \ --command npx \ --args -y figma-console-mcplatest \ --env FIGMA_ACCESS_TOKEN$FIGMA_ACCESS_TOKEN \ --env ENABLE_MCP_APPStrue第二种是写进~/.claude/settings.json适合团队共享配置{ mcpServers: { figma-console: { command: npx, args: [-y, figma-console-mcplatest], env: { FIGMA_ACCESS_TOKEN: ${FIGMA_ACCESS_TOKEN}, ENABLE_MCP_APPS: true } } } }CC 的模型侧同样走 TaoToken在 shell 里设置export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_AUTH_TOKEN你的TaoToken KeyANTHROPIC_BASE_URL指向 TaoToken 的 API 入口ANTHROPIC_AUTH_TOKEN填同一个 Key。这样 Codex 和 CC 共用一套凭证切换工具不用重新配。3.3 把 MCP server 挂到 Figma 画布MCP server 跑起来后还要让 Figma 认识它。因为用npx启动插件不在本地永久安装需要手动导入 manifest。先拿到 manifest 路径npx figma-console-mcplatest --print-path输出会是一个指向manifest.json的目录路径复制它。然后打开 Figma菜单 Plugins → Development → Import plugin from manifest粘贴刚才的路径导入。之后在 Plugins 菜单里找到这个插件点 Run。插件运行后Figma 和 MCP server 之间的通道就通了。这一步不做的话Codex/CC 能连上 MCP server但读不到任何画布数据会返回空结果。4. 验证请求确认画布数据真的传进了 Codex/CC4.1 检查 MCP 连接状态Codex 侧在项目目录里启动codex进入交互界面后输入/mcp预期看到figmaserver 状态为connected工具列表里出现get_selection、get_file、create_component之类的条目。如果显示failed看下一节的排错。CC 侧用claude mcp list预期输出里有一行figma-console: connected。如果显示disconnected多半是npx路径或 token 没传进去。4.2 实际读取画布数据在 Figma 里选中一个 frame 或组件然后在 Codex/CC 里发一条请求读取我当前在 Figma 里选中的节点列出它的图层结构、宽高和填充色如果链路正常模型会调用 MCP 工具返回类似这样的结构化数据{ name: Card/Primary, type: FRAME, width: 320, height: 180, fills: [{ type: SOLID, color: { r: 0.23, g: 0.51, b: 0.96 } }], children: [ { name: Title, type: TEXT, characters: 确认订单 }, { name: Body, type: TEXT, characters: 请核对收货信息 } ] }拿到这个就说明画布数据成功传入。接着可以让它生成代码根据上面的节点结构生成一个 React Tailwind 的 Card 组件颜色和间距按数据里的值来模型会输出带真实色值和尺寸的组件代码而不是猜的。这一步是整个链路的价值点AI 读的是设计文件的结构不是截图。4.3 回写画布可选如果 Figma token 开了读写权限还能让 AI 直接改画布在当前选中的 frame 里新建一个 16px 圆角的矩形填充 #3B82F6执行后 Figma 画布会实时出现新图层。这个能力适合批量生成组件或调整设计系统但建议先在副本文件里试别直接动主设计稿。5. 本篇常见错排查5.1 npx 启动失败或卡住现象/mcp显示 serverfailed日志里有ETIMEDOUT或404。原因通常是 npm registry 访问慢或者包名写错。先手动跑一次确认包能拉到npx -y figma-console-mcplatest --help如果这条命令本身卡住换 registrynpm config set registry https://registry.npmmirror.com再重试。如果报command not found: npx说明 Node 没装好回到 2.2 节。5.2 Figma token 无效或权限不足现象MCP 连上了但读取节点返回403或Invalid token。检查三件事token 有没有复制完整前后不能有空格权限有没有勾File contenttoken 有没有过期。Figma 的 token 可以设过期时间如果设了 1 天第二天就失效。重新生成一个更新环境变量后重启 Codex/CC。5.3 Codex 读不到 config.toml 里的环境变量现象config.toml里写了${FIGMA_ACCESS_TOKEN}但 server 启动时报FIGMA_ACCESS_TOKEN is not set。Codex 的${VAR}语法是从当前 shell 环境读的不是从.env文件读。确认你在启动codex的那个终端里 export 过echo $FIGMA_ACCESS_TOKEN有输出才行。如果用的是 IDE 内置终端可能没继承系统环境变量重启 IDE 或改用系统终端。5.4 CC 的 base URL 配错导致模型调用失败现象MCP 正常但 CC 发请求时报401或model not found。检查ANTHROPIC_BASE_URL是不是https://taotoken.net/api结尾不要多斜杠也不要带 UTM 参数。ANTHROPIC_AUTH_TOKEN填的是 TaoToken Key不是 Figma token。两个 token 别搞混Figma token 给 MCP server 用TaoToken Key 给模型调用用。5.5 插件导入后 Figma 里找不到现象--print-path输出了路径但 Figma 的 Plugins → Development 里没有。确认导入时选的是manifest.json所在的文件夹不是文件本身。Figma 要求选目录。另外插件只在当前文件生效换文件要重新 Run 一次。如果还是不行删掉重新 Import。6. 把 Key 和 MCP 配置固定下来整条链路跑通后建议做两件事让配置可复用。第一把环境变量写进 shell 配置文件别每次手动 export# ~/.zshrc 或 ~/.bashrc export TAOTOKEN_API_KEY你的TaoToken Key export FIGMA_ACCESS_TOKEN你的Figma Token export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_AUTH_TOKEN$TAOTOKEN_API_KEY第二Codex 的config.toml和 CC 的settings.json可以纳入 dotfiles 管理但 token 用${VAR}引用不要把明文写进去。团队协作时别人 clone 你的 dotfiles只要自己 export 自己的 token 就能跑。如果你还想在浏览器里直接对比不同模型读同一份画布数据的效果可以用 TaoToken 的模型对话入口快速验证https://taotoken.net/model-chat 。长期跑编码 Agent、需要稳定额度的看 Coding Planhttps://taotoken.net/coding-plan 。配置过程中卡在 MCP 连接或 Key 鉴权直接查接入文档https://taotoken.net/doc 或者去控制台确认 Key 状态https://taotoken.net/console 。