UI の直しをエージェントに頼む時は、Agentation で要素をクリックしてセレクタ付きの指示にする
「ヘッダーのリフレッシュボタン」のように自然言語で場所を説明する代わりに、開発中の画面で要素をクリックして注釈を付けると、CSS セレクタ・テキスト・計算済みスタイルを含んだ Markdown ができる。それを貼れば、エージェントがどの要素の話か迷わない。
どんな時に使う？
- 余白や色などの細かい UI 調整を、Claude Code や Cursor に何度も頼んでいる
- 似た要素が多く、文章だと指している場所が伝わりにくい
手順
- React のアプリに Agentation のコンポーネントを開発時だけ入れる（入れ方は公式サイト）
- ブラウザで画面を開き、直したい要素をクリックして「もっと余白を」などのコメントを付ける
- 出力された Markdown（セレクタ、テキスト、スタイル、コメント）をエージェントへの指示に貼る
似たツール
- Vibe Annotations: Chrome 拡張と MCP サーバーで、注釈をエージェントが直接読める
- AgentEcho: 有料（$2）の同種ツール
注意点
- Agentation は React のコンポーネントなので、React 以外のサイトではそのまま使えない
- 本番に混ざらないよう、開発環境だけで読み込む
- ツール比較は 2026-02 時点の @timakin の note による
出典
- @yoshiko_pg · 2026-02-06
- @timakin の note: note.com