Vibe Annotations
Vibe Annotations · コーディング
Vibe Annotations は無料のブラウザ拡張と MCP サーバー。ローカルページに注釈を残すと、Claude Code や Cursor などのAIコーディングエージェントがその修正を実装する。
Vibe Annotations について
What Is Vibe Annotations
Vibe Annotations はウェブ開発向けの視覚アノテーションツールである。ブラウザ拡張を入れ、ローカルページ上の任意の要素をクリックして、どこを直すかを短く書き残す。1件ごとの注釈には、その要素の正確な DOM セレクタ、背後にある React または Vue コンポーネント、そして元のソースファイルが記録される。AIコーディングエージェントは曖昧な説明ではなく、はっきりした文脈を受け取る。
製品は2つの部品でできている。拡張はコピー&ペーストだけで単体でも動き、任意の MCPサーバーを足すと自動同期が付く。エージェントは注釈を読み、監視し、処理できる。何かをコピーする必要はない。サーバーは vibe-annotations-server の名前で npm に公開され、どちらも無料でオープンソースだ。
一番の制約は適用範囲にある。開発中の localhost とローカル HTML ファイルのために作られており、公開中の本番サイトやウェブ以外のプロジェクトには向かない。開発サーバーを立てず、AIコーディングエージェントも使わないなら、ここで得られるものは少ない。
Getting Started
- Chrome ウェブストアから拡張をインストールする。開発目的ならリポジトリから未パッケージのまま読み込む
- npx vibe-annotations-server init を実行し、サーバーを導入してポート3846で起動し、AIコーディングエージェントに接続する
- 任意の localhost ページを開き、ツールバーの Annotate を押して要素をクリックし、コメントやデザイン調整、テキスト修正を残す
- キューをエージェントに渡す。エージェントは MCP 経由で注釈を読み、修正を一度に実装する
AIツール情報
Vibe Annotationsの料金、対応プラットフォーム、性能を簡単に確認できます。
こんな人におすすめ
このツールが最も力を発揮するユーザー、タスク、シーン。
ユーザー
- フロントエンド開発者：React、Vue、素の HTML でページを作り、壊れた要素をチャットで説明するより、そのまま指したい人
- AIエージェントと組む開発者：Claude Code、Cursor、Codex にUIを書かせ、修正を素早く送り返したい人
- 個人開発者：1人でページを反復し、短く引っかかりのないフィードバックの往復を求める人
- UIを確認する小さなチーム：変更を出す前に、注釈の束を相手の localhost へ渡して一緒に見るメンバー
タスク
- 崩れたレイアウトを指摘する：余白、間隔、位置ずれの問題を、位置を説明せず要素そのもので示す
- デザイン修正を送る：Figma 風パネルでサイズ、間隔、色、テキストを変え、エージェントに適用させる
- コンポーネントのバリエーションを頼む：エージェントに複数案を出させ、ページ上で1つずつ見て最良のものを選ぶ
- ブラウザの外で共有する：注釈の束を画像を埋め込んだ単一 .html、または軽い .md として書き出す
- 修正のループを自動化する：監視モードを入れ、新しい注釈が届くたびに拾わせて即座に実装させる
シーン
- 同じボタンを何度も直し、セレクタを打つのが面倒になる：要素をクリックして一言残し、渡す
- スクリーンショットだけではどの要素がおかしいか伝わらない：注釈がセレクタ、コンポーネント、ソースファイルを運ぶ
- 複数のルートにまたがるページを確認する：1ページずつ注釈し、エージェントに MCP 経由でまとめて読ませる
- 同僚のローカルビルドに意見を求められる：注釈を1つにまとめてファイルで共有する
- 自分が注釈を続ける間もエージェントに動いてほしい：監視モードが新しい注釈を届いた順に拾う
主な機能
文脈ごと運ぶ注釈
1件の注釈には、クリックした要素の正確な DOM セレクタ、背後の React または Vue コンポーネント、ソースファイルが記録される。スクリーンショットツールとの違いはここにある。あちらはピクセルからエージェントが対象を推測するしかない。こちらはそのまま動かせるセレクタを渡すので、修正は最初から正しいノードに当たる。
Figma 風のデザイン編集パネル
コメントだけでなく、Figma 風の編集パネルからサイズ、間隔、色、テキストをページ上で直接変えられる。渡す前にライブプレビューで確認できるので、エージェントが実装するのは自分がすでに承認した内容だ。小さな見た目の調整はチャットから完全に切り離せる。
バリエーションの生成とプレビュー
任意のコンポーネントのバリエーションをエージェントに頼み、そのままページ上で見比べられる。パネルは案を並べて表示し、ブラウザを離れずに勝ちを選べる。レイアウトの往復が1回の選択に収束する。
スクリーンショットと参考画像
ツールは注釈した要素ごとにスクリーンショットを自動で撮り、さらに自分の参考画像を添えられる。視覚の文脈が書き残したメモと一緒に運ばれるので、説明より見せるほうが早い変更で効く。
1ファイルへの書き出し
注釈の束は、画像を埋め込んだ自己完結型の .html 1つとして、あるいはテキストだけなら軽い .md として書き出せる。どちらも送るのは1ファイルであり、スクリーンショットとメモのフォルダではない。
MCP 連携と監視モード
サーバーは read_annotations、watch_annotations、get_project_context といったツールを接続したエージェントに公開する。設定は Claude Code、Cursor、Windsurf、Codex、OpenClaw、VS Code いずれもコマンド1つだ。監視モードは新しい注釈をロングポーリングし、作業を続けながらエージェントがリアルタイムで修正を実装する。
メリットとデメリット
メリット
- 無料かつオープンソース。サーバーは npm、コードは GitHub にある
- 注釈がセレクタ、コンポーネント、ソースファイルを運ぶので、エージェントは対象を推測しない
- Claude Code、Cursor、Windsurf、Codex、VS Code など主要なAIコーディングエージェントに対応する
- 拡張はコピー&ペーストで単体動作し、MCP サーバーは任意だ
- 束ごと単一の .html か .md に書き出し、ブラウザの外で共有できる
デメリット
- localhost とローカル HTML ファイル向けで、公開中の本番サイトには注釈できない
- 料金ページも商用サポートもない。ベンダーの裏付けを求めるチームには物足りない
- MCP 設定には Node と常駐するローカルサーバーが要り、拡張の導入より手間がかかる
- 注釈はウェブのフロントエンドに限られ、ネイティブアプリやバックエンドの作業には使えない
よくある質問
localhost のページで要素をクリックし、AIコーディングエージェントが読んで実装できるフィードバックを残せる。注釈ごとに DOM セレクタ、React または Vue コンポーネント、ソースファイルが記録されるので、エージェントはどの要素を変えるか正確に分かる。
関連コンテンツ
Vibe Annotationsに関連するツール、スキル、記事を探す。
Vibe Annotationsの代替ツール
Base Code
Base44 (Wix) · コーディング · 生産性向上Base CodeはBase44の共有クラウド開発環境だ。既存のGitHubリポジトリに対する変更をチャットで伝え、プレビューで確認し、プルリクエストとして返せる。
Google EmbeddingGemma 2
Google DeepMind · ライティング · 画像 · コーディングGoogle EmbeddingGemma 2 は 7 億 4000 万パラメータのオープンなモデルで、テキスト、コード、画像、音声、動画フレームを同じ 768 次元空間のベクトルに変え、スマートフォンやノート PC 上で動く。
GitGlow
GitGlow · コーディング · 生産性向上GitGlow は自分のコードと AI エージェントの変更を一つのレビューにまとめるデスクトップ Git クライアントだ。出荷前に、マシンから何が出ていくのかを確かめられる。