AInotate

为 AI Agent 标注截图：Agent 直接展示按钮，而不是描述按钮在哪里。

网站 · 开始使用 · 隐私

向 Agent 询问如何在 Hacker News 上发布链接，通常会得到一段说明：顶部的橙色栏、jobs 后面的最后一个链接。使用 AInotate，它会直接发送上面的图片，并说“点击蓝色箭头指向的 submit”。

它可以截取网页、窗口或你已有的截图，找到你指的元素，在最不遮挡内容的位置绘制编号步骤、箭头、方框和标签，将电子邮件地址和令牌涂黑，并在发送前检查结果。它适用于 Claude Code、Cowork、Claude Desktop、Codex、Gemini CLI、Cursor 和任何其他 MCP 客户端，也可以通过命令行或 Python 使用。

我们在 DontPayFull 开发了它，因为自家的 Agent 总是用一段话回答“它在哪里？”。在正确的按钮上标个数字，一张图片就能在一秒内解决问题，无论是在聊天、工单还是指南中。

适用场景

• “它在哪里？” 设置、菜单、藏在图标后面的按钮。Agent 直接用屏幕作答，并框出控件、标上编号。
• “一步步教我。” 每个步骤配一张图片，按操作顺序排列；ainotate guide 可将它们制作为 Markdown、HTML 或 PDF 指南。
• “轮到你了。” 权限开关、2FA 验证码、付款或同意页面：Agent 不会替你点击，而是准确展示要按什么，并说明点击后的效果。
• 错误报告和工单。 用红色圈出问题，用绿色标出正确内容，并在他人看到之前将电子邮件地址和令牌涂黑。
• 文档和更新日志。 截图指向文字所述的内容；界面变化时，根据相同规范重新截图；提供变更前后的对比图。

在 Agent 中设置

1. 安装，任选一种方式：

方式	命令
Homebrew（macOS）	brew install dontpayfull/tap/ainotate
pipx 或 uv（Python 3.10+）	pipx install "ainotate[all]" 或 uv tool install "ainotate[all]"
Claude 插件	仅需 uv：第 2 步会一并安装 AInotate
Claude Desktop 扩展	无需预先安装

然后运行 ainotate doctor 检查计算机，并为缺少的任何内容打印确切的修复方法，其中包括用于下载 Chromium 以捕获网页的命令。之后如需更新：使用 brew upgrade ainotate、pipx upgrade ainotate 或 uv tool upgrade ainotate；插件使用 /plugin marketplace update ainotate；桌面扩展则打开 Releases 中更新版本的 .mcpb。

2. 将它连接到你使用的 Agent：

Agent	方法
Claude Code	/plugin marketplace add dontpayfull/AInotate，然后运行 /plugin install ainotate@ainotate：一步完成 skill 和 MCP 服务的安装
Cowork	Customize > Plugins > Add marketplace > dontpayfull/AInotate，然后安装 AInotate
Claude Desktop	从 Releases 下载 ainotate-<version>.mcpb 并打开：一键安装扩展
Codex	codex plugin marketplace add dontpayfull/AInotate，然后运行 codex plugin add ainotate@ainotate：安装 skill 和 MCP 服务
Gemini CLI	gemini extensions install https://github.com/dontpayfull/AInotate：安装 skill 和 MCP 服务
Cursor	（需要 uv），并添加下方的 skill
VS Code、Cline 和其他 MCP 客户端	命令为 ainotate，参数为 mcp（stdio）；也已在 MCP Registry 中列出，名称为 io.github.dontpayfull/ainotate；Agent 可以参考 llms-install.md

{"mcpServers": {"ainotate": {"command": "ainotate", "args": ["mcp"]}}}

AInotate 在你自己的计算机上运行：Cowork 通过 Claude 桌面应用连接它，因此任务使用期间请保持应用打开。插件通过 uvx 运行 AInotate，并固定到对应版本，因此需要安装 uv。

skill 会教 Agent 何时以及如何添加标注：选择来源、找到准确位置、添加标注、读取图像进行验证并交付。插件会一并提供它；不使用插件时，它会随软件包一同提供：

