★ FEATURED ARTICLE 【免费下载链接】proofshotGive AI coding agents eyes. Records browser sessions, captures screenshots, collects errors, and bundles proof artifacts — so humans can verify what the agent built.项目地址https://gitcode.com/gh_mirrors/pr/proofshot点击查看免费下载ProofShot 是一款开源、跨平台的AI 编程 Agent 可视化验证工具。它通过命令行接入真实浏览器自动录制验证过程、截取关键截图、收集控制台与服务端错误最终打包成一套可直接审查的证据产物proof artifacts——让人类能直观确认 AI Agent 构建的功能是否真的可用。为什么需要 ProofShotAI Agent 的盲测困境AI 编程 Agent 写代码很快但它们有个共同问题看不见。Agent 写完一个登录页或仪表盘却无法确认页面是否正确渲染、点击是否生效、控制台有没有报错。结果对不对最终还得靠人打开浏览器手动检查。ProofShot 补上了这个闭环录制验证视频——真实浏览器中的完整操作过程关键步骤截图——在重要时刻自动捕获错误收集——覆盖浏览器控制台日志 开发服务器日志打包成产物——一份 HTML 交互查看器 Markdown 报告几秒内完成审查它与 Claude Code、Cursor、Codex、OpenCode、Gemini CLI、Windsurf、GitHub Copilot 等 Agent 兼容——只要 Agent 能执行 shell 命令就能接入无供应商锁定、无云依赖。5分钟完成ProofShot安装与配置安装只需两条命令需 Node.js 18npm install -g proofshot proofshot install第一条命令安装 CLI 及底层浏览器引擎 agent-browser含无头 Chromium第二条命令自动检测你机器上的 AI 工具并以用户级安装 ProofShot 技能文件——一次安装所有项目自动生效无需逐项目配置。技能文件就是教 Agent 使用 ProofShot 的说明书仓库中可以看到各平台的版本例如通用版 skills/generic/PROOFSHOT.md、Claude 版 skills/claude/SKILL.md、Cursor 版 skills/cursor/proofshot.mdc。装好后你只需对 Agent 说一句话比如用 proofshot 验证登录页启动开发服务器检查表单渲染填写凭据并提交每步截图。剩下的全部由 Agent 自动完成。三步完成一次完整验证ProofShot 的核心工作流只有三步start → test → stop。# 1. 启动会话打开浏览器、开始录屏、捕获服务器日志 proofshot start --run npm run dev --port 3000 --description 登录功能验证 # 2. 测试阶段AI Agent 驱动浏览器snapshot 查看元素、点击、填表、截图 proofshot exec snapshot -i proofshot exec fill e2 testexample.com proofshot exec click e5 proofshot exec screenshot step-login.png # 3. 停止打包视频 截图 错误报告 proofshot stop几个设计细节值得一提稳定的元素引用e2、e5这类引用比 CSS 选择器更适合 AI 驱动操作快照一次即可反复定位元素自动视频剪辑若系统安装了 ffmpegproofshot stop会剪掉操作前后的死时间保留首动作前 5 秒、末动作后 3 秒所有时间戳同步修正优雅降级缺少 ffmpeg 就跳过剪辑非关键失败不会中断会话多语言错误检测内置 10 语言的服务器日志错误模式可在 src/utils/error-patterns.ts 中扩展新语言完整架构说明见 docs/architecture.md。查看ProofShot生成的验证产物每次验证会话结束后会在./proofshot-artifacts/下生成一个带时间戳的文件夹文件内容session.webm整个会话的视频录制viewer.html独立交互式查看器进度条 时间线 日志页签SUMMARY.md含错误、截图和视频的 Markdown 报告step-*.png关键时刻的截图session-log.json带时间戳的操作时间线server.log/console-output.log服务器与浏览器控制台输出其中最有价值的是viewer.html——零外部依赖任何浏览器直接打开即可审查左侧是带操作标记点的进度条点击任意标记即可跳转到对应时刻右侧时间线列出每一步操作快照、点击、填表、截图及其时间戳右上角徽标显示控制台与服务端错误数绿色即干净通过。视频上还会叠加点击涟漪、滚动指示等动画让审查过程一目了然。查看器还提供 TIMELINE / CONSOLE / SERVER 三个页签日志按时间戳排序并与视频回放同步播放视频时当前操作会自动高亮并滚动到视野内。关于查看器的完整功能介绍见 content/docs/concepts/interactive-viewer.mdx。一键把验证证据发布到 GitHub PR验证完的功能还需要让团队看见。proofshot pr会把当前分支的所有会话产物上传到仓库并在 Pull Request 中自动发布一条带截图的格式化评论proofshot pr # 自动识别当前分支对应的 PR proofshot pr --dry-run # 只预览评论内容不实际发布ProofShot 会在start时把 git 分支与 commit 写入metadata.jsonpr命令据此精确匹配会话。若安装了 ffmpeg.webm视频还会自动转码为.mp4保证在 GitHub 上正常播放。发布前的常见问题与排障方法见 content/docs/guides/post-to-pr.mdx。常用命令速查命令作用proofshot install检测 AI 工具并安装技能文件proofshot start启动验证会话可用--run同时拉起开发服务器proofshot exec args透传浏览器操作并自动记录时间线proofshot stop停止录制并生成全部产物proofshot diff对比基线截图做视觉回归检查proofshot pr上传产物并评论到 PRproofshot doctor打印环境诊断信息proofshot clean清理产物目录所有参数的详细说明见 content/docs/reference/cli.mdx如需自定义端口、视口大小、输出目录可创建可选的 proofshot.config.jsonCLI 参数 配置文件 内置默认值的优先级覆盖。动手体验跟着示例项目上手仓库自带三个示例应用SaaS 仪表盘、看板、聊天界面无需自己的项目即可端到端体验git clone https://gitcode.com/gh_mirrors/pr/proofshot cd proofshot npm install npm run build npm link cd test/fixtures/sample-app npm install然后在sample-app目录中打开你的 AI Agent输入用 proofshot 验证示例应用检查首页 hero 区进入 Dashboard 查看指标再到 Settings 修改资料名每页截图。完成后打开proofshot-artifacts/视频、截图和报告就在那里。更多示例与提示词见 docs/test-apps.md。总结把它说做完了变成给你看它做完了ProofShot 用极简的三步工作流start → test → stop解决了 AI 编程 Agent 的验证盲区它不替代 Playwright MCP 之类的调试工具而是专注于为人类打包可审查的证据——视频、截图、错误报告一应俱全还能直接挂到 PR 上。对于正在使用 AI Agent 做前端开发、又苦于盲信结果的团队和个人这套开源工具是目前很轻量也很完整的选择。 快速上手content/docs/quick-start.mdx️ 架构与原理content/docs/concepts/how-it-works.mdx❓ 常见问题content/docs/faq.mdx赞分享【免费下载链接】proofshotGive AI coding agents eyes. Records browser sessions, captures screenshots, collects errors, and bundles proof artifacts — so humans can verify what the agent built.项目地址https://gitcode.com/gh_mirrors/pr/proofshot点击查看免费下载相关推荐3 分钟给 Agent 装上眼睛agent-vision-toolkit 一句话安装实战教程3 分钟给 Agent 装上眼睛agent vision toolkit 一句话安装实战教程 agent vision toolkit 是一款为纯文本大模型设人工智能AI 技能计算机视觉OCRGUI 自动化大模型DeepSeek给 AI 编程助手装上数据库眼睛OpenCode 连接 MySQL 实操全攻略给 AI 编程助手装上数据库眼睛OpenCode 连接 MySQL 实操全攻略 最近开源圈最热闹的一件事就是 AI 编程助手 OpenCode 的爆火。人工智能AI Agent代码智能体AI 应用开发工具CLIcapcap agent 工具指南给 AI 代理装上「眼睛和手」命令行截图与自动标注capcap agent 工具指南给 AI 代理装上「眼睛和手」命令行截图与自动标注 capcap 是一款轻量级的原生 macOS 菜单栏截图工具而 ca创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
