inspect

Inspect

Claude Design の <mentioned-element> インラインコメントプロトコルを、ターミナルネイティブな代替手段に置き換えます。ユーザーが英語で要素を説明すると、Claude が編集箇所を絞り込めるよう、特定の DOM ノードとソース位置を特定します。

前提条件

• Chrome DevTools MCP でページが読み込まれていること（/preview または /done 経由）
• .claude/last-snapshot.json が存在すること（/done で生成）— または新たにスナップショットを取得します

パイプライン

1. スナップショットを取得：

   • 最近（5 分未満）かつ同じ URL の場合は、Read .claude/last-snapshot.json を優先します
   • それ以外の場合は、mcp__chrome-devtools__take_snapshot で新しいツリーを取得します

2. 説明と一致するノードをスナップショットから探します。視覚情報とテキストのヒューリスティックを使用します：

   • ロール／タグの一致（「button」→ role=button、tag=button）
   • テキスト内容の一致（「『Get started』と書かれた CTA」）
   • 位置のヒント（「ヒーロー」「上部」「左から 3 番目」「右サイドバー」）
   • 色のヒント（「赤いボタン」）— 曖昧な場合は、スクリーンショットを取得して視覚的に照合します
   • サイズのヒント（「大きな見出し」）
   • 階層（「最初のカード内」）

3. 最適な UID を選択します。候補が複数ある場合は、上位 3 件をそれぞれ 1 行で要約してユーザーに提示します：

   Candidates for "red button in hero":
     [uid=3_12] <button> "Get started" — background #d83
     [uid=3_28] <a class="btn"> "Try free" — background #c55
     [uid=3_07] <div role=button> "Sign up" — background #d80
   Which one (or describe differently)?
   

4. ソース位置を特定します。 UID が確認されたら：

   • mcp__chrome-devtools__evaluate_script — UID で選択し、有用な識別子を返します：

     // (Pass the picked uid as an arg to the evaluate function)
     (el) => ({
       tag: el.tagName.toLowerCase(),
       id: el.id || null,
       classList: Array.from(el.classList),
       textContent: el.textContent.trim().slice(0, 80),
       dataAttrs: Object.fromEntries(
         Array.from(el.attributes)
           .filter(a => a.name.startsWith('data-'))
           .map(a => [a.name, a.value])
       ),
       outerHTML: el.outerHTML.slice(0, 300),
     })
     

   • これらの手掛かりを使い、Grep でソース HTML（現在の artifacts/<name>.html）から一致する要素を検索します。優先順位は id > data-* > 一意なクラスの組み合わせ > テキストの一部 > outerHTML の一部です。
   • 返す情報：ソースファイルのパス + おおよその行番号

5. 報告：

   Element: <button> "Get started" (uid 3_12)
   Source: artifacts/landing.html:142-148
   Selector: #cta-primary
   

6. 次の手順（任意）： ユーザーが調査と併せて編集（「大きくして」など）も依頼した場合は、特定した行範囲を直接 Edit します。それ以外の場合は、報告して待機します。

「赤いボタン」のような参照に対するヒューリスティックの優先順位

ユーザーの表現が複数の候補に該当する場合：

1. 明示的なラベルを優先 — <button aria-label="Subscribe"> があり、ユーザーが「購読ボタン」と言った場合は、視覚的な手掛かりにかかわらずそれを選びます
2. 表示中の要素を優先 — 折り返し位置より下にある要素より、現在ビューポート内にある要素を優先します
3. 一般的なものより一意なものを優先 — 8 個のグリッドボタンのうち 3 番目より、一意なヒーローボタンを優先します
4. 小さいものより大きいものを優先 — 「大きなタイトル」の場合は、フォントサイズが大きいものを優先します
5. 位置が曖昧な場合は上部を優先 — 「ボタン」の場合は、読み取り順でページ上部に最も近いものを選びます

質問に切り替える場合

候補が 3 件を超え、視覚情報でも判別できない場合は、ユーザーに「X、Y、Z のどれですか？」と尋ねます

制限事項

• 正常にレンダリングされた要素のみを特定できます（エラーコンポーネントは対象外です）
• 生成されたクラス名を持つ React コンポーネント（CSS モジュール）の場合、セレクターを往復して照合できないことがあります — ソース検索には outerHTML の一部を使用します
• Shadow DOM 内の要素は take_snapshot で表示されますが、ソース HTML に対する Grep では見つかりません — この方法で見つからない場合はユーザーに警告します