手记 · 2026
00:00:00
杭州
hello@damien-wang.com
求职中
杭州 · 远程
← 全部手记
NOTE // 67

如何用Codex+Figma精准还原设计稿

只需三步,99%还原设计稿。
在 Codex 的Plugins中找到并安装 Figma MCP,然后授权登录Figma的账号;
回到Figma,把要还原的页面整理到一个page中,然后右键,选择Copy link to page;
回到Codex,输入以下提示词:读取以下Figma 设计稿:[把复制的Figma地址粘贴到这]。用 react+taiwind 完整还原页面 UI,并且三个页面的切换加上交互功能。

如何用Codex + Figma精准还原设计稿的示例

在Codex中找到并安装Figma MCP,授权登录Figma账号的操作步骤

在Figma中还原设计稿的步骤

在Codex中还原Figma设计稿的示例

使用Codex+Figma还原设计稿后的效果

使用Codex+Figma还原设计稿的成果