Vibe Coding 仿照 Cursor 做了一个跑步的年度总结

2025年12月29日星期一

Cursor 出了年度报告后，就一直想仿照它的 UI 出一个跑步的年度报告，正好刷到 Yihong 的推文，已经把数据统计做了。那剩下的工作就只有 UI 部分了，于是便有了如下年度总结：

https://running.loongphy.com/2025

本次仅对开发该年度总结的过程做个大致的经验总结，详细的 Vibe Coding 经验可以期待下后续更新的 2025 总结。

核心出装：Chrome DevTools MCP

它是专门针对 Chromium 浏览器的 MCP，支持通过 CDP 对你的浏览器做一些自动化操作，比如：截图、页面的点击、获取控制台输出等等。

有了它，我们赋予了 Coding Agent 读写网页的能力，也是我们能完成复制 cursor.com/2025 样式的核心工具。

Codex 配置

为我们的 Codex 简单配置下：

[mcp_servers.chrome-devtools]
command = "npx"
args = ["chrome-devtools-mcp@latest", "--browserUrl=http://localhost:9222"]
startup_timeout_sec = 30

指定 BrowserUrl 是因为我们想让 MCP 使用我们指定的浏览器，只有在那个浏览器上我们登录了 cursor，该有对应的年度总结数据。

对应的浏览器启动时也需要开启调试端口，与 Codex 配置对应，Powershell 为例：

& "${env:ProgramFiles(x86)}\Microsoft\Edge\Application\msedge.exe" `
  --remote-debugging-port=9222 `
  --user-data-dir="${env:TEMP}\edge-9222"

此时启动 Codex，我们的 chrome-devtools 就能操作 Edge 浏览器了。

one-shot

现在的 Coding Agent 的 one-shot 能力真的很惊艳，但这绝不就意味着能替代现有工程师，它的工程能力依旧问题很多。

输入我们的第一个 Prompt，借助 chrome-devtools，Codex 能实现一个大致的效果。

实现一个跑步数据的年度总结动态交互网站，参考网站 https://cursor.com/cn/2025 所示，样式交互都必须与该网站保持一致：

- 该网站是一个动态的网站你可以space键进行进入下一页
- 每一页的内容都替换成我们的实际跑步数据，展示我们的按月纵向显示的跑步数据 grid
- 使用 chrome-devtools 去查看该网站，生成截图，查看源码、样式、交互，包括不限于：
    - 首次加载的样式、字体动画等
    - 进入网页后对应的动效等

其中跑步数据来自于 https://github.com/yihong0618/running_page，你也可以 fork 该仓库，针对你的跑步手表获取跑步数据，构建一个跑步网站，具体配置不做介绍。

问题

尽管首个 Prompt 跑了2小时不到就出了大致效果，但后续的微调花了好几天的时间，比如：字体太小、间距太小，鼠标悬停样式没做等等。

大致过程如下：

当前对话：第三次 1h 31m 23s 

样式有些单一，不要全是这种[PixPin_2025-12-24_08-23-53.png 1117x1429]
  请你使用 chrome-devtools 对参考网站 https://cursor.com/cn/2025 截图、获取原有的每个交
  互阶段的源码等方式，参考他们的多种交互。

  按照如下实现方式，继续更新 PLAN.md，然后继续迭代，注意把迭代后的每个阶段截图与参考
  截图对比，直至大致相同，80% 以上相似。

第四次 39m 18s 

根据如下要求调整你的 PLAN.md：
# 还原度提升/对齐视觉

- UI布局、动态交互、配色等统一参考 https://cursor.com/cn/2025 ，不要受本地项目影响。更新 PLAN.md 中的目标：点阵配色与卡片字体进一步对齐 https://cursor.com/cn/2025 而非 assets/year_summary_2025.svg
- 请是采用 chrome-devtools 截图本地运行的 http://localhost:5173/2025 ，目前UI主体显示太小了，而且不在中间位置，请你重新比对 https://cursor.com/cn/2025 修改调整。

# Stage 调整

> space/enter/向下箭头切换stage，左右箭头图标是切换stage中的每次跑步数据的。

