我用 AI Codex 复刻视觉稿翻车后，imgGen + Loop 循环工程精准复刻了 UI

Loop Engineering 从入门到进阶手册 · UI 复刻实战篇

前面几篇讲了 Loop 的基本用法：目标要清楚，反馈要能检查，停止规则要提前写好。

这篇不继续堆概念，直接讲一个我自己踩过的坑：用 Codex 复刻 UI 视觉稿。

先交代这篇的主角：loop-builder。

之前总有人会问我如何打造一个loop，如何能落地应用，所以我干脆做了一个 Agent 工作流脚手架。

因为我觉得真正好用的工具，应该允许用户只说“帮我复刻这个 UI”，后面的复杂性由工具接住：缺什么先问，能默认就默认，必须人工判断的地方停下来确认。

所以开发它时，我的核心要求就是用户不需要熟悉一堆 Loop 术语，而是告诉AI需求，由AI来辅助落地loop。

具体来说就是用户只说一句任务，它先判断这件事适不适合走 Loop；如果缺目标图、页面入口、允许修改范围这类关键上下文，它应该先停下来问；信息够了，再生成工作逻辑确认卡和给 Codex 使用的执行 Prompt。

我一开始的需求很简单：写一段提示词，让 Codex 根据需求直接生成页面。

页面能跑，组件也有，浏览器打开也没有报错。但看一眼就知道：不对。

布局比例差一点，间距差一点，字体层级差一点，卡片质感差一点。每一处单独看都像小问题，合在一起就是另一种风格。

继续补提示词也很痛苦：

• 让它调小间距，它顺手改了布局。
• 让它靠近目标色，它又把层级做平了。
• 让它对齐卡片，它把整体节奏弄散了。
• 你说“还是不像”，它继续猜，但猜的方向未必对。

后来我在 AI 情报流里看到一个思路：先用 imgGen 生成设计图，再让编程 Agent 去实现。

于是我换了一条路径：先生成目标视觉稿，再让 Codex 按图复刻。

目标图有了，问题变清楚了一点，但普通 Prompt 还是容易陷入口头拉扯。真正有用的改变，是把这件事变成一个闭环：

目标图 -> 当前截图 -> 差异清单 -> 修 Top 3 -> 再截图验证

这就是我这次用 loop-builder 解决的问题。

普通提示词卡在哪里

UI 复刻最麻烦的地方，是“像不像”很难只靠文字说清楚。

你可以写：

请高保真复刻这张 UI 视觉稿，注意布局、字体、颜色、间距、圆角和阴影。

这句话能启动任务，但不能稳定收敛。

因为 Codex 还需要知道：

• 哪个差异最影响相似度？
• 这一轮只改哪几个点？
• 改完有没有截图证据？
• 上一轮改动到底有没有变好？
• 什么情况下该停下来交给人判断？

没有这些反馈，AI 很容易一直“继续改”。越改越多，越多越乱。

所以我后来不再只写一个大 Prompt，而是先用 loop-builder 把任务拆成一套工作逻辑。

我怎么用 loop-builder 降低成本

我给 loop-builder 的输入很简单：

帮我复刻这个 UI 视觉稿。

它不应该马上改代码。第一步要做的是判断：现在缺不缺关键上下文。

这类任务最关键的输入是目标图。如果没有目标图，后面所有复杂度判断、轮次建议、差异评估都不可靠。

所以合理流程是：

一句话任务
-> 检查缺什么
-> 补目标图 / 页面入口
-> 生成工作逻辑确认卡
-> 我确认或调整
-> 生成给 Codex 使用的执行 Prompt

这个过程帮我省掉了最麻烦的一步：不用自己从零写“目标、输入、反馈、禁止动作、停止规则”。

loop-builder 会把模糊任务整理成一张确认卡，大概长这样：

这张卡必须先给人看。

我可以在这里改规则，比如只复刻移动端、不碰接口、不引入新 UI 库、最大轮次更保守。

确认以后，才让 Codex 进入项目执行。

这里的关键在于：loop-builder 先把执行方式设计清楚，它不负责替我写页面。后面 Codex 怎么改，才不会变成边猜边改。

真实实战：安心记首页怎么被拉回正轨

最近在捣鼓一个给自己和家人用的日常记录AI小程序。一开始设计UI就遇到问题，codex实现的UI界面实在是看不下去（据说claude不错但是最近被封了。。。欲哭无泪）。

后来真的很巧合，这个项目因为我有其他事停了几天，有一天我在浏览我自己搭建的AI情报系统时，发现了一条有用的信息：Peter Steinberger 建议，如果认为 Codex 不擅长设计，可以尝试让 imagegen 重新想象设计并直接实现。

我的AI情报助手

我的AI情报助手

这次目标图是一张“安心记”首页截图，验收尺寸是安卓小程序常见视口：393x852 CSS px，补看 360x800 CSS px。

这个是我参考imgGen，通过提示词让codex生成的页面，实际目标视觉稿则是这样的

imgGen帮我生成UI

