下面 token 数据是 ccusage 生成。
1. 原始需求
我基于 Vue 重新设计了一套页面 UI ，整体页面结构与现有版本基本一致，但在样式上做了较多微调，涉及 6–7 个文件。
这套 UI 只包含渲染逻辑，不包含任务逻辑，可以理解为一份 Vue 版本的“设计稿”。
而原始项目是用 React 编写的，内部承载了完整的业务逻辑，因此在调整 UI 时，不应该触动业务逻辑。
我的目标是：在 React 项目中，还原出 Vue 版本的 UI 效果。
2. 实现思路
我没有直接手动改 UI ，而是选择让 AI + 测试驱动来完成这件事：
[ol]
先让 AI 编写一个 E2E 测试：
对两个页面进行自动截图，并进行图片 diff：
写一个 loop ，在我睡觉前启动：
[/ol]
3. 最终结果
早上起床收菜。
React UI 成功对齐 Vue 设计稿。
整个过程无需人工干预，最终效果完全达到预期 🚀
4. 补充说明（成本 & 运行情况）
这次实验的代价也非常“真实”：
根据 /context 输出：
其中：
👉 主要消耗来源：
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% 左右。
