AInotate

AI エージェント向けの注釈付きスクリーンショット：場所を説明する代わりに、エージェントがボタンを示します。

ウェブサイト · はじめる · プライバシー

Hacker Newsへのリンクの投稿方法をエージェントに尋ねると、たいていは「上部のオレンジ色のバー」「jobs の次にある最後のリンク」といった説明が返ってきます。AInotateなら、上の画像を送信して、「青い矢印が指している submit をクリックしてください」と伝えます。

ウェブページ、ウィンドウ、または手元のスクリーンショットをキャプチャし、指定された要素を見つけ、番号付きの手順、矢印、枠、ラベルを、できるだけ見えにくい部分を隠さない位置に描きます。メールアドレスやトークンを黒塗りし、送信前に結果を確認します。Claude Code、Cowork、Claude Desktop、Codex、Gemini CLI、Cursorなど、あらゆるMCPクライアントで利用でき、コマンドラインやPythonからも使えます。

自社のエージェントが「どこにありますか？」という質問に段落で答え続けていたため、DontPayFullで開発しました。正しいボタンに番号を付けた画像があれば、チャットでもチケットでもガイドでも、すぐに解決できます。

こんな用途に

• 「どこにありますか？」 設定、メニュー、アイコンの背後に隠れたボタンなど。エージェントは画面そのものを使い、対象のコントロールを枠で囲んで番号を付けて答えます。
• 「手順を教えてください。」 手順に沿って、各ステップに画像を1枚ずつ用意します。ainotate guide を使えば、Markdown、HTML、PDFのガイドにまとめられます。
• 「あなたの番です。」 権限の切り替え、2FAコード、支払い画面、同意画面などでは、エージェントが代わりにクリックすることはありません。何を押せばよいかを正確に示し、そのクリックで何が起こるかを伝えます。
• バグ報告とチケット。 問題のある箇所は赤で、正しい箇所は緑で囲みます。誰かに見られる前に、メールアドレスやトークンを黒塗りします。
• ドキュメントと変更履歴。 テキストで説明した対象を示すスクリーンショットを用意し、UIが変わったら同じ仕様に基づいて撮り直します。変更前後の比較画像も作成できます。

エージェントでセットアップする

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 で、Desktop 拡張機能は Releases から新しい .mcpb を開いて更新します。

2. 使用するエージェントに接続します。

エージェント	方法
Claude Code	/plugin marketplace add dontpayfull/AInotate を実行し、続けて /plugin install ainotate@ainotate を実行します。スキルと 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 を実行します。スキルと MCP サーバーをインストールできます
Gemini CLI	gemini extensions install https://github.com/dontpayfull/AInotate を実行します。スキルと MCP サーバーをインストールできます
Cursor	（uv が必要）に加え、以下のスキルも追加します
VS Code、Cline、その他の MCP クライアント	コマンドは ainotate、引数は mcp（stdio）です。MCP Registry には io.github.dontpayfull/ainotate としても登録されています。エージェントは llms-install.md を参照できます

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

AInotate はお使いのコンピューター上で動作します。Cowork は Claude のデスクトップアプリを通じて接続するため、タスクで使用する間はアプリを開いたままにしてください。プラグインはリリースを固定して uvx で AInotate を実行するため、uv が必要です。

スキルは、いつどのように注釈を付けるかをエージェントに教えます。ソースを選び、正確な位置を見つけ、注釈を付け、画像を読み取って確認し、成果物を渡します。プラグインにはスキルが含まれています。プラグインを使わない場合は、パッケージに同梱されています。

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, ...)

すべての OS の設定パス、権限、ツールの一覧はこちらをご覧ください。 skills/ainotate/references/mcp.md。

3. 質問します。「Wikipedia をダークモードに切り替える場所を教えて。」エージェントはページをキャプチャーして注釈を付け、確認してから画像を送ります。スキルがあれば、回答が画面上の場所に関係する場合、つまり「方法を教えて」という質問や、視覚的なバグ、変更前後の比較などでも、自動的に同じ操作を行います。

ギャラリー

以下の画像はすべて、公開サイトに対して1回の shoot 呼び出しで作成しました： ページを開き、要素を見つけ、ラベルを配置して、描画し、フレームに収めます。仕様はdocs/images/specsにあります。

DontPayFullの情報量の多いヘッダーに番号付きステップ。20,000以上のストアのクーポン	GitHub上のボックス、矢印、ハイライト
ブラウザーのフレームとグラデーション枠を使ったステップごとのガイド	プライバシースキャンでメールアドレスを自動的に伏せたバグレポート
小さなコントロールやショートカット用の拡大鏡とキーキャップ	2枚の撮影画像によるビフォー／アフター

4種類の矢印スタイル：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、OCR による locate、grid、zoom、 UI 要素をターゲットにしたウィンドウキャプチャ、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 語を超える場合に警告します。
• 1 回の呼び出しでウェブをキャプチャ： ainotate shoot でページを開き（ノート PC、ワイド、またはスマートフォンのプリセット）、操作（クリック、入力、待機、スクロール）を実行し、各ターゲットを測定して、情報を黒塗りし、注釈を付けて保存します。
• あらゆるブラウザーに対応： 専用の Playwright Chromium、Firefox、WebKit を使うか、すでに利用中でログイン済みの Chromium（Chrome、Edge、Brave、Arc、BrowserOS）に CDP 経由で接続します。プリセットはそのタブだけに適用され、後で元に戻されます。
• あらゆる画像に対応： 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 の結果を対象に処理します。独自のアドレスを許可リストに登録したり、正規表現を追加したりできます。
• 検出は完全ではありません。 検出できないものもあります。画像やキャンバスに描かれたテキスト、一般的でない形式、複数の要素に分割されたデータ、他サイトの埋め込みフレーム（報告はされますが、黒塗りされません）などです。共有する前に、必ず画像を確認してください。このスキルでは、エージェントにこの確認を必須としています。
• ローカルで処理します。 キャプチャ、OCR、レンダリングはお使いのマシン上で実行されます。AInotate は、キャプチャを依頼されたページの読み込み以外に、独自のネットワークリクエストを行いません。

プラットフォームのサポート

	macOS	Windows	Linux
注釈、フレーム、エクスポート	検証済み	実験的	実験的
Web キャプチャ（Playwright、CDP）	検証済み	実験的	実験的
画面とウィンドウのキャプチャ	検証済み	実験的	実験的（X11）
UI 要素（window --target、elements）	検証済み（アクセシビリティ）	未対応	未対応
OCR（locate、テキストターゲット）	検証済み（Vision）	実験的（Windows OCR）	実験的（Tesseract）
クリップボード	検証済み	実験的	実験的
MCP サーバー	検証済み	実験的	実験的

実験的とは、実装され、モックを使った単体テストは行われているものの、実際の Windows または Linux マシンではまだ検証されていないことを意味します。報告をお待ちしています。

ライセンス

Copyright © 2026 DontPayFull. AInotate は、GNU Affero General Public License v3.0 or laterに基づくフリーソフトウェアです。AInotate を改変してネットワークサービスとして運用する場合、AGPL により、そのサービスのユーザーにソースコードを提供する必要があります。

同梱または派生したサードパーティの著作物（Inter フォント、Arrowshot の矢印の比率、github/awesome-copilot のラベル配置のアイデア）と依存関係のライセンスは、NOTICEに記載されています。

---

DontPayFull チームが ❤️ を込めて制作
_{20,000 以上の店舗のクーポンと割引コード}