企业官网建设流程全解析

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.toml，CC 用settings.json或claude mcp add），二是模型 API Key 的管理——Codex 和 CC 各自要配一套 Key，切换工具时很烦。这篇会把这两块都打通，用 TaoToken 统一 Key 收口，配置骨架可以直接复制。

下面按「前置准备 → 可复制配置 → 验证请求 → 排错」的顺序走，每一步都有完整命令和预期结果。

2. 前置准备：TaoToken 统一 Key 与 Figma 访问令牌

2.1 为什么用 TaoToken 收口 Key

Codex 和 Claude Code 默认各自读自己的环境变量：Codex 走OPENAI_API_KEY，CC 走ANTHROPIC_API_KEY或ANTHROPIC_AUTH_TOKEN。如果你两个工具都用，还要在 MCP 配置里再塞 Figma token，环境变量会变得很乱。

TaoToken 的做法是提供一个兼容 Anthropic 和 OpenAI 协议的统一入口，你只需要一个 Key，通过不同的 base URL 路径区分模型。这样 Codex 和 CC 可以共用同一个 Key，MCP 配置里也不用重复填。

先拿 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 server

Codex CLI 的 MCP 配置写在~/.codex/config.toml（Windows 是%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-mcp@latest"] [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 里 export：

export TAOTOKEN_API_KEY="你的TaoToken Key" export FIGMA_ACCESS_TOKEN="你的Figma Token"

Windows PowerShell 用$env:TAOTOKEN_API_KEY="..."。想持久化就写进~/.zshrc或~/.bashrc。

mcp_servers.figma这一段就是 MCP server 的启动配置：command是npx，args里-y表示自动确认安装，figma-console-mcp@latest是包名。env块把 Figma token 传进去。ENABLE_MCP_APPS = "true"开启应用级操作能力。

3.2 Claude Code 侧：settings.json 与 claude mcp add

Claude Code 有两种配法。第一种是命令行直接加，最省事：

claude mcp add figma-console \ --command npx \ --args "-y" "figma-console-mcp@latest" \ --env FIGMA_ACCESS_TOKEN=$FIGMA_ACCESS_TOKEN \ --env ENABLE_MCP_APPS=true

第二种是写进~/.claude/settings.json，适合团队共享配置：

{ "mcpServers": { "figma-console": { "command": "npx", "args": ["-y", "figma-console-mcp@latest"], "env": { "FIGMA_ACCESS_TOKEN": "${FIGMA_ACCESS_TOKEN}", "ENABLE_MCP_APPS": "true" } } } }

CC 的模型侧同样走 TaoToken，在 shell 里设置：

export ANTHROPIC_BASE_URL="https://taotoken.net/api" export ANTHROPIC_AUTH_TOKEN="你的TaoToken Key"

ANTHROPIC_BASE_URL指向 TaoToken 的 API 入口，ANTHROPIC_AUTH_TOKEN填同一个 Key。这样 Codex 和 CC 共用一套凭证，切换工具不用重新配。

3.3 把 MCP server 挂到 Figma 画布

MCP server 跑起来后，还要让 Figma 认识它。因为用npx启动，插件不在本地永久安装，需要手动导入 manifest。先拿到 manifest 路径：

npx figma-console-mcp@latest --print-path

输出会是一个指向manifest.json的目录路径，复制它。然后打开 Figma，菜单 Plugins → Development → Import plugin from manifest，粘贴刚才的路径，导入。之后在 Plugins 菜单里找到这个插件，点 Run。

插件运行后，Figma 和 MCP server 之间的通道就通了。这一步不做的话，Codex/CC 能连上 MCP server，但读不到任何画布数据，会返回空结果。

4. 验证请求：确认画布数据真的传进了 Codex/CC

4.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-mcp@latest --help

如果这条命令本身卡住，换 registry：

npm config set registry https://registry.npmmirror.com

再重试。如果报command not found: npx，说明 Node 没装好，回到 2.2 节。

5.2 Figma token 无效或权限不足

现象：MCP 连上了，但读取节点返回403或Invalid token。

检查三件事：token 有没有复制完整（前后不能有空格）；权限有没有勾File content；token 有没有过期。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_URL="https://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 Plan：https://taotoken.net/coding-plan 。配置过程中卡在 MCP 连接或 Key 鉴权，直接查接入文档：https://taotoken.net/doc ，或者去控制台确认 Key 状态：https://taotoken.net/console 。