Codex+ Figma 一键生成产品原型图
一、底层工作核心原理
整套AI驱动Figma自动设计工作流，依托工具调用机制与MCP中间通信服务两大底层核心模块实现AI从文本生成走向设计文件实操，区别于传统截图识图式AI设计方案。
1.1 AI工具调用：模型从“生成文字”升级为“执行操作”
传统大模型仅具备文本输出能力，工具调用架构赋予AI环境交互、指令执行、状态循环修正的行动能力，是AI自主操作Figma的逻辑根基。
交互闭环逻辑
✍️
AI发起数据查询指令：向Figma请求画布组件、布局尺寸、样式变量等结构化数据；
MCP中转回标准化设计元数据；
模型基于业务需求、现有图层结构判断动作指令：更新组件属性、调整栅格布局、批量新建UI模块、替换样式Token等；
指令下发至Figma完成变更；
自动循环校验结果，直至设计任务指标全部达成。
核心价值：AI不再局限“看图描述”，可深度介入设计源文件结构，实现自主迭代设计。
1.2 Figma MCP服务器：AI与设计软件的结构化通信桥梁
二、Codex设计技术栈完整部署
✍️
整套架构三层解耦：Codex智能代理层 → Figma MCP通信桥接层 → Figma设计画布层，三层打通后AI可直接读写编辑设计文件。
2.1 第一层：部署Codex AI智能代理
Codex作为核心思考决策单元，承载需求解析、动作判断、代码/UI逻辑推演能力，支持多运行载体。
可选运行环境
a.
官方Codex桌面客户端；
b.
VS Code/Cursor等支持AI代理、MCP协议的代码编辑器；
c.
OpenAI CLI命令行工具、ChatGPT专业代理模式。
部署步骤
部署后原生能力：自主生成UI配套代码、解析页面层级逻辑、执行终端命令；天然无法访问Figma文件系统，必须依赖MCP拓展硬件交互能力。
2.2 第二层：搭建Figma Console MCP桥接服务
本环节是整套链路的核心配置，创建AI与Figma之间的进程通信服务。
前置依赖校验：Node.js运行环境
npx命令依赖Node.js环境，必须提前部署
终端校验安装状态
代码块
Bash
node -v
npx -v
输出版本号（推荐v18及以上LTS长期支持版）即为就绪
安装完成后重启终端，再次校验版本确保环境生效。
配置编辑器内MCP服务实例
进入编辑器设置面板，新建MCP服务配置项
◦
服务名称：figma-console-mcp
◦
启动执行命令：npx
◦
启动入参：-y figma-console-mcp@latest
Figma个人访问令牌（Access Token）生成规范
✍️
打开Figma桌面端 → 账号设置 → 安全(Security)栏目；
点击「Generate new token」新建令牌；
令牌备注命名统一为figma-console-mcp，便于后期权限管理；
按需设置令牌过期周期，勾选全部文件读写插件权限；
生成后立即复制保存密钥，Figma仅展示一次密钥，丢失无法找回；
配置生效操作：保存全部参数后重启编辑器，确认MCP后台进程正常启动运行。
2.3 第三层：Figma客户端绑定MCP插件链路
MCP以临时npx进程运行，无本地永久插件目录，需手动导入插件映射文件完成Figma对接。
终端读取插件Manifest文件路径
执行官方定位脚本，输出插件配置根目录路径：
代码块
Bash
npx figma-console-mcp@latest --print-path
复制终端返回的完整文件夹路径（路径内包含manifest.json插件配置文件）。
Figma开发模式导入插件
a.
打开目标Figma设计文件；
b.
顶部菜单栏：插件 → 开发 → 从Manifest导入插件；
c.
粘贴上一步复制的文件夹路径，确认导入；
启动插件通信
Figma侧边栏插件列表找到figma-console-mcp，点击运行，建立画布与本地MCP服务的长连接。
2.4 全链路连通性校验
切换回Codex编辑器终端，执行状态检测指令：
代码块
Bash
check bridge status
成功连通返回标准日志：
Figma Console MCP服务在线运行；
Figma画布双向桥梁已激活；
校验通过后，Codex代理具备完整Figma读写操控权限。
三、Claude Code 对接Figma MCP部署流程
整体通信逻辑和Codex一致，差异在于Claude采用SSE流式传输MCP协议，内置专属CLI管理工具，适配Anthropic模型生态。
3.1 全局安装Claude Code CLI工具
提前确保Node.js环境就绪，终端全局安装：
代码块
Bash
npm install -g @anthropic-ai/claude-code
3.2 Figma开启内置开发模式MCP服务
打开Figma桌面端任意设计文件；
右侧侧边栏切换至开发模式，一键启用「开发模式MCP服务器」；
本地固定通信端点：http://127.0.0.1:3845/sse（SSE流式传输地址）。
3.3 CLI绑定Figma MCP服务器
执行添加MCP服务指令，指定SSE传输协议与本地地址：
代码块
Bash
claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse
3.4 校验MCP绑定列表
查看已接入的全部MCP服务，确认Figma服务存在：
代码块
Bash
claude mcp list
列表出现figma-dev-mode-mcp-server即代表链路绑定成功。
3.5 启动Claude代理并完成鉴权
终端启动Claude交互环境：
登录鉴权选型规范
◦
推荐选择：Anthropic控制台账户（API密钥）。适配MCP代理工作流、完整支持Figma插件交互、满足批量设计自动化需求；
填入Anthropic平台生成的API密钥，鉴权完成后即可下发指令让Claude自主编辑Figma画布。
四、拓展说明
安全管控要点
◦
Figma Access Token仅授予最小必要权限，闲置可手动销毁令牌；
◦
MCP为本地进程通信，数据仅在本机流转，无第三方云端中转，设计文件私密性更高；
能力边界
该方案支持组件批量生成、样式统一整改、页面布局重构、设计变量同步；复杂创意视觉细节仍可人工微调，AI负责标准化、重复性设计工作量；
扩展适配
Cursor、Windsurf等主流AI编辑器均兼容MCP标准协议，配置逻辑与Codex完全通用，仅启动入口略有区别。