ページ要素を指して指定
localhostを含む実行中のページを通常のChromeで開き、要素の位置を手動で説明する代わりに、期待する結果を記述できます。
EditUI
EditUIは、実行中のWebアプリの要素を指して変更内容を説明し、Claude Code、Cursor、Codexなどのコーディングエージェント向けに文脈付きプロンプトをコピーできるChrome拡張機能です。コード追加なしでUIフィードバックをまとめて共有できます。
コーディングエージェント向けの視覚的フィードバック
EditUIは、実行中のWebアプリに対してコーディングエージェントへ正確な視覚的フィードバックを提供するChrome拡張機能です。スクリーンショットに注釈を付けたり、セレクターを手動で特定したりする代わりに、通常のChromeでページを開き、注意が必要な要素をクリックして、変更内容を自然な言葉で説明します。
この拡張機能は、レビュー内容を後の実装作業向けに1つのプロンプトへまとめます。プロンプトにはページURL、ビューポート、各メモ、選択した要素のコンテキスト情報が含まれます。対象のリポジトリにアクセスできるコーディングエージェントに貼り付け、ページを再読み込みして確認し、意図どおりになっていない変更があれば追加で指示します。
機能
UI変更をまとめて指定
1回のレビュー中にクリックと問題の記録を続けられます。EditUIがメモを保持するため、複数の変更を個別のプロンプトではなくまとめて送信できます。
豊富なコンテキスト付きプロンプト
レビュー対象のURL、ビューポート、リクエスト、DOMの詳細、表示テキスト、周辺のマークアップ、計算済みスタイル、境界情報など、選択した要素のコンテキストを含む1つのプレーンテキストプロンプトをコピーできます。
エージェントを問わない出力
Claude Code、Cursor、Codex、Windsurf、または貼り付けたプロンプトを受け付ける別のコーディングエージェントで、同じコピー済みの出力を使用できます。
リポジトリ連携不要
リポジトリにファイルを追加したり、拡張機能をコードベースに接続したりせずにレビューを実行できます。プロンプトを貼り付けた後の実装は、コーディングエージェントが担当します。
ローカルブラウザ処理
レビュー中のページコンテキストをブラウザ内に保持します。Edit Modeを有効にするまで拡張機能のコンテンツスクリプトは非アクティブで、メモはchrome.storage.localにローカル保存されます。
ユースケース
localhostのビルドをレビュー
問題が現れるビューポートでローカルの開発用URLを開き、該当する見出し、カード、ボタン、余白を指定して、プロジェクトのリポジトリで作業するエージェントにレビュー全体を送信します。
ページの仕上げ作業をまとめて実施
階層、配置、余白、レスポンシブ時の縦積み、ボタンの強調など、複数の視覚的な問題を1回のレビューで収集し、番号付きリストとしてエージェントに渡して実装してもらいます。
Cursorのブラウザ以外で作業
実装ワークフローがCursorのブラウザではなくClaude Code、Codex、または別のエージェントを基盤としている場合でも、通常のChromeで同じ実行中アプリをレビューできます。
視覚的レビューとコード変更を橋渡し
デザイナー、プロダクトレビュー担当者、開発者が該当要素を指して目に見える変更後の状態を説明し、開発者がその結果のプロンプトを、ページを表示するリポジトリで使用できます。
Pros and Cons
Pros
- localhostのページを含め、通常のChromeでレビュー担当者が要素を直接指定できます。
- 複数のUIメモを1つのプロンプトにまとめ、まとめて実装するレビューに対応できます。
- URL、ビューポート、DOMコンテキスト、選択要素の詳細を含めるため、コーディングエージェントにとっての曖昧さを減らせます。
- 複数のコーディングエージェントで貼り付けたプロンプトを使え、リポジトリのセットアップは必要ありません。
Cons
- Chrome拡張機能と実行中のページが必要で、単独で使えるビジュアル編集環境ではありません。
- ソースファイルを直接編集したり、コーディングエージェントを呼び出したり、リポジトリを拡張機能に公開したりすることはありません。
- 直接操作用のコントロール、スクリーンショット、React propsの検査ではなく、テキスト形式のコンテキストを生成します。
FAQ
EditUIの設定方法を教えてください。
Chrome拡張機能をインストールし、localhostのURLを含む実行中のアプリをChromeで開いて、ツールバーからEdit Modeをオンにします。macOSではCommand-Shift-E、WindowsではCtrl-Shift-Eでも切り替えられます。要素をクリックして変更後の状態を説明し、コピーする前に編集内容を追加していきます。
EditUIはコーディングエージェントに何を送信しますか？
EditUIは、ページURL、ビューポート、各リクエスト、選択した要素のタグ、表示テキスト、周辺のマークアップ、選択された属性、計算済みスタイル、境界情報などのコンテキストを含む、1つのプレーンテキストプロンプトを作成します。このプロンプトをClaude Code、Cursor、Codex、または貼り付けたプロンプトを受け付ける別のツールに貼り付けます。
EditUIはコードを直接変更しますか？
いいえ。EditUIはリポジトリの読み取り、ソースファイルの編集、モデルの呼び出し、プルリクエストの作成、コーディングエージェントとの接続維持を行いません。エージェントは、レビュー対象のページを表示するリポジトリにアクセスし、プロンプトを貼り付けた後に変更を適用する必要があります。
EditUIはページ情報をアップロードしますか？
拡張機能はページのコンテキストをローカルで処理します。メモはchrome.storage.localに保存され、ブラウザ外に出るのは「すべてコピー」を押して、選択したツールにプロンプトを貼り付けたときだけです。サイトによると、アカウントは必要ありません。
EditUIではどのコーディングエージェントを利用できますか？
貼り付けたプロンプトを受け付けられるエージェントであれば利用でき、Claude Code、Cursor、Codexなどに対応しています。コピーされるプロンプトはプレーンテキストのため、特定のコーディングエージェントやCursorのブラウザに限定されません。
Quick Facts
- 製品タイプ
- 視覚的なUIフィードバック用Chrome拡張機能
- 主なプラットフォーム
- localhostのページを含むGoogle Chrome
- ワークフロー
- 指す → プロンプト化 → 収集 → 送信
- 対応する出力
- クリップボードにコピーされるプレーンテキストプロンプト
- 対応エージェント
- Claude Code、Cursor、Codex、Windsurf、その他のプロンプトベースのエージェント
- アカウント要件
- アカウント不要
EditUIの代替品
ByteAsk
ByteAskは、C/C++向けのターミナル起点AIコーディングエージェント。リポジトリを編集し、コンパイラやデバッガ、サニタイザ、テストで変更を検証してから差分を表示。無料枠あり。
Epherem
Epheremは、Lovable、Bolt、v0、Replit、Cursor、Claude CodeなどのAIコーディングツールで構築したWebアプリ向け静的セキュリティスキャナーです。アプリを実行せず、ソースファイルと依存関係を検査し、一般的なセキュリティミスを分類して修正案を提示します。
CreateOS Sandbox
CreateOS Sandboxは、FirecrackerマイクロVM上でコードやエージェントのワークロードを実行できる分離型コンピュート環境です。SDK、CLI、MCPで制御可能。
GitBot
GitBotは、Claude Code、Codex、OpenCodeを活用した再利用可能なコーディングボットを作成できるローカルブラウザワークスペースです。永続スレッドと権限設定で、リポジトリ内の作業を効率化します。
hob
hobは、エージェントのセッション、ターミナル、履歴、後続作業を、既存のツールやプロバイダーに合わせて整理できる独立したコーディングエージェント向けワークスペース。ローカルでの制御を重視する開発者に最適。
Ably Chat
Ably Chatは、カスタムのリアルタイムチャットアプリを構築できるチャットAPIプラットフォームです。ルーム単位のメッセージ、入力中表示、プレゼンス、リアクション、メッセージ更新に対応し、利用量ベースの料金も選べます。