浏览器批注 & 截图标注 → AI 工具全景调研

2026-06-29 3 子 Agent 并行交叉验证 · GitHub · Reddit · MCP 生态 · Chrome Store

本报告调研了 2026 年 6 月所有可用于「浏览器批注网页 / 屏幕截图标注 → 发送给 AI Agent 分析」的工具。采用 3 个子 Agent 并行交叉验证，覆盖 GitHub、Reddit (r/ClaudeAI, r/AI_Agents, r/SideProject, r/webdev)、Chrome Web Store、Glama MCP 目录、Smithery、YouTube、ProductHunt 等渠道。

项目概述

用户需求：在浏览器中浏览网页时批注（高亮/笔记/箭头/框选），然后将批注连同上下文发送给 AI 进行分析。这是一个三环节工作流：

flowchart LR
    A[浏览网页] --> B{批注类型}
    B -->|网页元素| C[onUI / Draw2Agent / Hypothesis]
    B -->|截图标注| D[AgileShot / Snapmark / ShareX]
    C --> E[结构化导出]
    D --> E
    E --> F{对接方式}
    F -->|MCP 协议| G[Hermes / Claude Code]
    F -->|剪贴板| H[粘贴到 AI 聊天]
    F -->|REST API| I[脚本管道发送]

核心发现：onUI + Draw2Agent 是仅有的两个从浏览器内直接 MCP 桥接 AI Agent 的方案。Vibe Annotations (6K+ 用户) 是用户量最大的同类型工具。赛道仍处于早期，但 MCP 标准化正在加速。

一、浏览器批注类工具 (14个)

在浏览器内直接标注网页元素/文字，然后导出给 AI Agent。

onUI — MCP 桥接标杆

轻量级浏览器扩展 + 本地 MCP 桥接。专为 AI Agent 设计，是唯一真正打通「浏览器标注→MCP→AI 自动读取」全链路的工具。^[2]

• Annotate 模式 — 点击元素，附加意图描述，Shift 多选，页面冻结保持稳定
• Draw 模式 — 拖拽画矩形/椭圆，标注布局和间距问题
• MCP 桥接 — onui-local 本地 server，6 个工具
• 4 种导出格式 — compact / standard / detailed / forensic
• 一键安装 — Chrome Web Store 或 curl 脚本

Draw2Agent — 手绘标注最直观

MCP server 代理 localhost 页面，注入 Excalidraw 绘图层。用户可像在白板上一样画圈/箭头/文字标注页面。提交后自动将截图 + DOM 数据 + 标注打包发给 AI Agent。^[3]支持 iPad 扫码画图、Scratch 白板模式。安装：npx -y draw2agent@latest。

Hypothesis — 文本批注标杆

网页批注领域最成熟的开源项目。W3C Web Annotation 标准，完整 REST API，hypothesisapi Python 库可直接调用。^[5]通过 API 拉取批注 JSON → 格式化为 Markdown → 发送给 Hermes/Claude。

AgentEcho — 极简 DOM 标注

Chrome 扩展：悬停高亮 DOM 元素→点击放置编号标记→填写反馈→一键复制为 AI-optimized Markdown。^[6]只做「标注→Markdown→粘贴给 AI」一件事。

Glasp — AI 克隆 + 社交高亮

网页/PDF/YouTube 高亮批注 + 个人 AI 克隆（基于你的批注学习）。Obsidian 官方插件、GitHub Actions 自动导出、公开 highlights API。唯一提供「AI 用你批注的方式思考」的工具。^[7]

浏览器批注工具汇总

二、截图标注类工具 (13个)

先截图，再标注（箭头/框/文字/打码），最后发送给 AI。

AgileShot — AI 原生 + MCP

内置 AI 对话+OCR，MCP Server 提供 25 个工具让 AI 直接控制截图和桌面操作。^[8]AI 可主动截图→标注→分析，无需人工介入。基础免费，闭源。

Snapmark — VS Code 内最实用

VS Code 扩展，截图→标注（笔/箭头/矩形/椭圆/文字/高亮/打码/编号）→一键复制→粘贴到任意 AI 聊天。^[9]通用性最强，不挑 AI 工具。

ShareX / Flameshot — 开源经典

AI 原生分析类

三、MCP 生态 (8+ Server)

MCP 生态中与「截图/批注→AI」直接相关的 Server 正在快速增长。

Vibe Annotations (6K+ 用户)

Chrome 扩展标注 localhost 页面元素→MCP server (vibe-annotations-server, SSE port 3846)→AI agent 自动实现修复。支持 Claude Code / Cursor / Windsurf / Codex / OpenClaw。^[10]

MarkUp — 纯 Chrome 扩展方案

7 种标注工具（编号/铅笔/箭头/矩形/圆形/文字/高亮）→导出 PNG + Markdown changelog（含 CSS selector）→粘贴给 AI。无后端、无账户、无遥测。^[11]

MCP Server 完整汇总

四、横向对比

五、Hermes 集成路径

Hermes Agent 有 3 条可行路径：

路径 1：onUI MCP（推荐）

1. Chrome Web Store 安装 onUI 扩展
2. 安装时启用 MCP bridge（onui-local）
3. Hermes 配置：hermes mcp add onui-local
4. 浏览网页→标注→Hermes 通过 MCP 自动读取批注

路径 2：Draw2Agent MCP

1. npx -y draw2agent@latest 启动
2. 在 Excalidraw 层上手绘标注
3. MCP 自动打包截图+DOM+标注发给 Hermes

路径 3：Hypothesis + 自定义 Skill

1. 安装 Hypothesis 扩展
2. Python 脚本通过 hypothesisapi 拉取批注
3. 封装为 Hermes skill，定期拉取→分析

六、推荐方案

「浏览器批注→AI」赛道处于早期但增长迅速。MCP 标准化之后，2026 下半年预计会有更多工具涌现。onUI 和 Draw2Agent 是当前最精准匹配你需求的两个选择。