「既存コードを前提にした依頼」が実務では最も重要
ゼロから作るよりも「既存ページに機能を追加する」場面のほうが圧倒的に多いのが実務です。AIに既存コードを渡して、構造を崩さずに追加してもらうための方法を解説します。
プロンプトテンプレート
「以下の既存HTMLに、カテゴリフィルター機能を追加してください。
・既存のHTML構造・クラス名は一切変更しないでください
・JavaScriptのみで実装してください（CSSは最小限の追加のみ可）
・フィルターボタンは data-category 属性で管理する
・.btn-all クリックで全表示に戻る
・変更・追加した箇所に /* AI追加 */ コメントを入れてください
【既存コード】
（ここにHTML/CSS/JSを貼り付ける）」
既存コードを渡す際の注意点
- コード量が多い場合：関連する部分だけを切り出して渡す。
- 変更禁止を明示：「このHTMLは変更しないでください」「このCSSはそのまま使ってください」
- ライブラリを伝える：「jQuery 3.6・Bootstrap 5を使用中です」
- 命名規則を伝える：「クラス名はBEM、JSはキャメルケースで統一しています」
崩れを防ぐための指示フレーズ集
- 「このファイルの構造・クラス名を一切変更しないでください」
- 「CSSは既存ファイルに追記する形で分けて出力してください」
- 「JSは既存コードの下に追記する形で書いてください」
- 「変更した箇所だけ差分として出力してください」
