保姆级教程！教你用 Codex 精准还原 Figma 设计稿！

一、全文速览图

上次我试过一条很野的路子：先让 AI 生成界面图，再丢给 Codex 还原成页面。

结果还真跑起来了。

想了解的朋友看这里：

但 AI 图毕竟只是图，Codex 是在“看图猜结构”。

这次我换成更接近真实工作的方式：直接把 设计稿丢给 还原。

二、先看完整流程

流程就四步：

1. Codex 安装 Figma 插件，授权 Figma 账号。
2. 回到 Figma，整理好要还原的页面，复制页面链接。
3. 再回到 Codex，把链接丢进去，让它先还原静态页面，再让它实现交互。
4. 第一版别贪，先看结构和视觉层级对不对。图标、样式、间距这些小翻车，后面再用批注功能补。

开始前还有个小提醒：Figma 文件别太乱。

最好把要还原的页面单独整理出来。你自己都看不懂的文件，就别指望 AI 能精准考古。

三、直接开干，先把 Figma 接进 Codex

第一步，先打开 Codex 的插件入口。

第二步，在 Plugins 里搜索 Figma MCP / Figma 插件，安装后按提示授权 Figma 账号。

第三步，授权这一步不要跳。

这里补一句：授权页面不一定安装完插件立刻弹出来，而是在你后面使用 Codex 读取 Figma 的时候自动出现。

按页面提示登录并授权 Figma 账号即可。如果后面 Codex 读不到文件，最常见的问题就是 Figma 授权没通。

接着先别急着回 Figma。

四、先看官方指导：把 Figma 链接交给 Codex

插件装好以后，Codex 官方给了一个很简单的示例。

核心就是：复制 Figma 链接，然后让 Codex 读取设计稿并生成页面。

看完官方示例，基本就能 get 到这个 Figma 插件能干嘛了。

它不只是把设计稿还原成页面。

你也可以让 Codex 基于 Figma 生成组件，甚至反过来，把已经做出来的页面再整理成 Figma 设计文件。

当然，这篇我先不把摊子铺太大。

我就按它的第一个示例往下测：先测单画板静态还原，再测多画板交互还原。

五、先测：单画板静态还原

回到 Figma 以后，建议先把无关草稿、废弃方案、乱七八糟的参考图挪走。

别让 Codex 在一堆垃圾桶里考古，不然它真会一本正经地还原错地方。

第一轮先测单画板。

如果你只想还原一个页面，就复制对应画板 / frame 的链接。

这样干扰最少，Codex 不需要在一堆页面里判断你到底要哪一个。

然后回到 Codex，输入官方示例里的第一条提示词。

这条提示词很短，结构就是：官方示例 + 单画板链接。

@Figma Inspect a Figma design and implement it in code [粘贴figma画板链接]

比如我这里后面的 `test`，就是刚才复制的单画板链接。

第一版不要贪。

这一步的目标不是“一次交付”，而是先把页面底稿跑出来：

这里我遇到两个很典型的小问题。

第一个是预览方式。

页面确实还原出来了，但默认预览时页面会显得特别长，看起来不像手机界面。

Codex 右上角本身就可以切换设备预览方式，打开后可以直接设置设备尺寸。

比如我的设计稿是 390 × 844，就可以在设备预览里把尺寸调成对应手机稿尺寸，先确认它在真实手机框里的展示效果。

这时候长图问题解决了，但新的问题也会冒出来。

有些控件样式跟原稿预期不太一致。

比如我这里希望顶部状态栏和导航固定在顶部，底部按钮固定在底部，中间内容区域可以滚动。

另外还有一些小图标也不太对，要么形状变了，要么识别成了别的图标。

这种就不用重写一大段提示词了。

六、用批注功能，把翻车的地方圈出来改

用 Codex 的批注功能，直接选中出错位置，然后写具体修改要求。

批注功能的好处就在这里。

你不需要重新描述整个页面，也不用担心一句大提示词把已经还原好的地方改乱。

哪里不对，就圈哪里；哪里要固定，就点哪里。

前两天Codex更新了批注功能，改颜色、改文案和改间距也很方便！

默认情况下，批注是一个一个提交的。

但你也可以点一下引导，让 Codex 一次性理解这几个问题，再统一修复。

比如这次我就让它同时处理 3 件事：顶部状态栏和导航固定、底部按钮置底、小图标按原稿修正。

Codex这个交互其实很适合设计师。

我们平时改稿，本来就是看图、圈问题、提修改。现在只是把这个动作从“发给开发”变成“直接发给 Codex”。

静态页面还原好了，我感觉还原度能达到99%了！

七、再测多画板，让它补基础交互

单画板静态页面跑稳以后，再测多画板交互会更顺。

如果你的 Figma 里已经整理好了多个画板，比如单页面的各个标签页、首页/详情页等都放在同一个 page 里。

那么，你可以复制整个 page 链接：

这样 Codex 可以一次读取多个画板，再补基础页面切换，这里要注意根据实际情况调整提示词，主要描述清楚交互逻辑即可。

例如我这个单页面多tab，提示词可以这样写：

@Figma 读取整个页面并还原成交互代码 [粘贴figma列表页面链接]
这 4 个画板是同一流程：
前三个是「选择角色」的三个 tab：关于TA、记忆、学习记录；
第四个是点击底部「预览」后的「角色预览页」。
请用激活的标签页还原前三个状态，不要做成三个独立页面。
到这一步，这个 Figma 设计稿用 Codex 还原页面的流程基本就算跑通了。

如果还想继续细抠，可以再补交互动效。

比如这个页面里有 tab 切换，我就会继续让 Codex 把点击和手势都补上：

tab 切换需要同时支持点击和手势：
- 点击 tab 时，也要按切换方向播放横向滑动动画，而不是瞬间替换内容
- 点击右侧 tab，内容从右往左切换；点击左侧 tab，内容从左往右切换
- 左右滑动手势也使用同一套动画
- tab 选中态、文字颜色、下划线 / 高亮条需要同步过渡
- Header 和底部操作栏保持不动，只让中间 tab 内容区切换
- 动画 200-300ms ease-out

这样加交互动效后，是不是挺像那么回事了！

这里提醒一句：如果设计稿里有多个页面、多条交互路径，最好分批实现。

先跑通一个主流程，再逐步补分支。一次塞太复杂，Codex 很容易把页面关系理解乱。

Tips：这次本质上还是网页方式还原，做H5做Web完全没问题，但如果是客户端 App 开发的技术语言和工程环境不一样。可以根据实际情况补充相关技术栈和要求给到AI。

八、最后叨叨

这次跑下来，也不是说 Codex 一键就可以完美还原 Figma。

它的问题还在：图标可能会错，样式会飘，复杂组件要改，页面状态也得自己盯。

但它已经能做一件很有价值的事：把 Figma 设计稿先变成一个可交互的高保真设计页面。