Codex + Figma 一键生成原型图
01/先把 Figma 接进 Codex
第一步，先打开 Codex 的插件入口。
59%
41%
第二步，在 Plugins 里搜索 Figma MCP / Figma 插件，安装后按提示授权 Figma 账号。
第三步，授权这一步不要跳。
这里补一句：授权页面不一定安装完插件立刻弹出来，而是在你后面使用 Codex 读取 Figma 的时候自动出现。
按页面提示登录并授权 Figma 账号即可。如果后面 Codex 读不到文件，最常见的问题就是 Figma 授权没通。
02/把 Figma 生成交给 Codex
插件装好以后，Codex 官方给了一个很简单的示例。
核心就是：复制 Figma 链接，然后让 Codex 读取设计稿并生成页面。
▫️
不只是把设计稿还原成页面。
也可以让 Codex 基于 Figma 生成组件，甚至反过来，把已经做出来的页面再整理成 Figma 设计文件。
03/先测：单画板静态还原
别让 Codex 在一堆垃圾桶里考古，不然它真会一本正经地还原错地方。
第一轮先测单画板。
如果你只想还原一个页面，就复制对应画板 / frame 的链接。
这样干扰最少，Codex 不需要在一堆页面里判断你到底要哪一个。
然后回到 Codex，输入官方示例里的第一条提示词。
▫️
这条提示词很短，结构就是：官方示例 + 单画板链接。
@Figma Inspect a Figma design and implement it in code [粘贴figma画板链接]
比如我这里后面的 test，就是刚才复制的单画板链接。
第一版不要贪。
这一步的目标不是“一次交付”，而是先把页面底稿跑出来：
这里可能遇到两个很典型的小问题。
第一个是预览方式。
页面确实还原出来了，但默认预览时页面会显得特别长，看起来不像手机界面。
Codex 右上角本身就可以切换设备预览方式，打开后可以直接设置设备尺寸。
▫️
比如设计稿是 390 × 844，就可以在设备预览里把尺寸调成对应手机稿尺寸，先确认它在真实手机框里的展示效果。
有些控件样式跟原稿预期不太一致。
比如我这里希望顶部状态栏和导航固定在顶部，底部按钮固定在底部，中间内容区域可以滚动。
另外还有一些小图标也不太对，要么形状变了，要么识别成了别的图标。
这种就不用重写一大段提示词了。
05/用批注功能，把翻车的地方圈出来改
用 Codex 的批注功能，直接选中出错位置，然后写具体修改要求。
批注功能的好处就在这里。
你不需要重新描述整个页面，也不用担心一句大提示词把已经还原好的地方改乱。
64%
36%
就让它同时处理 3 件事：顶部状态栏和导航固定、底部按钮置底、小图标按原稿修正。
Codex这个交互其实很适合设计产品。
我们平时改稿，本来就是看图、圈问题、提修改。现在只是把这个动作从“发给开发”变成“直接发给 Codex”。
静态页面还原好了，还原度达到99%！
06/再测多画板，让它补基础交互
单画板静态页面跑稳以后，再测多画板交互会更顺。
如果你的 Figma 里已经整理好了多个画板，比如单页面的各个标签页、首页/详情页等都放在同一个 page 里。
▫️
这样 Codex 可以一次读取多个画板，再补基础页面切换，这里要注意根据实际情况调整提示词，主要描述清楚交互逻辑即可。
例如这个单页面多tab，提示词可以这样写：
@Figma 读取整个页面并还原成交互代码 [粘贴figma列表页面链接]
▫️
这 4 个画板是同一流程：
如果还想继续细抠，可以再补交互动效。
▫️
tab 切换需要同时支持点击和手势：
•
点击 tab 时，也要按切换方向播放横向滑动动画，而不是瞬间替换内容
•
点击右侧 tab，内容从右往左切换；点击左侧 tab，内容从左往右切换
•
tab 选中态、文字颜色、下划线 / 高亮条需要同步过渡
•
Header 和底部操作栏保持不动，只让中间 tab 内容区切换
这样加交互动效后，是不是挺像那么回事了！
先跑通一个主流程，再逐步补分支。一次塞太复杂，Codex 很容易把页面关系理解乱。
▫️
Tips：