Vibe Annotations
Vibe Annotationsは、開発者がウェブサイトの要素に直接フィードバックをドロップし、ローカルファーストの安全なブラウザ拡張機能を通じてAIコーディングエージェントに変更を自動的に実装させることができる視覚的な注釈ツールです。
https://www.vibe-annotations.com/?ref=producthunt&utm_source=aipure
製品情報
更新日:2025年08月28日
Vibe Annotationsとは
Vibe Annotationsは、Claude Code、Cursor、GitHub Copilot、WindsurfなどのAIコーディングエージェントを使用する開発者向けに特別に設計された、無料のオープンソースChrome拡張機能です。ブラウザでUI要素に直接注釈を付けるシームレスな方法を提供することで、視覚的なフィードバックとコード実装の間のギャップを埋めます。スクリーンショットや手動による説明を必要とする従来の方法とは異なり、Vibe Annotationsを使用すると、開発者は任意の要素をクリックしてコメントを追加し、DOM構造、スタイル、および具体的な指示を含む正確なコンテキストをAIエージェントに提供できます。
Vibe Annotationsの主な機能
Vibe Annotationsは、開発者がChrome拡張機能を通じてウェブサイトの要素に直接フィードバックを提供できるビジュアルアノテーションツールです。ユーザーは、複数のページにわたる任意の要素にビジュアルアノテーションをドロップし、これらのアノテーションをAIコーディングエージェント（Claude Code、Cursor、GitHub Copilot、Windsurfなど）に自動的に送信して実装できます。このツールはローカルで動作し、アカウント設定は不要で、ビジュアルデザインとコード実装間のフィードバックワークフローを効率化します。
ビジュアル要素インスペクター: DOM構造、スタイル、および正確なAI実装のためのゾーン化されたスクリーンショットを含む正確なコンテキストをキャプチャするクリックアンドアノテーション機能
複数ページのアノテーションサポート: 複数のページとルートにわたって最大200のアノテーションを追加し、すべてのフィードバックを単一のAIセッションで処理する機能
ローカルファーストアーキテクチャ: 完全なプライバシーでlocalhostおよびローカルファイルで動作し、すべてのデータがクラウドストレージやトラッキングなしにユーザーのマシンに保持されるようにします
ユニバーサルAI統合: 最小限のセットアップでMCP（モデルコンテキストプロトコル）統合を通じて、複数のAIコーディングエージェントと互換性があります
Vibe Annotationsのユースケース
フロントエンド開発: 開発者はUIの問題を迅速にアノテーションし、AIにウェブアプリケーションの複数のページにわたる修正を実装させることができます
デザインからコードへの実装: デザイナーはプロトタイプにビジュアルフィードバックを提供し、AIにアノテーションをコード変更に自動的に変換させることができます
共同コードレビュー: チームはアプリケーション全体で必要な変更をマークアップして文書化し、レビューと実装プロセスを効率化できます
メリット
アカウントやサブスクリプションは不要 - 完全に無料でオープンソース
ローカルのみのデータストレージによるプライバシー重視
最小限の設定で簡単なセットアッププロセス
デメリット
Chromiumベースのブラウザに限定
操作にはローカルサーバーのセットアップが必要
セッションごとの最大アノテーション数200の制限
Vibe Annotationsの使い方
Chrome拡張機能をインストール: ChromeウェブストアからVibe Annotations拡張機能をインストールします
ローカルサーバーをインストール: 「npm install -g git+https://github.com/RaphaelRegnier/vibe-annotations-server.git」を実行して、コンパニオンローカルサーバーをインストールします
サーバーを起動: ポート3846で実行されるローカルサーバーを起動します。「vibe-annotations-server status」を使用してサーバーのステータスを確認します
AIコーディングエージェントを設定: SSE URL：http://127.0.0.1:3846/sseを使用して、AIコーディングエージェント（Claude Code、Cursor、GitHub Copilot、またはWindsurf）をVibe Annotationsサーバーに接続します
注釈を作成: localhostのウェブサイトを開き、要素をクリックして視覚的な注釈とフィードバックを追加します
複数の注釈を追加: サイトの複数のページにわたって注釈を追加し続けます（最大200個の注釈がサポートされています）
注釈を処理: AIエージェントに「すべての注釈/フィードバック/コメントを処理する」ように依頼して、変更を自動的に実装します
変更を確認: 注釈に基づいてAIコーディングエージェントによって行われた実装された変更を確認します
Vibe Annotationsのよくある質問
Vibe Annotationsは、AIコーディングエージェント向けに設計されたビジュアルアノテーションツールで、開発者はウェブサイトの要素に直接ビジュアルアノテーションを追加し、AIコーディングエージェントが自動的に変更を実装できるようにします。Claude Code、Cursor、GitHub Copilot、Windsurfなどのツールと連携します。
Vibe Annotationsの動画
人気記事
Nano Banana (Gemini 2.5 Flash Image) 正式リリース – Google 最高のAI画像エディターが登場
Aug 27, 2025
DeepSeek v3.1: AIPUREによる包括的なレビュー、ベンチマーク、および2025年におけるGPT-5、Claude 4.1との比較
Aug 26, 2025
Lmarena Nano Bananaレビュー2025：このAI画像ジェネレーターは新たな王者となるか？（実際のテストとユーザーフィードバック）
Aug 20, 2025
Nano Banana Lmarenaを無料で使う方法（2025年）：高速かつクリエイティブなAI画像生成の究極ガイド
Aug 20, 2025
Vibe Annotationsに類似した最新のAIツール
Gait
Gaitは、AI支援コード生成とバージョン管理を統合するコラボレーションツールであり、チームがAI生成コードのコンテキストを効率的に追跡、理解、共有できるようにします
invoices.dev
invoices.devは、開発者のGitコミットから直接請求書を生成する自動請求プラットフォームで、GitHub、Slack、Linear、Googleサービスとの統合機能を備えています。
EasyRFP
EasyRFPは、RFP（提案依頼）の応答を効率化し、深層学習技術を通じてリアルタイムのフィールド表現型を可能にするAI駆動のエッジコンピューティングツールキットです
Cart.ai
Cart.aiは、コーディング、顧客関係管理、ビデオ編集、eコマースの設定、カスタムAI開発を含む包括的なビジネス自動化ソリューションを提供するAI駆動のサービスプラットフォームで、24時間365日のサポートがあります
Vibe Annotationsに似た人気のAIツール
GitHub Copilot Chat
GitHub Copilot Chatは、自然言語の対話、リアルタイムのコード提案、そしてサポートされているIDEおよびGitHub.com内での文脈に応じた支援を提供するAI駆動のコーディングアシスタントです
CopilotForXcode
CopilotForXcodeは、Xcode内でAI駆動のコード提案、チャット支援、プロンプトからコードへの機能を提供するXcodeソースエディタ拡張機能です。
BrowserAI
BrowserAI is an open-source library that enables running local Large Language Models (LLMs) directly in web browsers with WebGPU acceleration, offering privacy-focused AI capabilities without requiring server infrastructure.
OpenAI Codex CLI
OpenAI Codex CLIは、ターミナルで実行される軽量なオープンソースのコーディングエージェントであり、開発者は自然言語をコード実行に変換し、コードを実行し、ファイルを操作し、バージョン管理下で反復処理できるChatGPTレベルの推論を提供します。