ainotate install-skill             # Claude Code and Codex (~/.claude/skills, ~/.agents/skills)
ainotate install-skill --zip ~/Desktop   # a ZIP for Claude Desktop, Cowork, claude.ai:
                                         # Customize > Skills > Upload a skill
npx skills add dontpayfull/AInotate      # any agent the skills CLI knows (Cursor, Windsurf, ...)

所有操作系统的配置路径、权限和工具列表： skills/ainotate/references/mcp.md。

3. 提出请求。“告诉我在哪里可以将 Wikipedia 切换为深色模式。”Agent 会捕获页面、添加标注、检查并发送图像。借助 skill，只要答案取决于屏幕上某项内容的位置，它也会自动执行这些操作，例如“如何操作”类问题、视觉问题，以及修改前后的对比。

示例画廊

下面的每张图片都是通过一次 shoot 调用在公开网站上制作的： 打开页面，查找元素，放置标签，绘制并加框。规格见 docs/images/specs。

编号步骤标注在 DontPayFull 繁忙的页眉上，该网站提供 20,000 多家商店的优惠券	GitHub 上的方框、箭头和高亮
带浏览器边框和渐变外框的分步指南	错误报告，隐私扫描会自动遮盖电子邮件地址
用于小型控件和快捷键的放大镜和键帽	两张截图组成的前后对比图

四种箭头样式：skitch（默认：路径清晰时使用直线，路径较长且倾斜时轻微弯曲，绕开文字时使用曲线）、curved、straight、line

手机预设：移动视口、触控和用户代理

标签不会遮挡内容

标签固定放在目标旁边时，通常会遮住读者需要查看的文字。AInotate 会自行放置每个标签：

• 它会先映射页面内容（文字、图标、线条、图片），并为每个标签尝试数百个位置。目标附近的空白处优先；只有当画面中没有空位时，才会将标签放在文字上方。
• 箭头也会计算代价：长箭头，或穿过文字、其他标签或标记的箭头，会优先让位给更短、更清晰的箭头。当直线路径穿过文字时，箭头会绕开文字弯曲。
• 所有标签会一并规划，因此第一个标签不会占用后续标签唯一合适的位置。
• 步骤徽标会放在方框遮挡内容最少的角上。

图片绝不会为了腾出空间而放大。如果标签仍不得不遮挡内容，AInotate 会在警告中说明；label_at 则可将标签固定在你指定的位置。

从命令行使用

将以下内容保存为 hn.json：

{"url": "https://news.ycombinator.com",
 "frame": {"chrome": "browser"},
 "marks": [
  {"type": "step", "n": 1, "target": {"text": "new", "exact": true},
   "label": "Newest"},
  {"type": "step", "n": 2, "target": {"text": "login"},
   "label": "Sign in"}]}

ainotate shoot hn.json --draft    # temp file; drop --draft to save

输出路径会打印到 stdout。除非配置了其他文件夹，否则图片会保存到 ~/Pictures/AInotate。ainotate --help 会列出所有命令（capture、annotate、locate by OCR、grid、zoom、window capture with UI element targets、elements、guide、compare、animate、copy、 install-skill）；完整规范见 skills/ainotate/references/spec.md。退出代码：0 成功， 1 无法保存，2 规范无效，3 无法绘制，4 捕获失败或缺少可选依赖，5 文本目标不明确，6 未找到目标。

Python。 同一工作流也可通过导入使用：

from ainotate.shoot import shoot
res = shoot({"url": "https://en.wikipedia.org/wiki/Screenshot",
             "marks": [{"type": "box",
                        "target": {"text": "View history"},
                        "label": "Past edits"}]}, draft=True)
print(res.paths[0], res.redactions)

功能

