AI写代码但看不见页面？这个工具帮你闭合验证环

来源：Hacker News ｜ 阅读时间：约 6 分钟

用过 Claude Code、Cursor 或 Codex 的朋友大概都有这样的体验：AI Agent 帮你写完一段前端代码，你兴冲冲地打开浏览器一看——布局乱了、按钮点不动、控制台一片红。

问题是，Agent 本身完全不知道这些。它写完了代码，完成了逻辑，但对「页面长什么样」「交互是否正常」这件事，它是个盲人。

这就是 AI 编程 Agent 当前一个颇为尴尬的「盲区」——它能写代码，却看不到运行效果。

最近在 Hacker News 上看到一个叫 ProofShot 的开源项目，做的事情正好是给 Agent 装上「眼睛」。

ProofShot 是什么

ProofShot 是一个开源的 CLI 工具，核心能力可以用一句话概括：让 AI 编程 Agent 自动打开浏览器、截图、录屏、收集控制台错误，然后打包成一份 HTML 验证报告。

它的工作流非常清晰，三步走：

① start — 启动浏览器、开始录屏、捕获服务器日志② test — Agent 操控浏览器执行测试操作③ stop — 停止录屏，收集截图和错误，生成验证产物 

它底层依赖的是 Vercel Labs 开源的 agent-browser（一个专为 AI Agent 设计的浏览器自动化 CLI，内置无头 Chromium），在此基础上做了验证工作流的编排和报告生成。

项目目前 245 个 Star，MIT 协议，用 TypeScript 编写，npm 周下载量也在稳步增长。

它解决了什么问题

让我们还原一下传统的 AI 辅助开发流程：

 1. 给 Agent 描述需求 2. Agent 写完代码 3. 你手动打开浏览器 4. 你手动点击各个页面检查 5. 你手动打开 DevTools 看控制台 6. 发现问题，你手动截图发给 Agent 7. Agent 修完，你再重复步骤 3-6 

注意到没有？步骤 3 到 6 全是人工操作。AI Agent 写代码的能力已经很强了，但验证环节完全依赖人类。这就像一个厨师做好了菜，但没法自己尝味道。

ProofShot 做的事情就是把这个环闭合了——Agent 写完代码后，自己打开浏览器、自己操作、自己截图、自己收集错误，最后把所有证据打包好交给你审阅。

你不再需要反复手动刷新页面，只需要看一份带视频回放和错误标注的报告。

快速上手

安装极其简单，两行命令搞定：

 npm install -g proofshot proofshot install 

第一条安装 CLI 和 agent-browser（含无头 Chromium），第二条会自动检测你机器上已安装的 AI 编程工具，然后把 ProofShot 的 skill 文件写入对应位置。

它支持的 Agent 相当全面：

安装完成后，在你的项目目录里对着 Agent 说一句就行：

 💬 “用 ProofShot 验证这个功能”

Agent 就会自动执行 start → 浏览器操作 → stop 的完整流程，不需要你写任何脚本。

如果你想手动体验，可以这样：

 # 启动验证会话 proofshot start –run “npm run dev” –port 3000 –description “登录功能验证” # Agent 操控浏览器（也可以手动执行） proofshot exec open http://localhost:3000/login proofshot exec fill @e2 “test@example.com” proofshot exec click @e5 proofshot exec screenshot step-login.png # 停止并生成报告 proofshot stop 

使用体验：报告长什么样

每次验证会话会在 ./proofshot-artifacts/ 目录下生成一个带时间戳的文件夹，包含：

• session.webm
  
   — 完整操作录屏
• viewer.html
  
   — 交互式查看器，带时间轴拖拽、动作标记、控制台/服务器日志 Tab
• SUMMARY.md
  
   — Markdown 报告，包含截图、视频和错误汇总
• step-*.png
  
   — 关键时刻的截图
• console-output.log
  
   — 浏览器控制台输出
• server.log
  
   — 开发服务器日志

其中 viewer.html 是一个亮点。它是一个独立的 HTML 文件，不需要任何服务器，直接在浏览器打开就能看。有视频播放器、可拖拽的时间轴、控制台错误高亮、时间戳同步——基本上就是一个本地的「测试回放器」。

还有一个实用的命令 proofshot pr，可以把验证产物直接上传到 GitHub PR 作为评论。代码审查的时候，PR 上直接附带了一段操作录屏和截图，审阅体验相当不错。

另外 proofshot diff 命令支持视觉回归测试——拿当前截图和基线截图做对比，发现 UI 变化。对于组件库或设计系统维护者来说，这个功能挺有价值。

一些延伸思考

1. Agent 能力的边界正在被扩展

ProofShot 代表了一个有意思的趋势：AI Agent 的能力不是只靠模型升级来提升的，更多时候是靠「工具链」的补全。Agent 本身不会操作浏览器，但通过 agent-browser 这个中间层，它获得了新的感知维度。类似地，Agent 本身不会执行测试，但通过 ProofShot 的 skill 文件，它学会了验证工作流。

也许以后的 AI 编程工作流会变成：写代码 → 自动验证 → 自动修复 → 再验证，形成一个完整的闭环，人类只在关键节点做决策。

2. 轻量级验证 vs 重量级测试

ProofShot 和 Cypress、Playwright 这类测试框架的定位不太一样。它不是用来替代 E2E 测试的，更像是一种「快速视觉验收」——Agent 写完代码，录一段操作视频，截图几个关键页面，人工看一眼就完事。速度快、门槛低、反馈即时。

在快速迭代的开发场景下，这种轻量级验证的效率优势相当明显。

3. 开源工具链的价值

ProofShot 完全开源、无 vendor lock-in、无云端依赖，所有产物都存在本地。它建立在 agent-browser（也是 Vercel 开源的）之上，形成了一个开放的工具生态。对于不希望把代码和测试数据上传到第三方平台的团队来说，这种本地优先的方案有不小的吸引力。

如果你正在用 AI Agent 写前端代码，不妨花几分钟装一下试试。毕竟，让 Agent 自己看到它写的页面长什么样，这件事本身就挺酷的。

 📎 项目地址：github.com/AmElmo/proofshot 📦 安装：npm install -g proofshot 📄 协议：MIT