企业官网建设流程全解析

ProofShot 是一款开源、跨平台的AI 编程 Agent 可视化验证工具。它通过命令行接入真实浏览器，自动录制验证过程、截取关键截图、收集控制台与服务端错误，最终打包成一套可直接审查的"证据产物"（proof artifacts）——让人类能直观确认 AI Agent 构建的功能是否真的可用。

为什么需要 ProofShot：AI Agent 的"盲测"困境

AI 编程 Agent 写代码很快，但它们有个共同问题：看不见。Agent 写完一个登录页或仪表盘，却无法确认页面是否正确渲染、点击是否生效、控制台有没有报错。结果对不对，最终还得靠人打开浏览器手动检查。

ProofShot 补上了这个闭环：

• 🎥录制验证视频——真实浏览器中的完整操作过程
• 📸关键步骤截图——在重要时刻自动捕获
• 🐛错误收集——覆盖浏览器控制台日志 + 开发服务器日志
• 📦打包成产物——一份 HTML 交互查看器 + Markdown 报告，几秒内完成审查

它与 Claude Code、Cursor、Codex、OpenCode、Gemini CLI、Windsurf、GitHub Copilot 等 Agent 兼容——只要 Agent 能执行 shell 命令，就能接入，无供应商锁定、无云依赖。

5分钟完成ProofShot安装与配置

安装只需两条命令（需 Node.js 18+）：

npm 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 "test@example.com" proofshot exec click @e5 proofshot exec screenshot step-login.png # 3. 停止：打包视频 + 截图 + 错误报告 proofshot stop

几个设计细节值得一提：

• 稳定的元素引用：@e2、@e5这类引用比 CSS 选择器更适合 AI 驱动操作，快照一次即可反复定位元素
• 自动视频剪辑：若系统安装了 ffmpeg，proofshot stop会剪掉操作前后的"死时间"（保留首动作前 5 秒、末动作后 3 秒），所有时间戳同步修正
• 优雅降级：缺少 ffmpeg 就跳过剪辑，非关键失败不会中断会话
• 多语言错误检测：内置 10+ 语言的服务器日志错误模式，可在 src/utils/error-patterns.ts 中扩展新语言

完整架构说明见 docs/architecture.md。

查看ProofShot生成的验证产物

每次验证会话结束后，会在./proofshot-artifacts/下生成一个带时间戳的文件夹：

其中最有价值的是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.json，pr命令据此精确匹配会话。若安装了 ffmpeg，.webm视频还会自动转码为.mp4，保证在 GitHub 上正常播放。发布前的常见问题与排障方法见 content/docs/guides/post-to-pr.mdx。

常用命令速查

所有参数的详细说明见 content/docs/reference/cli.mdx；如需自定义端口、视口大小、输出目录，可创建可选的 proofshot.config.json，CLI 参数 > 配置文件 > 内置默认值的优先级覆盖。

动手体验：跟着示例项目上手

仓库自带三个示例应用（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