nicobailon/pi-annotate

何を解決するか

Pi Annotate は、AIエージェントにUIバグやデザイン変更を視覚的に伝える方法を提供します。レイアウトの問題を手動で説明したりCSSをコピーしたりする代わりに、ユーザーはWebページ上の要素をクリックして、AIエージェントがコードを修正するために必要な正確な技術的文脈（セレクタ、ボックスモデル、アクセシビリティロール）とスクリーンショットをキャプチャできます。

動作方法

Chrome/Chromium用のブラウザ拡張機能として動作し、ネイティブホストとPi拡張機能と連携します。ユーザーが /annotate コマンドを実行すると、ツールはブラウザにアノテーションUIを挿入します。ユーザーは要素を選択し、コメントを追加でき、さらに「Etch」モードでリアルタイムのDevTools編集を記録できます。このデータ（HTML属性、CSSスタイル、視覚的クロップ）は構造化されたMarkdownレポートにまとめられ、AIエージェントに送信されます。

対象ユーザー

UI/UX実装およびバグ修正にAIエージェントを使用するフロントエンド開発者やデザイナー。

特徴

• 深い文脈のキャプチャ：選択された要素について、ボックスモデルデータ、アクセシビリティ情報、重要なCSSスタイルを自動収集。
• 編集のキャプチャ（Etch）：MutationObserverを介してブラウザのDevToolsで行われたリアルタイム変更を追跡し、前後スクリーンショットとプロパティの差分を提供。
• 視覚的なメモカード：ドラッグ可能な浮遊メモとSVG接続線で要素とコメントをリンクする、Figma風の体験を実現。
• リモートおよびWSL対応：ネイティブメッセージブリッジを介して、リモートSSHホストやWSL環境内のページをアノテート可能。