AI实用工具:ProofShot给Agent装视觉验证,Webwright终端驱动浏览器

2026年6月20日

今天两个工具，一个解决了 AI Agent 写完 UI 后"谁来看一眼到底对不对"的盲区，另一个让浏览器自动化从"多 Agent 编排的复杂系统"回归到"终端 + 浏览器 + 模型"的极简范式——分别代表了 Agentic Verification 和 Terminal-Native Web Agent 两个方向的最新落点。

✦ ✦ ✦

ProofShot — 给 AI 编码 Agent 装上眼睛，让它自己验证自己写的 UI

AI Agent 写完前端代码后最大的盲区是什么？它不知道界面到底长什么样。它只能读代码、跑 lint、执行测试，但页面渲染出来对不对、按钮有没有被遮挡、表单提交后跳没跳转——这些它全看不见。ProofShot 解决了这个问题：它是一个 agent-agnostic 的 CLI 工具，让任何 AI 编码 Agent 都能在真实浏览器里验证自己写的 UI，并生成可审查的视频证据。831 GitHub stars，MIT 开源，npm 一键安装。

原理很直接：ProofShot 是架在 Vercel Labs 的 agent-browser 之上的编排层。Agent 调用 proofshot start 启动浏览器并开始录制，然后通过 proofshot exec 驱动浏览器（点击、填表、截图），最后 proofshot stop 将视频、截图、控制台错误、服务端日志打包成一个独立的 viewer.html。这个 HTML 文件可以直接贴在 PR 评论里，审查者打开就能看到 Agent 操作的完整回放——带时间线、带错误标注。

关键设计：ProofShot 本身不包含任何"验证智能"，它只是提供基础设施。AI Agent 才是验证的主体——Agent 决定测什么、怎么测、判断对不对。ProofShot 负责记录证据。这种分工让它可以对接任何能执行 shell 命令的 Agent：Claude Code、Cursor、Codex、OpenCode、Gemini CLI、Windsurf 等。

npm install -g proofshot
proofshot install

# 启动验证会话：自动启动 dev server + 打开浏览器 + 开始录制
proofshot start --run "npm run dev" --port 3000 --description "登录流程验证"

# Agent 驱动浏览器操作
proofshot exec snapshot -i          # 获取可交互元素列表
proofshot exec click @e3           # 点击元素
proofshot exec fill @e2 "admin"    # 填写表单
proofshot exec screenshot step.png # 截取关键步骤

# 停止并打包证据
proofshot stop
# 生成 proofshot-artifacts/viewer.html（视频 + 截图 + 错误 + 摘要）

# 上传到 PR
proofshot pr

HN 上 161 分的讨论中，开发者最认可的是它解决了"异步审查"的痛点：Agent 写完代码你不需要盯着屏幕看，回头打开 viewer.html 就能快进看完整个验证过程——哪些步骤对了、哪里出了错、控制台报了什么。

同类工具对比

ProofShot（今日推荐）

核心理念：Agent 驱动浏览器 + 录制证据

Agent 支持：所有执行 shell 的 Agent

证据形式：viewer.html（视频+截图+错误+时间线）

安装方式：npm install -g proofshot

热度：⭐ 831

Playwright MCP

核心理念：将 Playwright 暴露为 MCP 工具

Agent 支持：MCP 兼容客户端

证据形式：无内置证据打包

安装方式：npx @playwright/mcp

热度：⭐ 34K

agent-browser

核心理念：浏览器原语 CLI（click/navigate/screenshot）

Agent 支持：所有执行 shell 的 Agent

证据形式：无

安装方式：npx agent-browser

出品：Vercel Labs

Webwright

核心理念：终端原生 Web Agent 框架

Agent 支持：Claude Code/Codex 插件

证据形式：可重跑的 Python 脚本

安装方式：pip + plugin

热度：⭐ 5.5K

ProofShot 的独特价值不在于"能控制浏览器"——Playwright MCP 和 agent-browser 都能做到。它的价值在于证据打包：一次验证会话的所有产物（视频、截图、错误日志、时间线）被打包成一个无外部依赖的 viewer.html，直接贴到 PR 评论里，审查者不需要装任何东西就能看。对于用终端 Agent（Claude Code、Codex）而非 IDE Agent 的开发者，这是目前唯一的 UI 验证回放方案。

⭐ 831 · v1.6.0 · MIT · github.com/AmElmo/proofshot · npmjs.com/package/proofshot

Webwright — Microsoft 出品，5.5K Star 的终端原生 Web Agent 框架

大多数 Web Agent 框架的思路是：维护一个持久的浏览器会话，然后让模型预测下一步点击哪里、输入什么。这套方案的问题在于状态管理复杂、难以复现、调试困难。Webwright 走了一条完全不同的路：给模型一个终端、一个本地工作区，让它写代码来操作浏览器——每次任务最终产物是一段可独立重跑的 Python 脚本，而不是一串无法复现的浏览器操作记录。5,513 GitHub stars，Microsoft Research 出品，MIT 开源。

核心架构极其精简：三个模块——Runner（任务调度）、Model Endpoint（模型接入）、Environment（终端 + Playwright）——总共约 1,000 行核心代码，没有任何多 Agent 编排、图引擎或插件层。Agent 的工作方式是：收到任务 → 写 Playwright 脚本 → 执行 → 看结果（截图、日志、错误）→ 修正脚本 → 循环，直到任务完成。最终产物是一段参数化的、可重跑的 Python 脚本，下次执行同样的 Web 任务不需要重新推理。

2026 年 5 月新增了 Claude Code 和 Codex 插件支持，可以直接通过 /plugin install webwright@webwright 安装。插件模式下由宿主 Agent 驱动 Webwright 循环，不额外消耗 LLM API 额度。同时支持 Task2UI 模式：完成任务后自动将结果渲染成 HTML 网页应用。

pip install -e .
playwright install

# Claude Code 插件安装
/plugin marketplace add microsoft/Webwright
/plugin install webwright@webwright

# Codex 插件安装
codex plugin marketplace add microsoft/Webwright

Webwright 在 long-horizon web tasks 上取得了 SOTA 结果。与 Playwright MCP（34K stars）不同的是：Playwright MCP 是把浏览器操作暴露为 MCP 工具让 LLM 调用，适合需要持久浏览器上下文的探索性自动化场景；Webwright 则强调"每次任务都是一个独立脚本"，更适合可重复的、需要审计的、需要 CI 集成的 Web 自动化场景。二者互补而非竞争。