既存の実画面（本番のスタイル・ログイン状態・実データの上）に UI モックを乗せて壁打ちするときの、局面別の手段選び。ブラウザ自動化 CLI（Playwright 系ラッパー等）を前提にする。

三つの手段と適用局面

• 発散（見た目を1回当てて判断）: ページの DOM を直接操作して要素を挿入・差し替え。ビルド不要で最速だが、リロード・遷移で消える。単発の見た目確認向き。
• 反復（何度も微調整）: ページ生成のたびに走る初期化スクリプト注入（add-init-script 相当）やネットワーク横取り（route 差し替え）を使うと、リロード・遷移でも自動で再適用される。route 差し替えは「実データっぽいモック」に向く。
• 収束（作り込み・実装化）: 方向が固まったら対象コンポーネントを実コード編集し HMR で見る。即反映・リロードで消えない・型/lint も通りそのまま PR になるが、構造把握が要るので発散期には重い。

注入方式の永続性と消えるタイミング（要区別）

注入には「スクリプト本体（ファイル）」と「注入登録の状態（ランタイム）」の2層があり、保存場所も消える契機も別。

• スクリプト本体: 自分が置いた場所に残り、手動削除まで消えない。VCS に入れなければ本番コード・リポジトリを汚さない。
• 注入登録の状態: ディスクに永続化されず、ブラウザコンテキストのメモリ上に保持される。永続プロファイルを使っていてもこの登録はプロファイルには書かれない。リロード・遷移では消えないが、セッションを閉じる・ブラウザを再起動すると消える（次回起動時に再登録が必要）。

運用上の活かし方

• 永続的に効かせたいなら、起動（open）→注入登録をラッパースクリプト/エイリアスにまとめ、起動のたびに流す。不要になったらスクリプトを流さないかファイルを消すだけで戻る。本番コード・コミットに一切触れないのが利点。
• つまり「発散は DOM 直操作、反復は注入スクリプト化、収束は実コード編集」という段階で選ぶ。単一の「最速な手段」は存在せず、局面で切り替えるのが実質最速。