AIでWebページの一部だけを安全に編集する手順

背景には、vibe codingで生成されたサイトの運用という課題がある。ゼロからのプロトタイプ生成と、稼働中のページの一部保守とでは必要な制御が異なる。Lovableのプレビューツールバーがレンダリング済み要素の直接指定を推奨し、Boltも2026年9月3日のVisual EditsリリースでDOMノードの直接選択による全コード再生成の回避を中心に据えており、対象ノードの特定と破壊半径の最小化という原則は共通する。

実演では、AIが生成した説明文が指定の20〜28語を下回る16単語だった点が示すように、トークン単位で動くLLMの語数制御には構造的な限界がある。そこでAIには意味の統合を任せ、確定文言はキャンバス上で直接編集するハイブリッド手法が採られる。DOM選択はマークアップの範囲を限定するが、ブラウザの描画は共有CSSを参照するため、Tailwind使用時は既存クラス維持をプロンプトで明示する必要があるとみられる。