Communitygithub.com

AmElmo/proofshot

UI 功能的视觉验证。在构建或修改任何 UI 组件、页面或视觉功能后使用。启动带有视频录制和错误捕获的验证会话,然后由你驱动浏览器进行测试,最后停止并将验证工件打包供人工审阅。

proofshot 是什么?

ProofShot 是一个开源且与代理无关的命令行工具,专为 AI 编程代理设计,用于在真实浏览器中验证自身构建的 UI 工作。它通过视频录制、截图和错误报告生成完整的视觉证据包,没有任何供应商锁定。该工具支持 Claude Code、Cursor 和 Codex 等主流 AI 编码代理,通过简单的三步工作流(启动会话、驱动浏览器、停止并打包证据)帮助开发者或 AI 代理确认 UI 变更的正确性。ProofShot 还能自动将验证结果上传到 GitHub Pull Request 中,极大简化了人工审查流程。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/AmElmo/proofshot/tree/HEAD/skills/codex

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

ProofShot — 视觉验证工作流

ProofShot 是一个开源、与代理无关的 CLI 工具,让你在真实浏览器中验证自己的工作——包括视频证据、截图和错误报告,且没有供应商锁定。

何时使用

在以下情况下使用 ProofShot:

  • 构建新的 UI 功能或页面后
  • 修改现有 UI 组件后
  • 修复视觉错误后
  • 任何影响用户所见的变更后

工作流(始终遵循以下 3 个步骤)

步骤 1:启动会话

proofshot start --run "你的开发命令" --port 端口号 --description "你即将验证的内容"

此命令会打开一个浏览器并开始录制。如果端口已被占用,proofshot 会自动终止现有进程。

始终使用 --run 让 proofshot 启动并捕获你的开发服务器输出(服务器日志会显示在验证报告中)。 仅在服务器已由用户或其他进程显式启动时才省略 --run——否则不会捕获服务器日志。

如果之前的会话未正常停止,请添加 --force 覆盖它。

步骤 2:驱动浏览器并进行测试

使用 proofshot exec 进行导航、交互和验证:

proofshot exec snapshot -i                                    # 查看可交互元素
proofshot exec open http://localhost:端口号/页面                # 导航到某个页面
proofshot exec click @e3                                      # 点击按钮
proofshot exec fill @e2 "[email protected]"                    # 填写表单字段
proofshot exec screenshot step-名称.png                       # 捕获关键时刻

在重要时刻截图——这些截图将成为视觉证据。 通过读取快照输出来验证你期望看到的内容。

步骤 3:停止并打包证据

proofshot stop

此命令停止录制,收集控制台 + 服务器错误,并生成包含视频、截图和错误报告的 SUMMARY.md 文件。

步骤 4(可选):将证据发布到 PR

proofshot pr              # 从当前分支自动检测 PR
proofshot pr 42           # 指定特定的 PR 编号

此命令将截图和视频上传到 GitHub,并在 PR 上发布格式化的评论。默认情况下,它使用官方的 GitHub contents API 在名为 proofshot-artifacts 的分支上进行操作。如果你特别想要 GitHub 附件 URL,请使用 --upload-provider github-web-attachments。

提示

  • 始终包含有意义的 --description,以便人工审阅者知道测试了什么
  • 在关键操作之前和之后都要截图(例如,表单提交前、重定向后)
  • 如果在验证过程中发现错误,请修复它们并重新运行工作流
  • 停止后使用 proofshot pr 将证据直接附加到拉取请求上

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

相关技能