Codex 是 OpenAI 推出的 AI 编程桌面客户端，直接在桌面上跑，不需要敲命令行。它支持 MCP（Model Context Protocol）协议，连接 Figma 后可以直接读取你的设计稿，自动生成前端代码。

对于国内用户来说有两大痛点：一是如何用中转站买的 API Key 登录，二是 Figma MCP Server 怎么配才能连通。

这篇文章把每一步都拆开了讲，跟着做就行。

第一部分 下载安装 Codex 客户端

打开浏览器，访问 OpenAI Codex 官方下载页：

https://openai.com/zh-Hans-CN/codex/?utm_source=Ai138.com

进入页面后，点击下载按钮，选择 Windows 版本。下载完成后：

1.双击安装包启动安装程序

2.按照安装向导提示，一路下一步

3.安装完成后，桌面会出现 Codex 图标

双击图标，Codex 客户端就启动了。

第二部分 用中转站 API Key 登录 Codex

Codex 客户端启动后，会弹出登录界面。这里的操作和 CLI 不同——客户端默认走 OpenAI 账号 OAuth 登录，但中转站用户没有 OpenAI 账号。

操作步骤如下：

1.登录你的中转站后台，找到两个关键信息：

2.API Key：格式为 sk-xxxxxxxxxxxxxxxx

3.API Base URL：通常是 https://你的中转站域名/v1（注意 /v1 结尾不能丢）

4.回到 Codex 客户端登录界面

图片
图片

1.找到「使用 API Key 登录」或「自定义 API 端点」选项（不同版本位置可能略有差异）

2.输入你的 API Key 和 Base URL

3.点击继续

登录成功后，Codex 客户端主界面就会出现，说明 API Key 配置正确。

注意：如果登录失败，先检查 Base URL 结尾是否带了 /v1，再检查 API Key 额度是否充足。

第三部分 获取 Figma 个人访问令牌

在配置 MCP Server 之前，需要先从 Figma 获取一个个人访问令牌（Personal Access Token）。

详细步骤如下：

1.打开浏览器，访问 figma.com 并登录你的 Figma 账号

2.点击页面右上角的头像

3.在下拉菜单中，点击 Settings（设置）

4.进入设置页面后，往下滚动，在左侧菜单或页面中部找到 Security（安全）选项

图片

1.在 Security 页面中，找到 Personal access tokens（个人访问令牌）区域

2.点击 Generate new token（生成新令牌）按钮

3.在弹出的对话框中：

•给令牌命名（比如 codex-figma，便于以后识别用途）

•点击 Generate token

令牌生成后，立即复制保存

注意：Figma 只会显示这一次完整令牌，关闭对话框后无法再次查看。令牌格式类似 figd_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx，大约 40 个字符。

妥善保管这个令牌，后面会用到

第四部分 在 Codex 客户端配置 Figma MCP Server

现在回到 Codex 客户端，开始配置 MCP 服务器连接。

4.1 进入 MCP 配置页面

打开 Codex 客户端主界面，点击左下角或右上角的设置图标（齿轮形状），在设置菜单中找到「MCP 服务器连接」或「MCP Servers」选项，点击进入。

4.2 新建 MCP 服务器

在 MCP 服务器连接页面，点击「新建服务器」或「Add Server」按钮。

4.3 填写配置参数

按以下参数逐项填写：

名称：figma-remote（随意填写）

协议：

流式 HTTP（Streamable HTTP）（不要选其他协议）

URL：https://mcp.figma.com/mcp

（注意：是 mcp.figma.com，不能少写 .com，否则会访问失败）

Bearer 令牌环境变量：把默认填入的 MCP_BEARER_TOKEN 删掉，留空

标头（Headers）：点击添加标头，填写两个字段：

key：Authorization

value：Bearer figd_你的完整个人令牌

重点注意：Bearer 后面有一个空格，然后是完整的 figd_xxx 令牌

•令牌要完整输入，不能有省略号，不能有省略

•示例格式：Bearer figd_a1b2c3d4e5f6g7h8i9j0klmnopqrstuv

来自环境变量的标头：保持留空，不填任何内容

如果按照上面配置后续没有打通链路就换下面这个配置：

图片
4.4 保存并等待自动配置

参数填写完毕后，点击「保存」按钮。Codex 会自动进行配置，稍等片刻。

配置成功后，Codex 会弹出身份验证提示，按照提示完成身份验证。

4.5 初次连接测试

身份验证完成后，Codex 会尝试连接 Figma MCP Server。此时很大概率会连通失败，这是正常的——因为通过中转站 API Key 登录的 Codex，不具备自动获取系统环境变量 FIGMA_OAUTH_TOKEN 的能力。