imgGen帮我生成UI

页面结构不复杂，但细节很多：状态栏、小程序胶囊、Logo、日期横条、快捷入口、时间线列表、底部 Tab，还有中间悬浮加号。

第一版实现看起来已经“有点像”。但一对照目标图，问题马上出来了。

使用loop-builder生成第一版

使用loop-builder生成第一版

最明显的是日期横条里选中的“星期三”卡片。目标图中应该完整显示“星期三、21、小圆点”，第一版却把下面的数字挤没了。

如果只看整体截图，这类问题很容易被忽略。但它说明了一件事：UI 复刻不能只靠感觉，要拆成可检查的组件。

当时列出的 Top 3 差异是：

1. 选中日期卡片结构错误 星期三下面的数字 21 没显示出来，头部日期区域和目标图差异很大。
2. 字体整体偏重 “安心记”“快捷入口”“时间线”和卡片标题都显得更黑、更硬，目标图里的中文更轻、更柔。
3. 字体颜色调整后又偏浅 降低字重以后，部分文字颜色不够稳。目标图的感觉更接近“轻但清楚”，需要同时调 font-weight 和颜色 token。

第二轮我没有让 Codex 大改。

只做三件事：先修日期卡片，让选中态保持稳定高度和三层内容；再降低主要中文标题的字重；最后把过浅的文字颜色往目标图靠。

修复日期卡片后：选中态恢复“星期三、21、小圆点”的三层结构

修复日期卡片后：选中态恢复“星期三、21、小圆点”的三层结构

这一轮之后，页面明显更接近目标图。

原因很简单：每次只修最影响相似度的几个差异，改完再截图。旧问题和新问题不会混在一起。

剩下的部分仍然需要人工判断。比如中文字体质感、阴影透明度、卡片背景的暖白程度、底部 Tab 的轻微浮起感，很难完全靠自动指标判断。

截图对比能发现偏差，但最后一毫米还是要人来判断：这个页面是更接近目标图，还是只是看起来也不错。

最终全屏对比：目标图和当前实现已经接近，剩余差异进入人工审美判断区

最终全屏对比：目标图和当前实现已经接近，剩余差异进入人工审美判断区

你可以怎么照着做

如果你也经常遇到“AI 复刻 UI 总是不像”，可以按这个流程试一次。

第一步，先准备目标图。

目标图可以来自 imgGen、Figma、产品截图，也可以是你手工画的页面稿。关键是它必须能被反复对照。

第二步，把任务交给 loop-builder，不要直接让 Codex 写代码。

你只要说：

帮我复刻这个 UI 视觉稿。

然后补上目标图和页面入口。让 loop-builder 先生成工作逻辑确认卡。

第三步，确认这几件事：

• 只改哪些页面和文件？
• 要不要引入新依赖？
• 优先看哪个 viewport？
• 每轮最多修几个差异？
• 什么情况必须停下来？

第四步，再把生成的执行 Prompt 交给 Codex。

执行时记住一个原则：每轮必须截图，每轮只修 Top 3。

如果你只做一次页面，保留这段 Prompt 就够了。

如果你经常做 UI 复刻，或者多个项目都要按图还原页面，再把跑通的流程沉淀成 Skill。

Skill 化以后，下次就不用反复强调“不要自由发挥”“先截图再对比”“不要顺手改业务逻辑”。这些规则会被固定下来。

想试试 loop-builder，可以看这个开源仓库

我已经把这套方法整理成一个开源项目：loop-builder。

loop-builder 开源仓库信息图

loop-builder 开源仓库信息图

它的目标很简单：把一句模糊任务，转成可控制、可验证、可停止、可交接的 Agent Loop。

你可以把它当成一个“Agent 工作流脚手架”。它不负责替你长期跑任务，也不自动改生产代码；它负责先把任务拆清楚：

• 这个任务适合一次性 Prompt，还是适合 Loop？
• 当前缺不缺关键输入？
• 应该产出 Prompt、Checklist、Loop 包、Agent 包，还是专用 Skill？
• 哪些动作必须保留给人确认？
• 怎么把一次跑通的经验沉淀成可复用资产？

这次文章里的 UI 复刻案例，也已经放进仓库里，作为代表案例：ui-visual-match-replicator。

它专门处理这类任务：

目标 UI 截图
-> 设计拆解
-> 页面实现
-> 截图对比
-> Top 差异清单
-> 修正
-> 人工验收

如果你平时也经常让 Codex、Cursor、Claude Code 按截图复刻页面，可以先从这个案例看起。

仓库里目前有这些东西：

• loop-builder Skill 本体
• 中文 / 英文 README
• quick-start 快速开始
• Prompt、Checklist、Agent 包、Skill 协议模板
• ui-visual-match-replicator 视觉复刻案例
• 安装和验证脚本

GitHub 地址：https://github.com/yangchao228/loop-builder

如果你试完以后发现某类任务特别适合做 Loop，也可以在评论区留言。我会继续把高频场景整理成可复用 Skill 模板。