AI 编程 Agent 只写代码不验证效果？用 ProofShot 给 Agent 装上「眼睛」看结果
AI 编程 Agent（Claude Code、Cursor、Codex 等）写出代码后，自己是看不到运行效果的。前端功能到底长什么样、交互是否正确、有没有报错——全靠人工逐一检查。
如果 Agent 能自己启动浏览器、执行操作、录制视频、收集错误，然后把「证据包」提交给开发者审核，这个循环就真正闭环了。
ProofShot 正是解决这个问题的开源 CLI 工具。它给任何 AI 编程 Agent「装上眼睛」——Agent 写完代码后自动打开真实浏览器，录制操作视频、截取关键截图、捕获控制台错误，最终生成一份可直接附加到 GitHub PR 的验证报告。
为什么 Agent 需要「验尸报告」？
当前 AI 编码 Agent 的工作模式存在一个明显的视觉盲区：
- Agent 理解需求 → 生成代码
- 开发者审查代码 → 怀疑是否正确
- 开发者手动打开浏览器 → 测试每个功能点
- 发现问题 → 告诉 Agent → 回到步骤 1
这个循环中，AI 只参与了第 1 步，后面的 2-4 步全是人工。如果 Agent 能自动完成「运行→验证→记录→报告」的闭环，一个 15 分钟的 PR 审查工作可以压缩到 1 分钟看视频回放就够了。
ProofShot 填补的正是这个缺口——它不是一个浏览器控制工具，而是一个完整的验证工作流。
与其他方案的区别
市面上已经有 Playwright MCP、Chrome DevTools MCP 和 agent-browser 等浏览器控制工具，但 ProofShot 定位不同：
| 能力 | Playwright MCP | agent-browser | ProofShot |
|---|---|---|---|
| 浏览器控制 | ✅ | ✅ | ✅（基于 agent-browser） |
| 视频录制 | ✅ | ✅ | ✅ |
| 控制台错误捕获 | ❌ | ✅ | ✅ |
| 开发服务器日志捕获 | ❌ | ❌ | ✅ |
| 10+ 语言错误检测 | ❌ | ❌ | ✅ |
| 交互式 HTML 查看器 | ❌ | ❌ | ✅ |
| 视频同步日志回放 | ❌ | ❌ | ✅ |
| PR 评论上传 | ❌ | ❌ | ✅ |
| 视觉对比（diff） | ❌ | ❌ | ✅ |
| 跨 Agent 技能安装 | ❌ | ❌ | ✅ |
核心差异在于：Playwright MCP 等工具提供的是浏览器遥控器，而 ProofShot 提供的是验证证据流水线——把每一步操作的截图、视频、日志打包成人类可直接审查的制品。
安装与配置
ProofShot 是一个 npm 包，安装命令极为简洁：
npm install -g proofshot proofshot install
npm install -g 安装 CLI 和依赖的 agent-browser（含无头 Chromium）。proofshot install 会自动检测你机器上的 AI 编程工具（Claude Code、Cursor、Codex、OpenCode、Gemini CLI、Windsurf），并在用户级别安装 ProofShot 技能文件。
安装后无需在每个项目中单独配置——技能文件放在 ~/.claude/skills/proofshot/SKILL.md 等用户级路径下，所有项目自动生效。
如果你只想为特定工具安装：
proofshot install --only claude # 仅安装到 Claude Code proofshot install --skip cursor # 跳过 Cursor proofshot install --force # 覆盖已有安装
三步验证工作流
ProofShot 的使用模式是「start → test → stop」三步曲。
第一步：启动验证会话
proofshot start --run "npm run dev" --port 3000 --description "登录表单验证"
这条命令会：
- 打开无头 Chromium 浏览器
- 开始录制会话视频
- 捕获开发服务器的 stdout/stderr 日志
- 创建一个时间戳命名的制品目录
./proofshot-artifacts/
如果你的服务器已经在运行，可以省略 --run：
proofshot start --url http://localhost:5173 --description "检查首页 Hero 区域"
第二步：Agent 驱动浏览器测试
Agent 通过 proofshot exec 命令与浏览器交互：
proofshot exec snapshot -i 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 exec 是在 agent-browser 上包装了一层自动会话日志记录——所有操作的时序、截图路径、元素定位数据都会被自动写入 session 日志，与视频时间轴同步。
第三步：停止并获取证据包
proofshot stop
命令执行后，./proofshot-artifacts/ 目录下会生成以下制品：
| 文件 | 说明 |
|---|---|
session.webm | 整个测试过程的视频录制 |
viewer.html | 独立交互查看器，含视频条、时间轴和日志面板 |
SUMMARY.md | 包含错误摘要、截图和视频链接的 Markdown 报告 |
step-*.png | 关键步骤截图 |
session-log.json | 带时间戳和元素数据的操作时间线 |
server.log | 开发服务器 stdout/stderr |
console-output.log | 浏览器控制台输出 |
最直观的查看方式是打开 viewer.html——它是一个本地 HTML 文件，包含视频播放器、带时间戳的操作时间轴、控制台日志标签页和服务器日志标签页，所有时间轴与视频同步。
附加到 PR：让队友也能看到验证过程
本地生成的 viewer.html 对开发者自己来说足够了。但在团队协作中，你需要让 PR 审查者也能看到验证证据——proofshot pr 正是为此设计：
proofshot pr proofshot pr 42
这条命令会将视频、截图和 Markdown 报告上传到 GitHub，在对应的 PR 下生成一条内嵌截图表单的评论。如果系统中安装了 ffmpeg，视频还会从 .webm 转码为 .mp4 以获得更好的浏览器兼容性。
预览模式下可以只看生成的 Markdown 而不实际发布：
proofshot pr --dry-run
视觉回归检测
当你在不同迭代之间需要对比 UI 变化时，proofshot diff 命令可以直接比较当前截图与基准截图：
proofshot diff --baseline ./previous-artifacts
这适合在以下场景中使用：
- 重构后验证 UI 无意外变化
- 组件库升级后检查样式一致性
- 跨 PR 对比功能实现效果
实际使用场景
场景一：前端功能开发后的自动验证
开发者要求 Claude Code「实现一个用户仪表盘页面，包含订单统计图表和最近活动列表」。Agent 生成代码后不再需要人工点开浏览器测试，而是直接执行：
proofshot start --run "npm run dev" --port 3000 --description "仪表盘功能验证" proofshot stop proofshot pr
PR 审查者打开 GitHub 评论，看到一段 30 秒的视频回放和三张关键截图，加上控制台无错误的日志输出——审批流程大幅压缩。
场景二：修复 Bug 后的回归验证
Agent 修复了一个「搜索功能在某些边界条件下无响应」的 Bug。验证流程：
proofshot start --description "搜索功能修复回归验证" proofshot stop proofshot diff --baseline ./previous-artifacts
proofshot diff 确保修复没有引入意外的 UI 偏移，proofshot pr 把修复前后的对比结果同步到 PR 评论区。
场景三：多 Agent 协作的统一验证标准
当团队同时使用 Claude Code 和 Cursor 时，不同 Agent 对「验证」的理解不同。ProofShot 通过统一的技能文件规范了验证流程——不管哪个 Agent、哪个项目，「proofshot start → test → stop → pr」都是相同的标准步骤，审查者获得一致的验证报告格式。
错误检测：不止于浏览器
ProofShot 的自动错误检测覆盖 10+ 种编程语言：JavaScript/Node.js、Python、Ruby/Rails、Go、Java/Kotlin、Rust、PHP、C#/.NET、Elixir/Phoenix 等。这在处理微服务架构或多语言项目时尤其有用——前端页面的控制台错误、后端 API 的异常堆栈、构建工具的编译警告，全都会被捕获到 session 的日志中。
错误检测模式定义在 src/utils/error-patterns.ts 中，如果项目用了自定义的错误日志格式，可以自行扩展。
限制与注意事项
- 依赖 agent-browser：ProofShot 的浏览器控制能力完全基于
agent-browser，它的功能边界就是 ProofShot 的边界。如果需要高级 DOM 操作或网络请求拦截，可能需要配合 Playwright MCP 使用。 - 仅限本地运行：ProofShot 目前只能直接操作本地运行的开发服务器。对于已部署的远程环境，需要额外配置隧道或 VPN。
- 视频文件大小：长时间会话的
.webm视频可能较大（一次完整的 CRUD 测试约 50-100MB），上传到 GitHub PR 时需要注意文件大小限制。 proofshot install需要写权限：在 CI/CD 流水线等受限环境中，安装技能文件需要~/.claude/等目录的写权限，可能需要手动配置。
总结
ProofShot 把「AI Agent 生成代码」到「人类审查效果」之间的视觉断点连接了起来。它不是一个花哨的浏览器自动化工具，而是一个严格定义了验证产出格式的工作流工具——Agent 负责写和测，ProofShot 负责录和报，人类只看证据做决定。
对于团队中 AI 编码 Agent 使用频次高、但又担心「Agent 写的代码到底能不能跑」的开发者来说，ProofShot 提供的这三步流程是一个低成本的验证闭环方案。MIT 许可、835 ⭐ 的开源社区、支持 7 种主流 AI 编程工具，当前生态已经成熟到可以直接用起来。
相关链接