第五部分 配置 FIGMA_OAUTH_TOKEN 环境变量

连接失败的原因就是缺少 FIGMA_OAUTH_TOKEN 环境变量。下面在 Windows 系统中手动配置。

5.1 Windows 系统（已实测）

方法一：搜索直达（推荐）

第一步：按下键盘 Win + S 键，在搜索框中输入：

环境变量

第二步：在搜索结果中，点击「编辑系统环境变量」

第三步：弹出「系统属性」窗口，点击右下角的「环境变量」按钮

方法二：从此电脑进入

第一步：桌面右键「此电脑」→ 点击「属性」

第二步：在左侧菜单中点击「高级系统设置」

第三步：点击右下角「环境变量」按钮

5.2 新建用户变量

进入环境变量窗口后：

1.在上半部分「用户变量」区域，点击「新建」按钮

图片

1.在弹出的对话框中填写：

2.变量名：FIGMA_OAUTH_TOKEN

3.变量值：figd_你的完整个人令牌

4.注意：这里只填纯令牌字符串，不要加 Bearer 前缀。

5.示例：figd_a1b2c3d4e5f6g7h8i9j0klmnopqrstuv

6.而不是：Bearer figd_a1b2c3d4e5f6g7h8i9j0klmnopqrstuv

5.3 保存并生效

三个确定，一个都不能少：

1.点击「新建用户变量」对话框的「确定」

2.点击「环境变量」窗口的「确定」

3.点击「系统属性」窗口的「确定」

5.4 重启 Codex

完全关闭 Codex 客户端，再重新打开。

这一步不能省略——Codex 只有在启动时才会读取环境变量，不重启不会生效。

5.5 永久生效校验（可选但推荐）

关闭所有终端窗口（CMD、PowerShell），重新打开任意终端，输入以下命令：

echo %FIGMA_OAUTH_TOKEN%

如果输出你的完整令牌，说明环境变量已永久生效。如果没有输出，说明配置过程有遗漏，返回前面的步骤检查。

第六部分 启动 Codex 测试连接

环境变量配置完成并重启 Codex 后，回到 MCP 服务器连接页面。测试方法：在 Codex 对话中输入一个 Figma 设计稿链接，例如：

请使用已配置的 Figma MCP（你自己mcp服务器配置的名字），读取这个文件的基础信息：[你的 Figma 文件链接]

如果 Codex 能够读取设计稿信息并生成代码，说明整个配置链路完全打通。

⚠️注意：如果更换一个聊天对话框之后，又无法在链接figma之后（❌提醒failed to connect to running Pencil app: transport not connected to app）这个时候关闭codex服务，重启codex，在对话框输入 请使用已配置的 Figma MCP（你自己mcp服务器配置的名字），读取这个文件的基础信息：

[你的 Figma 文件链接] 进行链接测试，通过了就在对话里面使用，这是用中转站的弊端。

以下为 Mac 系统的环境变量配置方法，供参考（未实测）。

第一步：编辑环境变量文件

打开终端，执行：

open ~/.zshrc

如果提示文件不存在，则执行：

open ~/.bash_profile

第二步：在文件末尾添加

export FIGMA_OAUTH_TOKEN=“figd_你的完整令牌”

注意：加了双引号包裹令牌。

第三步：保存并使配置生效

source ~/.zshrc

或

source ~/.bash_profile

第四步：校验是否生效

echo $FIGMA_OAUTH_TOKEN

输出令牌即表示配置成功。

结尾

整个配置链路的难点就两处：一是中转站 API Key 登录时的 Base URL 配置，二是 Figma MCP Server 打通时需要手动设置系统环境变量。

这两处绕过之后，剩下就是等 Figma MCP 把你的设计稿转成结构化数据，Codex 再据此生成代码。

如果在配置过程中遇到其他问题，欢迎留言交流。

免责：本文中 Mac 系统部分未经过实测，仅供配置参考。中转站及 API Key 的获取请自行联系服务提供商。

配置速查表

下载地址：https://openai.com/zh-Hans-CN/codex/?utm_source=Ai138.com

MCP 服务器名称：figma-remote（随意命名）

MCP 协议：流式 HTTP

MCP URL：https://mcp.figma.com/mcp

标头 Key：Authorization

标头 Value：Bearer figd_你的令牌

环境变量名：FIGMA_OAUTH_TOKEN

环境变量值：figd_你的令牌（不加 Bearer）

Windows 校验命令：echo %FIGMA_OAUTH_TOKEN%

Mac 校验命令：echo $FIGMA_OAUTH_TOKEN%