AIコーディングツールに変更箇所の要素を正確に伝える

「2つ目のボタンを大きくして」。この指示は変更内容を示していても場所を示していないため、AIコーディングツールはどのボタンのことかを推測するしかありません。SuperchargeInspectなら推測は不要です。要素を指定し、変更内容をメモに書き、メモ・注釈付きスクリーンショット・要素から取得したスタイルを含む参照をコピーします。1つの参照で、対象の要素、その見た目、そして求める変更をまとめてツールに渡せます。

4ステップのワークフロー

Alt+Shift+Eまたはツールバーのボタンで検証を開始し、ホバーまたは矢印キーでページ上を移動します。ワークフローは4ステップです。

1. 要素を選択する。ホバーするか矢印キーで移動し、Enterキーを押して固定します。
2. メモを追加する。もう一度Enterキーを押してメモを書きます。「このボタンを全幅にする」のように、変更内容を言葉で書きます。参照では、このメモが唯一の変更依頼として示されます。
3. 参照をコピーする。Ctrl+Enter（macOSではCmd+Enter）を押します。1つのクリップボード項目に、テキスト参照と注釈付きPNGの両方が含まれます。
4. 貼り付ける。AIコーディングツールに貼り付けます。どの部分を使うかはツールに任せましょう。

上のサンプルカードでも、これと同じ流れを試せます。パーツをクリックして固定し、「参照をコピー」を押してください。デモでは拡張機能と同じように、テキスト参照と注釈付き PNG がコピーされます。

参照に含まれる内容

テキスト参照は、ざっと目を通せるプレーンテキストです。短いヘッダーと安全のための一文に続いて、あなたのメモとソース URL、次に要素とそのロケーターのヒント、そして参照データとしてラベル付けされた表示テキストが並びます。さらに、ビューポートのサイズとスクロール位置、要素の境界、取得したスタイル（宣言された font-family スタック、色の値、各辺のパディングとマージン、gap、角丸の半径、display）が続きます。最後に、ページ上で構成されたとおりの要素の短いマークアップ抜粋で締めくくられます。

注釈付きスクリーンショットは、表示部分を切り抜いた画像の下にフッターを付けたものです。フッターには、メモ、ソース、要素、短いスタイル行が入ります。

安全のための一文がページのテキストを参照データとしてラベル付けするため、ページのテキストが指示になりすますことはできません。変更依頼として扱われるのは、あなたのメモだけです。

AIコーディングツールに貼り付ける

テキスト、画像、またはその両方のどれを使うかは、AIコーディングツールが判断します。すべてのツールと OS の組み合わせで動作が保証されているわけではありません。

貼り付け時に1つの形式しか残らない場合は、「その他のコピー方法」メニューから「テキストのみコピー」「画像のみコピー」「PNG を保存」のいずれかを使ってください。

参照の制限事項

コピーした参照は、取得時点のスナップショットです。記録されるのはページに表示された結果であり、それを生み出したソースではありません。Inspect はソースファイル、コンポーネント名、作成者の CSS ルールを復元しません。フォントの値は宣言された font-family スタック、つまりページが要求するフォントのリストです。どの形式を保持するかは、受け取る側のツールが決めます。SSH 経由、リモートコンテナ内、またはホスト型のコーディング環境では、ローカルの画像は貼り付けと一緒に送られません。先に PNG を保存し、リモートツールがファイルを受け付ける方法で添付してください。保存される PNG はフッターなしのクリーンな切り抜き画像なので、メモは貼り付けたテキストで伝わります。

プライバシー

Inspect はネットワーク通信を一切行わず、アカウントも不要で、AI サービスに何かを送信したりプロンプトを送ったりすることもありません。検証した内容は、自分で貼り付けるか PNG を保存するまで、デバイスの外に出ることはありません。各ページで最後に選択した要素はセッションストレージに記憶され、ブラウザを閉じると消去されます。

CSSインスペクターで要素を検証し、CSSの値を読み取ってコピーできます。