核心是Codex直接读取Figma结构化数据（Auto Layout、变量、组件关系、尺寸），而非截图识别，实现近100%还原；需ChatGPT Plus订阅、Figma Personal Access Token及规范画板，并通过MCP Server连接授权后，依链接生成可运行、响应式HTML页面。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用 Codex 把 Figma 设计稿变成能打开、能点击、能检查响应式的网页，核心不是截图识别，而是让 Codex 直接读取设计稿的结构化数据——包括 Auto Layout 规则、颜色变量、组件嵌套关系和真实尺寸信息，这才是还原度接近 100% 的底层原因。
准备三样关键东西
第一步：确认你有 ChatGPT Plus 或更高订阅。免费账号无法使用 Codex，桌面端登录后必须显示「Codex」专属界面才代表可用。
第二步：在 Figma 设置里生成 Personal Access Token。点左上角头像→Settings→下滑到底部→Personal access tokens→Generate new token→勾选全部权限→命名（如“codex-prod”）→【立刻复制，离开页面就再也看不到】。
第三步：整理好目标页面。把要还原的画板单独放在一个新页面里，删掉无关图层、废弃 frame、未命名的组。Codex 不会自动过滤“看起来不像设计”的内容，它会认真还原每一个可见节点。
配置 Figma MCP Server（远程服务）
方法一（推荐 Cursor 用户）：打开 Cursor 设置→MCP 标签页→点 “New MCP Server”→粘贴以下 JSON 并保存：
{ "mcpServers": { "figmaRemoteMcp": { "url": "https://mcp.figma.com/mcp" } } }
方法二（通用方式）：在终端运行命令，适用于 Claude Code 等支持 MCP 的工具：
claude mcp add --transport http figma-remote-mcp https://mcp.figma.com/mcp
完成后回到设置页，找到 Figma MCP 条目，点右侧 “Connect”。浏览器会自动弹出授权页，登录 Figma 并点 “Allow access”。【这一步失败，后续所有还原都会卡在“无法读取文件”】。
从单画板开始还原静态页面
第一步：在 Figma 中打开已整理好的设计文件，选中目标画板（frame），右键→“Copy link to selection”。链接末尾必须包含 `node-id=` 参数，否则 Codex 无法定位具体区域。
第二步：启动 Codex 桌面端，在输入框中输入标准指令：
请根据这个 Figma 链接生成一个可运行的 HTML 页面，保留所有 Auto Layout 行为、颜色变量和文字样式，输出完整文件结构（含 index.html、style.css）：[刚刚复制的链接]
第三步：等待 Codex 自动执行。它会调用 Figma API 获取节点树→解析间距与约束→映射设计系统变量→生成语义化 HTML+CSS→自动创建文件夹并写入。整个过程无需人工干预，但首次运行可能需 40～90 秒。
第四步：Codex 完成后，点击右下角 “Open in Finder”（macOS）或 “Open in Explorer”（Windows），进入生成目录。双击 index.html 即可在浏览器中预览。此时页面已具备基础响应式能力，但交互逻辑尚未添加。
用批注修正还原偏差
如果发现某个按钮颜色偏浅、卡片圆角不对或文字行高略小，不要重跑整页。直接在 Codex 输入框中发送新指令：
请修改刚生成的页面：将主按钮背景色改为 #3b82f6，卡片圆角统一为 12px，正文行高设为 1.6，并重新输出 style.css 文件。
这一步利用的是 Codex 的上下文记忆能力。它会读取上一轮生成的代码，只改指定项，不破坏已有结构。比手动改 CSS 快，也比重跑更可控。
