ProofShot

在 AI 辅助编程日益普及的今天，开发者们发现了一个尴尬的盲区：AI 智能体是“瞎”的。

它们可以熟练地编写 React 组件、调整 CSS 样式、构建复杂的表单逻辑，但它们无法看见自己写的代码在浏览器中究竟长什么样。按钮是否错位？颜色是否冲突？点击后是否有控制台报错？对于 AI 来说，这些都是未知的黑盒。传统模式下，人类开发者不得不充当“人肉测试员”，反复刷新页面、肉眼检查、截图反馈，效率极低。

ProofShot是一个开源、智能体无关的命令行工具，它通过录制浏览器会话、捕获关键截图、收集错误日志，为 AI 智能体构建了一个完整的视觉验证闭环。它让 AI 从“盲目编码”进化为“眼见为实”，并自动生成可供人类审核的完整证据包。

核心价值：终结“盲写”时代

1. 赋予 AI“视觉”能力

ProofShot 启动一个受控的浏览器实例，AI 智能体可以通过 agent-browser 命令与之交互（点击、输入、导航）。在这个过程中，ProofShot 全程录制视频并捕获截图，让 AI 的每一次操作都有据可查。

2. 自动化证据生成

不再需要人工截图拼凑报告。ProofShot 会自动生成一个包含以下内容的时间戳文件夹：

• session.webm：完整的操作过程录像。
• viewer.html：一个独立的交互式查看器，支持进度条拖拽，并同步显示浏览器控制台日志和服务器日志。报错信息会自动高亮，并与视频时间点精准对应。
• SUMMARY.md：自动生成的 Markdown 报告，汇总所有错误、关键步骤截图和视频链接。
• step-*.png：关键交互节点的高清截图。

3. 智能体原生集成

ProofShot 不仅仅是一个录制工具，它会自动安装**技能文件（Skill File）**到用户的 AI 环境（如 Claude Code, Cursor, Copilot 等）。

• 用户指令：只需对 AI 说“用 ProofShot 验证这个登录功能”。
• AI 执行：AI 会自动调用 proofshot start，驱动浏览器进行测试，拍摄截图，最后运行 proofshot stop 打包产物。全程无需人类干预。

4. 无缝对接 GitHub

生成的验证产物可以直接通过 proofshot pr 命令上传至 GitHub Pull Request，作为内联评论或检查项。Reviewer 无需拉取代码本地运行，只需打开 viewer.html 即可看到功能演示和潜在错误，极大提升了代码审查效率。

工作原理：三步构建验证闭环

ProofShot 的工作流极其简洁，完美契合 AI 智能体的执行逻辑：

第一步：启动与录制 (start)

proofshot start --run "npm run dev" --port 3000 --description "登录表单验证"

• 自动启动开发服务器。
• 打开无头/有头浏览器并开始录制。
• 挂载日志捕获器，实时监控 Server 和 Console 输出。

第二步：智能体驱动测试 (test)

AI 智能体通过 agent-browser 工具链控制浏览器：

agent-browser open http://localhost:3000/login       # 导航
agent-browser fill @e2 "test@example.com"            # 填充表单 (自动识别元素)
agent-browser click @e5                              # 点击提交
agent-browser screenshot ./proofshot-artifacts/step-login.png # 留下证据

• 智能选择器：支持通过自然语言或相对位置定位元素。
• 实时反馈：每一步操作都被记录在案。

第三步：停止与打包 (stop)

proofshot stop

• 停止录制，关闭浏览器。
• 合成视频、截图、日志，生成 viewer.html 和 SUMMARY.md。
• 输出最终报告路径。

输出产物详解

每次会话都会在 ./proofshot-artifacts/ 下生成一个带时间戳的独立文件夹，包含：

广泛兼容性

ProofShot 设计为智能体无关 (Agent-Agnostic)，只要你的 AI 工具能运行 Shell 命令，就能使用它：

• ✅ Claude Code
• ✅ Cursor
• ✅ GitHub Copilot
• ✅ Google Gemini CLI
• ✅ Windsurf
• ✅ OpenAI Codex
• ✅ 任何自定义 Agent

应用场景

• UI 回归测试：每次重构后，让 AI 自动跑一遍核心流程，确保护理未破坏现有功能。
• Bug 复现与修复：用户报告 Bug，AI 尝试复现并录制视频，修复后再录制验证视频，形成完整闭环。
• 新功能演示：开发完成后，直接生成一段功能演示视频附在 PR 中，让 Reviewer 一目了然。
• 无障碍审计：结合 AI 视觉能力，自动检查对比度、焦点顺序等无障碍问题并录制证据。