背景
最近は AI に HTML や Markdown でドキュメントを書かせる機会も増えました。レビューはレンダリングされた見た目を見て行いたいのに、修正指示は AI に対してソース（どの要素・どの行か）を正確に伝える必要があり、地味に面倒でした。
この「見た目を見てレビューしたいが、指示はソースに正確に」のギャップを埋めるためにVS Code 拡張を作りました。
AI が書いたものを見た目でレビューして、そのままフィードバックをプロンプト化できます。
同じように「AI へのフィードバックが地味に面倒」と感じている方の役に立てば。
作ったもの
- ファイルを右クリック →「AI Review: Open Review Panel」でレビューパネルを開く
- プレビュー（HTML/Markdown はレンダリング表示）で要素や行をクリックしてコメント
- 「Copy AI prompt」を押すと、位置情報つきの修正プロンプトがクリップボードに入る
- それを Claude Code などにそのまま貼り付ける
コメントには CSS セレクタ・元ソースの行番号・JSON/YAML のデータパスなどが自動で
添えられるので、AI が「どこを直すか」で迷いません。プレビューとソース表示は切り替えられて、どちらで付けたコメントも同じ行を指します。
コピーされるプロンプトはこんな形です。
## コメント 1
- 対象ファイル: `/path/to/landing.html`
- 対象セレクタ: `header.hero > a.btn`
- 対象行: `L35`
- 指摘 / 修正指示:
このボタンの文言を「30秒で無料登録」に変えて
追記: AIエージェントとの往復レビューに寄せました
最初にこの記事を書いた時点では、「見た目にコメントして、それをAI向けプロンプトにす る」ことが中心でした。その後、実際に使っていく中で、単にプロンプトをコピーするだけ でなく、AIエージェントがコメントを読み取り、修正し、対応状況を書き戻すところまで一 連のループにしたくなりました。
現在はコメントがワークスペースの .ai-review/comments.json に保存されます。CLIか ら未対応コメントを取得できるので、AIエージェント側では次のような流れで動かせます。
ai-review pending
ai-review prompt docs/design.md
ai-review resolve docs/design.md 1 --note "指摘に従って文言を修正"
ai-review add docs/design.md --line 42 --body "この意図で合っていますか？" --author ai --reply-to 3
人間がレビュー画面でコメントし、AIが pending で未対応コメントを読んで修正し、完了したら resolve --note で対応メモを残す。曖昧な指摘には add --reply-to でAI側から質問を返す、という形です 。レビュー画面を開いていれば、これらの変更はそのままパネルに反映されます。
このあたりを入れてから、「レビューコメントをAIに渡す」ツールというより、「人間とAI エージェントが同じコメントストアを見ながらレビューを進める」ツールに近づいてきまし た。