给AI编程Agent装上眼睛:ProofShot开源可视化工具完全介绍

发布时间:2026/10/25 7:03:13

给AI编程Agent装上眼睛:ProofShot开源可视化工具完全介绍 【免费下载链接】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),仅供参考
延伸阅读

更多相关文章

2026/10/25 7:03:13

AI实时绘画技术解析:从原理到商业应用

1. 项目概述:AI实时绘画的跨界革命去年夏天在上海某商场的一场品牌快闪活动中,我亲眼见证了AI实时绘画的魔力:当孩子们在数位板上随意涂鸦时,大屏幕上的AI系统实时将潦草线条转化为精美的海底世界,现场排队体验的人群一…

2026/10/25 7:03:13

可编程AI场控系统:直播技术革命与工程实践

1. 项目概述:可编程直播系统的技术革命直播行业正在经历从"人力密集型"向"技术驱动型"的转型。传统直播依赖人工场控的弊端日益凸显:人力成本高、反应速度慢、风格固化。我们团队开发的这套可编程AI场控系统,通过模块化设…

2026/10/25 7:48:15

pstack-claude:构建Claude工作流栈的工程化实践

1. 从 pstack-claude 这个标题说起:它到底想解决什么问题第一次看到pstack-claude这个项目名,我的直觉是:这大概率是一个把 Claude 系列模型能力做“栈式封装”的工具或脚手架。pstack这个词本身带有“process stack”“prompt stack”或者“…

2026/10/25 7:48:15

MCP协议聚合多家大模型:2026年Python网关开发七步实战

MCP协议正在成为AI工具间的事实标准。如果把各家大模型API的差异屏蔽在网关层、统一成MCP协议接口,客户端就能用一套调用方式按需切换模型。本文用Python从零实现这样一个MCP网关,把OpenAI GPT、Anthropic Claude、百度文心等模型的调用收进同一个服务端…

2026/10/25 7:48:15

2026年大模型API聚合平台国内外选型:直连、计费与接入教程对比

API聚合平台充当开发者与大模型厂商之间的中间层:一个密钥聚合调用GPT、Claude、Gemini与国产模型,免去逐家注册、管理多组密钥的麻烦。对国内用户来说,它还要解决直连海外服务不稳定、支付困难这两个现实问题。本文把国际代表OpenRouter与国…

2026/10/25 7:48:15

扫码标签价格由材料、工艺和数量怎样决定?

扫码标签价格不能只看“每张几分钱”。材料、尺寸、印刷方式、隐藏或防揭结构、订单数量、检测要求与交付形式,都会影响成本。一物一码标签还包含可变码数据的印制与核对;同样大小的标签,如果使用环境、码保护方式和检测责任不同,…

2026/10/25 7:43:15

高负载接口优化:字段选择与懒加载实践

1. 高负载详情接口的典型痛点分析在电商、社交、内容平台等互联网应用中,详情页接口往往承担着极高的流量压力。以我参与过的一个跨境电商项目为例,商品详情接口在促销期间QPS峰值达到12万次/秒,响应时间从平时的50ms飙升到800ms以上。通过火…

2026/10/25 0:02:22

全国计算机二级C语言真题PDF高效刷题指南

简介:这份PDF是全国计算机二级C语言考试的试题与答案解析,专为备考二级C语言的考生准备。内容涵盖C语言特点与设计理念、程序基本组成单位、main函数执行流程、函数嵌套调用规则、标识符命名规范、整型实型字符型数据类型、八进制十六进制数合法形式、运…

2026/10/25 0:02:23

requests+BeautifulSoup:爬虫抓取h1标题的入门实战指南

简介:一份以实战为导向的Python爬虫入门资源,面向具备基本编程基础、希望快速掌握网络数据抓取的初学者,可解决从零编写简单爬虫的常见困惑。实例以requests库发送HTTP请求、BeautifulSoup解析HTML文档,完整演示从网页中提取 标题…

2026/10/25 0:02:23

递推最小二乘参数辨识MATLAB编程:二阶系统与渐消记忆实现

简介:这是一篇面向控制系统、信号处理与机器学习等领域学习者的最小二乘参数辨识程序说明文档。资源共包含一个docx格式文档,压缩包大小七十八KB,内容围绕递推最小二乘算法和渐消记忆最小二乘算法展开:先构造一个极点位于单位圆内…

2026/10/25 0:02:22

全国计算机二级C语言真题PDF高效刷题指南

简介:这份PDF是全国计算机二级C语言考试的试题与答案解析,专为备考二级C语言的考生准备。内容涵盖C语言特点与设计理念、程序基本组成单位、main函数执行流程、函数嵌套调用规则、标识符命名规范、整型实型字符型数据类型、八进制十六进制数合法形式、运…

2026/10/25 0:02:23

requests+BeautifulSoup:爬虫抓取h1标题的入门实战指南

简介:一份以实战为导向的Python爬虫入门资源,面向具备基本编程基础、希望快速掌握网络数据抓取的初学者,可解决从零编写简单爬虫的常见困惑。实例以requests库发送HTTP请求、BeautifulSoup解析HTML文档,完整演示从网页中提取 标题…

2026/10/25 0:02:23

递推最小二乘参数辨识MATLAB编程:二阶系统与渐消记忆实现

简介:这是一篇面向控制系统、信号处理与机器学习等领域学习者的最小二乘参数辨识程序说明文档。资源共包含一个docx格式文档,压缩包大小七十八KB,内容围绕递推最小二乘算法和渐消记忆最小二乘算法展开:先构造一个极点位于单位圆内…

还想了解更多?直接咨询顾问

免费诊断 + 免费方案 + 透明报价。

全国咨询热线400-8866-253
免费获取方案
☎咨询二维码 ☎ ↑