一句话看懂：有开发者在掘金分享了一套让 AI 还原 Figma 设计稿的流程：不靠截图，而是通过 Figma 官方远程 MCP 把设计节点直接接入 Codex，再配合四段提示词分步执行。作者称在自己项目中目测还原度超过 95%。
事件核心：发生了什么
原文发布于 2026 年 11 月 5 日。作者指出，很多人用 AI 写页面时仍是截图或导出图片后丢给模型，甚至只发一个 Figma 链接并要求“照着还原”。如果 Figma 没有真正接通，Agent 只能看截图猜布局，尺寸、间距、字体等细节容易对不上。
他的做法是：在 Codex 中安装 Figma 官方插件，通过官方远程 MCP 读取指定画板或图层节点，再依次执行“读设计与项目—列出差异清单—确认后修改—打开页面复验”四步。目前公开信息显示，该 MCP 接入对客户端有支持名单要求，Codex、Claude Code、Cursor 等在列；读取次数受 Figma 套餐和席位限制，如 Starter 或 View／Collab 席位每月最多 20 次。
为什么重要
这反映出一个趋势：AI 前端还原的效果上限，越来越取决于模型能否拿到结构化设计数据，而不是提示词写得多漂亮。MCP 让 AI 应用能直接调用 Figma 的节点结构、Auto Layout、颜色、阴影、设计变量和素材，减少“看图猜”带来的误差。对开发者而言，这类流程把 AI 从“生成代码”推进到“读设计、列清单、改代码、跑页面”的闭环，但能否稳定复现，仍取决于工具权限、配额和项目复杂度。
对用户/开发者/创作者的影响
开发者可直接借鉴四段提示词：先只分析不改代码，核对节点 ID、宽高和文字参数；再按编号列出差异，标明数值；确认范围后再改；最后用浏览器或 Playwright 按设计尺寸检查布局、交互、空态和长文本。作者还提醒，有接口时用真实字段，没有接口时用集中管理的 Mock，避免让 AI 编造业务字段。设计师和产品方也可借此理解：设计稿里的结构化信息越完整，AI 还原越可控。
AI 工具推荐
想把多个 AI 模型放在一个入口？
GamsGo AI 集成 ChatGPT、DeepSeek、Gemini、Claude、Midjourney、Veo 等常用模型，适合写作、绘图、视频和日常 AI 工作流。
推广链接：通过此链接购买，我可能获得佣金，不影响你的价格。
值得关注的后续
一是 Figma 官方 MCP 的支持客户端名单和配额规则是否会调整；二是这套流程在复杂中后台页面上的实际还原率能否被更多项目验证；三是其他设计工具和编码 Agent 是否会跟进类似的直连能力。
来源：juejin
