VS Code + Codex + Figma MCP 教程

让 Codex 直接读取 Figma Dev Mode 的设计，并生成 UI 代码。​

准备工作​

•

Node.js 已安装，并全局安装/更新 Codex CLI：npm i -g codex@latest​

•

VS Code + Codex 扩展（已安装并登录）​

•

Figma 桌面版，打开 Dev Mode​

•

已启动 Figma MCP 服务，默认监听 http://127.0.0.1:3845/mcp​

•

配置文件路径：C:\Users\<你的用户名>\.codex\config.toml（或 ~/.codex/config.toml）​

安装/启用 Codex​

在 VS Code 中安装并启用 Codex 扩展，完成登录。​

​

​

在 Codex 设置里选择模型 gpt-5.1-codex-max，推理档位选 High。​

在 config.toml 配置 Figma MCP​

​

​

​

​

26%

​

​

​

​

74%

​

​

编辑 C:\Users\Dell\.codex\config.toml（用户名按需替换），确认包含以下内容：​

​

代码块​

Plain Text

windows_wsl_setup_acknowledged = true​

model = "gpt-5.1-codex-max"​

model_reasoning_effort = "high"​

​

[mcp_servers.figma]​

url = "http://127.0.0.1:3845/mcp"​

​

[notice]​

"hide_gpt-5.1-codex-max_migration_prompt" = true​

​

​

💚

DANGER​

不要保留占位写法 url = xxx，务必填写实际运行中的 Figma MCP 地址（默认识http://127.0.0.1:3845/mcp）。​

​

修改后重载 VS Code，让 Codex 重新加载配置。​

判断 Figma MCP 是否准备就绪：终端输入 codex，再输入 /mcp 查看返回结果。​

​

​

在 AGENTS.md 补充团队约定​

将下面的段落追加到 AGENTS.md，让团队在写 UI 时始终利用 Figma MCP：​

​

代码块​

Markdown

​

开始使用​

打开 Figma，切到 Dev Mode，选中要实现的 frame/component。​

确认本地 Figma MCP 进程已启动（默认 3845 端口可访问）。​

在 VS Code 的 Codex 面板输入指令，例如：“根据我当前 Figma 选中生成 React 代码，保持像素级还原”。​

如需更多上下文，可让 Codex 先调用 get_screenshot 或 get_variable_defs 再继续实现。​

​

​

常见问题​

•

看不到 Figma MCP？检查 config 的 url 是否正确、端口是否占用。​

•

生成代码缺少样式？让 Codex 调用 get_variable_defs 获取变量后再生成。​

•

大屏页面超时？先用 get_metadata 看结构，再分块调用 get_code。​