一觉醒来 UI 全自动对齐： AI + E2E 的奇妙实践

本文为真实经历，使用微信语音口述，然后 chatgpt 协助整理排版。 下面 token 数据是 ccusage 生成。

1. 原始需求

我基于 Vue 重新设计了一套页面 UI ，整体页面结构与现有版本基本一致，但在样式上做了较多微调，涉及 67 个文件。 这套 UI 只包含渲染逻辑，不包含任务逻辑，可以理解为一份 Vue 版本的“设计稿”。

而原始项目是用 React 编写的，内部承载了完整的业务逻辑，因此在调整 UI 时，不应该触动业务逻辑。

我的目标是：在 React 项目中，还原出 Vue 版本的 UI 效果。

2. 实现思路

我没有直接手动改 UI ，而是选择让 AI + 测试驱动来完成这件事：

1. 先让 AI 编写一个 E2E 测试：

   • 分别在本地构建 Vue 和 React 页面
   • 使用 Playwright 打开两个页面
   • 通过 JS 操作页面，让两边展示相同内容（保证“可比性”，即内容一致，仅样式不同）

2. 对两个页面进行自动截图，并进行图片 diff：

   • 计算视觉相似度
   • 标记像素差异

3. 写一个 loop ，在我睡觉前启动：

   • AI 根据 diff 结果自动修改 React UI
   • 持续迭代，直到测试通过（即视觉差异收敛到可接受范围）

3. 最终结果

早上起床收菜。

React UI 成功对齐 Vue 设计稿。

整个过程无需人工干预，最终效果完全达到预期

4. 补充说明（成本 & 运行情况）

这次实验的代价也非常“真实”：

• ccusage 花费约 200 美元

根据 /context 输出：

• 当前 session 使用约 300k tokens（占 1M 上下文窗口的 30%）

其中：

• 系统提示：5.8k tokens
• 系统工具：8.5k tokens
• 记忆文件：37 tokens
• Skills：507 tokens
• 消息内容：284.8k tokens （占绝大部分）

主要消耗来源： Ralph Loop 的反复迭代

任务完成后，由于 stop hook 没有正确终止，循环仍然持续触发，累计执行了数百次：

Stop says: Ralph iteration 1466 | No completion promise set - loop runs infinitely 

5. 费用明细

│ Date │ Models │ Input │ Output │ Cache Create │ Cache Read │ Total Tokens │ Cost (USD) │ │ 2026-03-19 │ - haiku-4-5 │ 10,311 │ 31,789 │ 710,709 │ 422,494,228│ 423,247,037 │ $268.22 │ │ │ - opus-4-6 │ │ │ │ │ │ │ 

6. 额外补充

我使用的是 claude code max 订阅。

其中 Cache Read 是免费的，因此虽然账面上有较高的 token 消耗，但实际成本并没有那么高。

整体来看，大约消耗了 5 小时 token 限额的 5% 左右。