1. 为什么要把 Figma 画布接入 Codex 与 CC1.1 这个需求到底在解决什么问题做过前端或者全栈的朋友大概都有过这种体验设计师在 Figma 里把界面调得漂漂亮亮标注也写得清清楚楚可一旦落到代码层面还是得靠人肉去量间距、抄色值、对字号。一个页面十几个组件光是还原样式就能耗掉大半天。更别提设计稿改了一版又一版代码里的样式也得跟着一遍遍手动同步改到最后自己都不知道哪个值才是最新的。把 Figma 画布接入 Codex 或者 Claude Code后面统一简称 CC本质上就是想让 AI 编程助手能够“看见”设计稿。它不再是凭空猜测你要什么样式而是直接读取 Figma 文件里的图层结构、颜色变量、字体信息、间距数值然后基于这些真实数据生成对应的代码。你只需要告诉它“把这个 Frame 转成 React 组件”它就能给你一份样式基本对得上的代码骨架。这个能力对几类人特别有用。一是独立开发者没有专门的前端切图环节自己既做设计又写代码接入之后能省掉大量重复劳动。二是小团队的前端设计资源有限设计师给个 Figma 链接就得自己还原有了这个链路能快很多。三是正在学习前端的人想看看一个真实设计稿是怎么一步步变成代码的这个过程本身就是很好的参考。1.2 核心角色拆解Figma、Codex、CC、MCP 各是什么在动手之前得先把这几个名词理清楚不然后面配置的时候容易懵。Figma是设计工具这个大家都熟。它的关键点在于Figma 不只是“画图”它把每个图层、每个文本、每个矩形都结构化存储了。一个按钮在 Figma 里不是一张图片而是一个有名字、有位置、有填充色、有圆角半径、有字体属性的对象。这种结构化数据才是能被程序读取和利用的基础。Codex在这里指的是具备代码生成能力的 AI 助手它能够理解自然语言指令并输出代码。它本身不知道你的设计稿长什么样需要外部把设计信息喂给它。CC指的是 Claude Code一个在终端里运行的 AI 编程工具。它可以直接读写你本地的项目文件执行命令适合在真实项目里做代码生成和修改。MCP全称是 Model Context Protocol翻译过来叫模型上下文协议。你可以把它理解成 AI 助手和外部工具之间的“插头标准”。以前每个 AI 工具想接一个外部数据源都得自己写一套对接逻辑五花八门。MCP 出现之后只要外部工具实现了一个 MCP Server任何支持 MCP 的 AI 客户端都能通过统一的方式去调用它。Figma 官方和社区都提供了 MCP Server这就是我们能把 Figma 画布“递”给 AI 的关键桥梁。1.3 整体链路的逻辑关系把这条链路串起来看大概是这样的Figma 文件里存着设计数据Figma MCP Server 负责把这些数据暴露出来Codex 或 CC 作为 MCP Client 去请求这些数据拿到之后结合你的指令生成代码最后写进你的项目里。这里面有两个容易混淆的点。第一MCP Server 不是运行在 Figma 里的它是一个独立的服务进程通过 Figma 的 API 去拉取数据。第二Codex 和 CC 虽然都能做代码生成但它们接入 MCP 的方式不太一样配置细节需要分开处理。后面我会把两条路线都讲清楚。提示整条链路依赖网络访问 Figma 的接口所以你的开发环境需要能正常访问 Figma 服务。如果公司网络有特殊限制提前确认一下。2. 动手前的环境准备与关键决策2.1 你需要提前拿到的东西在开始配置之前有几样东西必须先准备好缺一个后面都会卡住。第一是Figma 的访问令牌。这个令牌是 MCP Server 去读取你 Figma 文件的凭证。获取路径在 Figma 账号设置里的开发者选项可以生成一个个人访问令牌。生成的时候注意权限范围至少要包含读取文件内容的权限。令牌生成后只会显示一次务必当场复制保存好关掉页面就再也看不到了。第二是Figma 文件的 URL 或者 File Key。File Key 是 Figma 文件链接里那串独特的字符MCP Server 需要它来定位具体是哪个文件。你可以在浏览器打开 Figma 文件地址栏里/file/后面那一段就是。第三是Node.js 运行环境。绝大多数 Figma MCP Server 都是基于 Node.js 实现的本地需要装好 Node.js版本建议在 18 以上。可以用node -v确认一下当前版本。第四是你要接入的 AI 工具本体。Codex 和 CC 的安装方式不同CC 通常通过包管理工具全局安装Codex 则根据你使用的具体产品形态来定。这部分建议先确保 AI 工具本身能正常跑起来再去接 MCP。2.2 选 Codex 还是选 CC这个问题没有标准答案取决于你的工作习惯。如果你习惯在终端里操作项目文件都在本地想让 AI 直接改你的代码文件那 CC 会更顺手。它天生就是为“在真实项目里干活”设计的读写文件、执行命令都很自然。如果你更倾向于在一个对话界面里描述需求让 AI 给你代码片段然后自己粘贴到项目里那 Codex 类的工具可能更符合你的习惯。它的交互更偏向问答式适合快速验证想法。从 MCP 接入的成熟度来看CC 对 MCP 的支持比较直接配置写在一个 JSON 文件里就行。Codex 这边则要看具体产品是否开放了 MCP 配置入口有些形态需要额外的适配层。我个人的建议是如果你两个都装了先用 CC 跑通整条链路理解数据是怎么流动的再去折腾 Codex 那边。2.3 关于 MCP Server 的选型Figma 相关的 MCP Server 目前有几种来源。一种是 Figma 官方或半官方维护的稳定性和字段覆盖度比较好。另一种是社区开源的功能可能更灵活但需要自己甄别维护状态。选的时候重点看几个指标最近一次更新时间、Issue 的响应情况、支持读取的 Figma 属性范围比如是否支持读取设计变量、是否支持导出图片资源。如果一个仓库半年没更新了Issue 里一堆人反馈连不上那就别用了浪费时间。安装方式上大多数 MCP Server 支持通过npx直接运行不需要全局安装。这种方式的好处是版本可以锁定不会污染全局环境。配置的时候在 MCP 客户端里写好命令和参数即可。3. 核心配置实操把 Figma MCP 接进 CC3.1 安装与初始化 CCCC 的安装通常通过 npm 全局进行。打开终端执行全局安装命令等待完成后用版本命令确认安装成功。第一次运行的时候它会引导你完成登录授权按照提示走完即可。安装完成后你可以在任意项目目录下启动 CC。启动后它会读取当前目录的上下文包括项目结构、依赖配置、已有代码文件。这一步很重要因为后面生成代码时AI 需要知道你的项目用的是什么框架、什么样式方案才能给出匹配的代码。注意建议在一个干净的项目目录里测试整条链路不要一上来就在生产项目里折腾。万一配置有问题排查起来会简单很多。3.2 配置 MCP Server 连接信息CC 的 MCP 配置一般放在用户目录下的配置文件中或者项目根目录的特定配置文件里。具体位置取决于版本可以在 CC 里输入查看配置的命令来确认。配置的核心是告诉 CC有一个 MCP Server它的启动命令是什么需要哪些环境变量。以常见的 Figma MCP Server 为例配置结构大致是这样的{ mcpServers: { figma: { command: npx, args: [-y, figma-mcp-server], env: { FIGMA_ACCESS_TOKEN: 你的令牌, FIGMA_FILE_KEY: 你的文件Key } } } }这里有几个细节值得说。command写npx表示用 npx 来拉起服务-y参数是自动确认安装避免每次弹交互。env里的令牌和文件 Key 是最关键的写错了就连不上。有些 Server 还支持通过参数传入而不是环境变量具体看它的文档。配置写完后保存重启 CC它会在启动时尝试连接这个 MCP Server。如果连接成功你在 CC 里就能看到可用的 MCP 工具列表。3.3 验证连接是否真的通了配置写完不代表就通了一定要验证。验证分两步。第一步在 CC 里查看 MCP 服务状态。通常会有一个命令列出当前已连接的 MCP Server 及其状态。如果显示已连接说明进程起来了。第二步实际调用一次。让 CC 去读取你 Figma 文件的某个 Frame比如输入“读取 Figma 文件里名为 Homepage 的 Frame列出它的子图层”。如果它能返回图层名称、类型、位置等信息说明数据链路是通的。如果报错看错误信息是令牌问题、文件 Key 问题还是网络问题对症下药。我踩过的一个坑是令牌权限给少了能连上但读不到内容报的是权限错误。后来重新生成令牌把读取权限都勾上才解决。所以如果连接成功但读数据失败优先检查令牌权限。3.4 让 CC 基于 Figma 数据生成代码链路通了之后就可以让它干活了。比较有效的指令方式是先指定要转换的 Frame再说明目标技术栈最后补充你的特殊要求。比如“读取 Figma 里名为 LoginCard 的 Frame用 React 加 Tailwind CSS 生成一个登录卡片组件注意保持圆角和阴影效果。”CC 会先去拉取这个 Frame 的数据然后结合你项目里的技术栈生成代码。生成结果的质量取决于几个因素。一是 Figma 图层的命名是否规范如果图层名字都是“矩形 1”“组 2”这种AI 很难理解结构。二是设计稿本身是否用了自动布局用了自动布局的 Frame 转出来的代码结构会清晰很多。三是你的指令是否具体越具体越容易得到想要的结果。4. 把 Figma 数据喂给 Codex 的另一种思路4.1 Codex 接入 MCP 的差异点Codex 这边的情况稍微复杂一些。不同形态的 Codex 产品对 MCP 的支持程度不一样。有的直接在设置里提供了 MCP 配置入口有的需要通过命令行参数指定还有的可能暂时没有原生支持需要借助中间层。如果你用的 Codex 支持 MCP 配置思路和 CC 类似找到配置文件写入 MCP Server 的启动命令和环境变量重启后验证。如果不支持一个可行的替代方案是先把 Figma 数据导出成结构化文本再手动喂给 Codex。4.2 手动导出 Figma 数据的兜底方案当自动链路走不通的时候手动导出是个可靠的兜底。Figma 本身支持导出多种格式但直接导出图片对生成代码帮助不大我们需要的是结构化的描述。一个实用的做法是在 Figma 里选中目标 Frame用插件或者手动方式把图层树、颜色、字体、间距整理成一份清单。有些社区插件专门做这个事能把选中区域的设计信息导出成 JSON 或者 Markdown 表格。拿到这份清单后把它作为上下文粘贴给 Codex再附上你的代码生成指令。这种方式虽然多了一步手工操作但胜在稳定不依赖任何 MCP 配置。对于偶尔用一次的场景其实比折腾配置更省时间。4.3 两种路线的对比与选择建议对比维度MCP 自动接入手动导出兜底配置成本较高需要配环境变量和命令低装个插件就行使用便捷度高一句话就能读数据中每次要手动导出粘贴数据实时性实时改了设计稿重新读即可快照式导出后不会自动更新稳定性依赖 Server 和网络很稳几乎不会出问题适合场景高频、长期使用低频、临时使用我的建议是如果你打算长期用这个链路花时间把 MCP 配好一次投入长期受益。如果只是偶尔想试试手动导出就够了别为了一个临时需求去折腾配置。5. 实操中容易踩的坑与排查技巧5.1 连接类问题速查配置过程中最常见的就是连不上。下面这张表整理了我遇到过和社区里反馈比较多的几类问题。现象可能原因排查方向MCP Server 启动即退出命令或参数写错在终端手动执行启动命令看报错连接成功但读不到文件令牌权限不足重新生成令牌勾选读取权限报文件不存在File Key 写错从 Figma 链接里重新复制时好时坏网络不稳定检查网络重试读取超时文件太大或图层太深缩小读取范围指定具体 Frame排查的核心思路是先在终端里手动把 MCP Server 跑起来看它能不能正常启动、能不能返回数据。如果终端里都跑不通那问题在 Server 本身或者令牌跟 AI 工具无关。如果终端里能跑通但 AI 工具里连不上那问题在 AI 工具的配置上。5.2 生成代码质量不理想的调整方法链路通了之后另一个常见问题是生成的代码“能用但不好用”。比如 class 名全是随机字符串或者嵌套层级深得离谱。遇到这种情况先从 Figma 侧找原因。检查目标 Frame 是否用了自动布局图层命名是否有语义。一个叫“Header”的 Frame 比叫“Frame 427”的 Frame 转出来的代码质量高很多。如果设计稿本身结构混乱AI 再强也救不回来。再从指令侧调整。不要只说“把这个 Frame 转成代码”而是说清楚你要什么。比如“生成一个函数组件用 flex 布局class 名用语义化的英文不要用行内样式”。指令越明确返工越少。5.3 几个提升效率的实操心得第一个心得是分块处理。不要试图一次性把整个页面转成代码先转一个小组件确认效果后再转下一个。这样即使出问题排查范围也小。第二个心得是保留设计变量。如果 Figma 里用了颜色变量和文本样式尽量让 MCP Server 把这些变量名也读出来生成代码时用变量名而不是硬编码色值。这样以后设计稿改色代码里改一处就行。第三个心得是建立自己的指令模板。把常用的指令格式固定下来比如“读取 X Frame用 Y 技术栈生成 Z 类型的组件注意 A、B、C”。下次直接套模板省去每次组织语言的时间。提示Figma 里的字体如果本地没安装有时候会影响渲染但对 MCP 读取数据本身没影响。不过如果你后续要截图对比记得把字体装好。6. 这条链路还能怎么扩展跑通基础链路之后其实还有很多可以玩的方向。一个方向是反向同步。现在主要是从 Figma 到代码未来如果代码里的组件库更新了能不能反向提醒设计稿同步这需要更复杂的工具链但思路是通的。另一个方向是结合组件库。如果你项目里已经有了一套组件库可以让 AI 在生成代码时优先复用已有组件而不是每次都生成原生标签。这需要在指令里明确告诉它你的组件库有哪些组件、怎么引入。还有一个方向是多文件批量处理。当一个页面有几十个 Frame 时逐个处理效率太低。可以写一个脚本批量读取 Frame 列表然后依次调用 AI 生成代码。这部分需要一些脚本能力但一旦跑通效率提升非常明显。我个人在实际操作中的体会是这条链路最大的价值不是“省掉切图”而是让设计和代码之间的信息传递变得可追溯。以前设计稿改了什么全靠人嘴说或者标注工具现在数据是结构化的AI 读到的就是最新的减少了大量沟通成本。当然它也不是银弹设计稿本身的质量直接决定了输出质量这一点在动手之前最好有心理预期。