Codex 可通过本地 Figma MCP 服务实现像素级设计还原校验：需启动 Local Figma Agent、连接 http://127.0.0.1:3667/mcp，再用 /compare 指令同步比对图层树与 DOM，支持批注定位、/goal 结构化检查及导出差异清单。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要让 Codex 对照 Figma 设计稿，逐像素检查当前页面的字号、间距、圆角、阴影、固定区域是否一致，而不是靠肉眼来回切换窗口比对。
确认 Codex 已连接本地 Figma MCP 服务
打开 Figma 桌面版 → 确保已安装并启用 Local Figma Agent MCP 插件 → 在插件面板点击「Start Server」→ 观察右下角状态栏是否显示「MCP Ready」。如果显示「Disconnected」或无响应，【必须重启 Figma 桌面版，浏览器版不支持】。
在 Codex IDE 中执行命令：/mcp connect http://127.0.0.1:3667/mcp → 等待返回「Connected to Figma MCP server」。若报错「Connection refused」，说明本地服务未启动或端口被占用，需手动检查 3667 端口进程。
让 Codex 同时读取设计稿与当前页面代码
在 Figma 中选中目标 Frame（如「登录页-手机端」）→ 切换到你的开发环境，确保当前页面已运行在本地服务（如 http://localhost:5173/login）→ 在 Codex 指令栏输入：
/compare figma://current-frame with http://localhost:5173/login
这句指令会触发 Codex 同时拉取：Figma 当前选中节点的完整图层树、CSS 样式属性（包括 opacity、transform-origin）、截图像素级渲染结果；以及本地页面的 DOM 结构、计算后样式、viewport 截图。它不会只比对文字或颜色值，而是把「滚动区域是否截断」「图标是否模糊」「按钮 hover 状态是否缺失」都纳入差异识别范围。
通过 Codex CLI 生成图片，支持尺寸控制和批量模式。依赖：codex (npm)。代理默认启用。用 generate.sh 生成单张，batch_generate.sh 批量生成游戏 UI 素材，gen_size.sh 指定尺寸。所有输出保存至 ~/.codex/generated_images/。
聚焦关键差异项，跳过冗余比对
方法一：用批注模式定点检查布局错位
在 Codex 返回的比对报告中，找到「Layout Mismatch」小节 → 点击右侧「Open in Browser Use」→ 页面自动加载当前 URL 并高亮第一个溢出区块 → 按住 Cmd+Shift+A（Mac）或 Ctrl+Shift+A（Win）激活批注 → 圈选顶部导航栏 → 右键选择「Inspect spacing & alignment」→ Codex 将输出：Expected top padding: 16px (from Figma), Actual: 12px → missing 4px; Parent container height is fixed at 56px, overflow hidden.
方法二：用 /goal 指令驱动结构化走查
在指令栏输入：/goal Verify visual fidelity of login form against Figma: check input height, label font-size, button corner radius, error message spacing, and disabled state opacity → Codex 会跳过全局截图比对，直接定位 form 元素，提取 Figma 中对应 Text 和 Rectangle 节点的 exact 字段，再读取浏览器 computedStyle 进行数值比对。这一步能避开因字体渲染差异导致的误报，比如 Figma 标注「Inter 14px」但页面实际渲染为「13.82px」，Codex 默认忽略 0.2px 以内浮动误差。
方法三：导出可验证的问题清单
在比对完成后的报告页，点击「Export as checklist」→ 生成 Markdown 表格，含三列：「检查项」「设计稿值」「当前页面值」。该表格会自动过滤掉「text content matches」「background color within tolerance」等已通过项，只保留需人工确认的差异。导出文件名带时间戳，例如 login-page-visual-check-20261015-0608.md。