- Stage 1: 
1. 首次进入，文字依次动画交互显示
2.每个有数据的竖条都可以悬浮显示对应的跑步距离数据，左右箭头图标切换的是上一次跑步和下一次跑步的高亮竖条，请你使用 chrome-devtools 点击 https://cursor.com/cn/2025 的stage1 图标 <div class="timeline-nav-button"/> 查看。 
- Stage 2: 显示周数据，样式有些小，无左右切换图表，对齐 https://cursor.com/cn/2025
- Stage 3: 日跑量动画，动态滚动的竖条，每个点都是跑步天的跑量，竖条向右划过的都是每个跑步天的跑量。左右箭头图标切换的是上一次跑步和下一次跑步的高亮竖条。如果无法通过 chrome-devtools 查看，我可以后续提供视频。
- Stage 4: 符合预期，但是文字可以motion动画显示，依次淡入
- Stage 5: 推到 Stage 6。新的 stage 5 显示 grid 形式2025年的日跑量数据，如图所示 @stage-5.png，你可以使用chrome-devtools 捕获这一时刻的截图、源码和样式。
- Stage 6（原 Stage 5）: 样式需要大改，样式参考 https://cursor.com/cn/2025

此时我意识到，文本对话指导 Codex 已经失控了，它只能机械的服从我的指令，却不知道我为什么要这么做。

这也是 Vibe Coding 中越到后期越失控的原因。

识别图片

之前的指令没有让 Codex 显式读取图片，只是根据指令更新了代码，但并没有查看更新后的效果，因此人工验收时可能会有一些明显错位等问题需要改正。我们让 Codex 每次执行完都检查一遍图片，并让 Gemini-CLI 也参与进来。

更新我们的 AGENTS.md:

## 工具使用
- 浏览器验证：使用 chrome-devtools（不要用肉眼猜测 UI）。
- 使用 gemini 做视觉比对时，必须在提示词中同时附上当前图与参考图的绝对路径。
 gemini -p "your_prompt @<图片绝对路径> " --allowed-tools read_file

## Visual verification gate (NON-NEGOTIABLE)

<persistence>
- Keep going until the task is completely resolved.
- Only terminate when the "Definition of Done" is satisfied.
- Do NOT stop after merely viewing screenshots; viewing is not verification.
</persistence>

<definition_of_done>
- Done ONLY when the latest visual verification returns PASS.
- If visual verification returns FAIL, you MUST fix code and re-run the loop.
- If you cannot verify (tool/image missing/corrupted), treat it as FAIL and explain the blocking reason + best next step.
</definition_of_done>

<visual_verification_loop>
After EVERY code change that could affect UI:
1) Use chrome-devtools to navigate to the exact path relevant to this change.
2) take_screenshot → save under artifacts/ (name should include viewport: mobile/desktop).
3) Open/read the screenshot(s).
4) Output a Visual Verification Report (format below).
5) If FAIL → return to code, fix, then repeat from step 1.
</visual_verification_loop>

<visual_verification_report_format>
You MUST end the turn with the following block (no exceptions):

VISUAL_VERIFY: PASS | FAIL
Screenshots:
- <list every file you used for the verdict>
Evidence:
- <1–3 concrete visual facts you observed that prove you actually read the screenshots>
Reasons:
- <why PASS or why FAIL, short and specific>
Next:
- If PASS: "Done"
- If FAIL: <the next fix you will do immediately>
</visual_verification_report_format>

至此，大致完工。

随想

没有一个大而全的 AGENTS.md 可供参考，甚至在项目最开始你的 AGENTS.md 应该是空的。根据你的 Agent 完成的任务而去相应的调整 AGENTS.md：

增加对执行过程的限制：如上面提到的读取图片分析

Vibe Coding 很难通过自然语言去精确掌控指定的组件，所以 Cursor 加了个内置 Browser，增加了光标组件选择。

又在后续 2.2 版本增加了样式编辑器，目的就是为了精确把控 UI。尽管引来群嘲，但我认为这些根本不是想取代 Figma 之类的设计软件，而是为了降低自然语言编程不确定性的一种方式。在对话时，AI 也会忘记全局，让它调整某个单独的内容，它可能把整体都改了。或者说不是 AI 改的全局，而是我指出要改哪部分，它改了后发现影响了全局。这种现象经常在古法编程中出现，只不过现在有了一个可以指责的对象。不是 AI 太笨，是我太蠢。

在 X 上讨论