Agentation

AIコーディングエージェントに「サイドバーの青いボタン」と曖昧に伝えていた指示を、.sidebar > button.primary のような確定的なコンテキストに変える注釈ツール。

使い方は単純で、ブラウザ上で任意の要素をクリックしてメモを書き、生成された出力をコピーしてエージェントに貼り付ける。エージェントは渡された情報を手がかりにコードベースを直接grepし、該当箇所を特定する。

出力には以下が含まれる。

• CSSセレクタ
• ソースファイルパス
• Reactコンポーネント階層
• 計算済みスタイル情報
• ユーザーが書いたフィードバック文

対応はClaude Code、Codex、Cursorなどコードベースへアクセスできるエージェント全般。MCP経由の自動連携も視野に入れている。デスクトップのブラウザでのみ動作する。

個人および社内利用は無料。商用再配布にはライセンスが必要。デザインレビューを実装に渡すまでの摩擦を減らしたいチームや、自分の開発でエージェントへの指示精度を上げたい人向け。