AI 还原 Figma 效果总达不到预期？先别急着让它写代码

我发现不少人用 AI 还原 Figma，还是先截个图，或者把设计稿导出成图片，再丢给 AI 写页面。还有人直接发个 Figma 链接，说一句"照着还原"，就等结果了。

如果 Figma 没有真正接通，Agent 可能只是打开网页、看截图，再凭画面去猜布局。它到底读到了什么，自己也没检查，尺寸、间距、字体这些细节就容易对不上。

今天就分享一下我自己的流程。我用 Codex 通过 MCP 直接读取 Figma，先分析设计、列清单，我确认后再动手，最后打开页面对照复验。

按这套流程完整走一轮，在我自己的项目里，整体还原度目测能到 95%以上，剩下的主要就是再调一些细节。接入方法和四段提示词都放在下面，大家可以直接拿去试。

一、通过 MCP 把 Figma 接到 Codex

连接走的是 Figma 官方远程 MCP。 可以把 MCP 理解成 AI 调用 Figma 工具的连接方式。我在 Codex 里安装官方 Figma 插件，插件会带上 MCP 配置和相关 Skills。

其中，figma-design-to-code Skill 相当于一份操作说明，指导 AI 读取设计，再结合现有项目完成还原。

接入只需要这几步。

1. 在 Codex 的 Plugins（插件） 中找到 Figma，安装并完成账号授权。
2. 回到 Codex，确认 Figma 显示已连接。
3. 在 Figma 中选中目标画板或图层，右键 Copy link to selection，把节点链接发给 Codex。

这里的"节点"，就是设计稿里的一个画板、图层或元素。复制它的链接，AI 才好定位到你要处理的地方。 Figma 官方接入教程

先看支持名单

这套官方远程 MCP 接法，客户端要在 Figma 支持名单里。 截至 2026 年 11 月 5 日，官方文档列出了下面这些。

• 编码工具包括 Codex、Claude Code、Cursor、VS Code、Copilot CLI、Gemini CLI、OpenCode、Kiro、Warp、Augment Code、Factory、Replit、Android Studio、Firebender、Xcode（Beta）。
• 其他客户端包括 Claude Desktop、Dia、Linear、Meta Muse。

名单后续会更新，以官方页面为准。 Figma 官方支持名单

不在官方支持名单里的，懂的都懂。我替兄弟们试过了，这条路走不通，就别白费力气了。

次数限制也要看一下

Figma MCP 读取设计有次数限制，额度要看账号的套餐和席位类型。按目前的官方规则，Starter 或 View／Collab 席位每月最多 20 次，教育计划每天最多 200 次、每分钟 10 次，和 Professional 的 Full／Dev 席位额度一致。 官方配额说明

我自己琢磨的邪修做法是，去某鱼买个figma教育优惠，把有权限复制的画板放到自己的教育团队项目里，再让 Agent 读取这份文件。操作就是选中画板，Ctrl+C、Ctrl+V 复制到新文件，Mac 换成 Command。

复制后要换成新节点链接。 同时确认文件所属团队的套餐，以及 MCP 当前登录账号的席位，可以让 Agent 用 whoami 查询。实际额度按生效的套餐和席位计算。

教育计划需要学生或教师身份认证，符合条件可以免费申请。 教育计划要求

二、接上之后，先确认真的读到了

简单说，前端把设计图做成网页时要看的大部分视觉细节，AI 都能直接读取。比如按钮多大、两块内容隔多远、文字用什么字体和颜色、图标放在哪儿。前提是这些信息已经在设计稿里定义好。

展开来看，主要是下面几类。

• 布局包括宽高、位置、边距、间距、对齐和 Auto Layout，也就是自动布局规则。
• 样式包括文案、字体、字号、字重、行高、颜色、圆角、边框和阴影。
• 结构包括图层层级、组件与不同状态，以及共用的颜色、间距等设计变量。
• 素材 包括图标、插画、图片和节点截图。 Figma 官方工具说明

我会看工具有没有调用成功，返回的数据能不能跟设计对上。下面这些情况，可以拿来对照。

检查什么	容易走偏的情况	正确的做法
访问	工具报未授权或节点不存在，还说读取成功	先检查授权、文件权限和节点链接
目标	给的是详情页，读到的却是别的画板	核对节点编号、名称和截图
结构	只下载整张设计图，就开始看图猜布局	读取节点结构和属性，再结合截图对照
完整性	页面太大，只读到一半就开始写代码	按区域继续读取，补齐本轮需要的信息
参数	尺寸、间距全是"大概"	返回实际读取的数值，方便逐项核对
素材	图标没读到，就画个相似的替代	实时读取对应素材，核对形状、尺寸和位置