• **标记：**编号 step、box、arrow、click 涟漪、keys （键帽）、magnify（放大镜）、highlight、spotlight、text、纯色 redact，以及装饰性 blur / pixelate。
• **易读的放置方式：**标签会放在目标附近的空白处，并统一规划；箭头是 Skitch 风格的渐细 形状，带有柔和阴影，并会绕开文字弯曲（参见 不遮挡内容的标签）。 如果标签重叠、箭头交叉、标记超过 6 个或标签超过 4 个词，系统会发出警告。
• 一次调用完成网页捕获：ainotate shoot 会打开页面（笔记本电脑、宽屏或手机预设），执行操作（点击、填写、等待、滚动），测量每个目标，遮盖敏感信息、添加标注并保存。
• **支持任意浏览器：**使用自带的 Playwright Chromium、Firefox 或 WebKit，也可通过 CDP 连接到你已在使用并已登录的 Chromium（Chrome、Edge、Brave、Arc、BrowserOS）。预设仅应用于当前标签页，之后会恢复原状。
• 支持任意图片：locate 通过 OCR 查找文字（Apple Vision、Windows OCR 或 Tesseract）；grid 和 zoom 可在完整分辨率下定位图标。内置屏幕、窗口和剪贴板捕获功能。
• macOS 桌面应用：ainotate window ID --target 通过辅助功能 API 测量按钮、开关和字段，因此标记能精确覆盖控件，包括图标；ainotate elements --app NAME 会列出可找到的元素。
• **边框：**渐变背景（根据截图自动生成或使用预设）、圆角、阴影、浏览器或窗口边框、社交媒体宽高比。
• **分享：**Markdown、HTML 和 PDF 格式的指南；前后对比图；APNG 和 GIF 动画；复制到剪贴板。
• **严格规范：**遇到拼写错误时，运行会停止并列出所有问题，而不是保存错误或未遮盖的图片。退出代码清晰明确。
• **变音符号：**内置 Inter 字体，因此罗马尼亚语、德语、法语及其他使用拉丁字母的语言标签都能在任何地方正确显示。

隐私

• 遮盖是不透明的。redact 会绘制不透明色块。AInotate 从不使用模糊来隐藏数据：模糊和像素化都可以还原。blur 和 pixelate 仅用于弱化杂乱内容；对标记为 "sensitive": true 的内容使用这两种效果会被拒绝。
• 网页截图会自动遮盖。shoot 会扫描实时页面（文本和输入值），查找电子邮件地址、电话号码、银行卡号、IBAN、API 密钥、令牌、JWT、密码和个人数据字段，并将其涂黑。在图片上，传入 --privacy auto 时会对 OCR 结果进行处理。你可以将自己的地址加入允许列表，或添加正则表达式。
• **尽力而为。**检测可能会遗漏内容：图片或 canvas 中绘制的文字、不常见的格式、拆分在多个元素中的数据，以及来自其他网站的嵌入式框架（会报告但不遮盖）。分享前务必检查图片。该技能要求 Agent 必须完成这项检查。
• **本地运行。**捕获、OCR 和渲染都在你的机器上运行。除加载你要求捕获的页面外，AInotate 本身不会发出网络请求。

平台支持

	macOS	Windows	Linux
标注、帧、导出	已验证	实验性	实验性
网页捕获（Playwright、CDP）	已验证	实验性	实验性
屏幕和窗口捕获	已验证	实验性	实验性（X11）
UI 元素（window --target、elements）	已验证（辅助功能）	尚不支持	尚不支持
OCR（locate、文本目标）	已验证（Vision）	实验性（Windows OCR）	实验性（Tesseract）
剪贴板	已验证	实验性	实验性
MCP 服务	已验证	实验性	实验性

实验性表示功能已实现，并通过了使用模拟对象的单元测试，但尚未在真实的 Windows 或 Linux 设备上验证。欢迎提交报告。

许可证

版权所有 © 2026 DontPayFull。 AInotate 是遵循 GNU Affero 通用公共许可证 v3.0 或更高版本的自由软件。如果你将修改后的 AInotate 作为网络服务运行，AGPL 要求你向该服务的用户提供其源代码。

随附和衍生的第三方作品（Inter 字体、源自 Arrowshot 的箭头比例、来自 github/awesome-copilot 的标签放置创意）以及依赖项的许可证，均列于 NOTICE。

---

由 DontPayFull 团队倾心打造 ❤️
_{为 20,000 多家商店提供优惠券和折扣码}