截图用来对照效果是正常的，重点是有没有同时读到节点结构和具体参数。 官方流程也会同时使用设计上下文和截图。 Figma 官方还原流程

第一段提示词已经带上这个检查。拿到结果后，挑一两个元素和 Figma 对一下就行。

三、开始还原，分四步走

1. 先读设计和项目

在项目目录里打开 Codex，我通常只给它Figma 节点链接和要改的模块。项目用什么技术、有哪些现成组件、页面入口在哪儿，让它自己读代码确认。

我有个习惯，需求说完以后，先补一句------"先理解一下我的需求，再复述一下，我确认后再执行。"

看一下它接下来准备做什么，和自己想的是不是一致。有出入就及时调整。尤其是大规模改动，我强烈建议先走这一步，能少掉很多后面的返工。

读项目的时候，还要确认一件事，这个模块有没有取真实数据的接口。

• 没有接口，先用 Mock，也就是临时模拟的数据，按 Figma 1:1 还原页面。这些数据集中管理，方便后面替换。
• 已经有接口，先看实际返回了哪些字段，比如名称、数量、状态，再用这些值套 UI 样式。设计稿里有、接口里没有的内容，先列出来确认。

别为了把画面补满，就让 AI 编出一堆业务里没有的字段，后面接数据又得改一遍。

请用 Figma 工具实时读取 [节点链接]，在当前项目中定位 [模块名称]。

先返回两个子节点的名称、ID 和宽高，以及一处文字的字号、颜色和节点截图，方便我核对读取结果。

读取项目的技术栈、组件库、样式和接口，确认可用字段。结合设计复述要做什么、能复用什么、需要我确认什么。相关状态也一起读，内容太多就按子节点分批读取。

这轮只分析，不改代码，等我确认。只报告实际读取的结果，读不到就说明。

2. 把差异逐项列出来

接着就是我经常说的那句------"逐个列出，分清楚样式还是文字，分类清楚"。

对照 Figma、当前页面和代码，逐项列出要改的地方。

按文字、样式布局、交互规则分类，用表格给出
编号｜位置｜当前表现｜设计要求｜拟改法

尺寸、间距、字号写具体数值，图标和图片也一起核对。

已有接口就核对真实字段，缺失内容单独列出。没有接口就标明使用 Mock。

涉及新功能、字段含义或其他页面的影响，单独说明。等我确认清单后再修改。

比如我之前拿到的清单里，就有下面这几项。

编号	当前页面	Figma 要求
W05	代表性专利	核心专利
S07	四张卡，2×2 排列	五张卡，第一行三张、第二行两张
R01	四类列表每页分别为 3、3、6、8 条	每类列表每页 5 条

3. 确认清单，再让它动手

我一般按编号回复，都改就说"全部"。有要保留的地方也一起说，比如我那次就补了一句"图谱的样式就不改了"。

确认，处理清单中的 [编号或全部]，按这个范围还原 Figma。

复用现有组件和样式。没有接口的模块，用 Mock 数据还原 UI，Mock 集中管理，方便替换。

已有接口的模块，用真实字段和值，保留业务逻辑。缺失内容列为待确认项，不自行编造字段或混入 Mock。

图标和图片以 Figma 实时读取到的素材为准，位置、尺寸和比例都按设计来。

业务规则有疑问就提出来，继续做已经确认的部分。完成后说明处理了哪些清单项、改了哪些文件。

4. 打开页面，再对照一遍

页面做好以后，我会让它用浏览器工具或 Playwright 实际操作一遍。切换页签、翻页、打开弹窗、进入详情再返回，都要点到。页面入口和显示尺寸，让它自己核对。

打开实际页面，按 Figma 的设计尺寸设置视口，再对照清单逐项检查。

检查布局、文字和样式，实际操作 Tab、分页、弹窗，以及进入详情后返回。根据项目要求补看窄屏、长文字和空态。

核对图标和图片是否正常加载，位置、尺寸和比例是否一致。

修正本轮发现的偏差，再重复对应操作，并跑相关代码检查。

最后附关键截图，列出通过项、剩余差异和未验证项，说明各模块用的是真实接口还是 Mock 数据。

我有一次把页面缩到 390×844 的手机尺寸，才发现里面、外面两层都在滚动，操作按钮被挤到屏幕外了。还有一次，来回切了几次页签，发现其中一个状态左边多了 16px 留白。

这两处修完以后，我都让它按原来的操作再走一遍，确认按钮能点到，页签切换时位置也对了。