ループエンジニアリング・プロンプト設計ガイド

🧭

はじめに

このHTMLの使い方

「空欄テンプレート」タブには、別の案件でも繰り返し使える依頼文があります。「記入済みサンプル」タブには、不要な保存機能を整理する案件を当てはめた具体例があります。

💡最初から完璧なゴールを書く必要はありません。困っていること、残したいもの、完了と判断する条件を渡すことで、実装側と検査側のプロンプトに展開できます。

1. 違和感を書く

困っている操作や無駄に感じる機能を伝えます。

2. 境界を示す

消してよいものと残したいものを分けます。

3. 完了を決める

テストや確認条件を明確にします。

🔁

補足図解

プロンプトがループになるまで

flowchart TD
  A["現場で感じた違和感"] --> B["空欄テンプレートへ記入"]
  B --> C["実装側プロンプト"]
  B --> D["検査側プロンプト"]
  C --> E["修正を実施"]
  E --> D
  D -->|REWORK| C
  D -->|PASS| F["完了"]
  D -->|USER DECISION| G["人が判断"]

図のコードを見る

違和感 → テンプレート → 実装と検査 → REWORKなら再修正 → PASSで完了

📝

そのまま使える原文

空欄テンプレート

🎯対象

［どのプロジェクト、ファイル、画面を扱うか］

⚠️困っていること

［実際に感じた違和感や問題］

✨本来こうしたい

［理想の状態］

✕悪い例

［削除・修正したい具体例］

✓残したい例

［似ているが削除してはいけないもの］

⚖️判断基準

［どこから不要と判断するか］

🔧変更してよい範囲

［HTML、JavaScript、CSS、生成処理、テストなど］

🛡️変更してはいけない範囲

［守るべき機能やデータ］

🏁完了条件

［検索結果ゼロ、参照切れなし、テスト合格など］

?判断できない場合

勝手に変更せず、要確認として理由と選択肢を報告してください。

この情報をもとに、次の2つを作ってください。

1.実装担当が使うゴールプロンプト
2.独立した検査担当が使うチェックプロンプト

検査結果は、PASS／REWORK／USER DECISIONのいずれかで判定できるようにしてください。

ループエンジニアリング用の「実装側プロンプト」と「検査側プロンプト」を作ってください。

対象：
［どのプロジェクト、ファイル、画面を扱うか］

困っていること：
［実際に感じた違和感や問題］

本来こうしたい：
［理想の状態］

悪い例：
［削除・修正したい具体例］

残したい例：
［似ているが削除してはいけないもの］

判断基準：
［どこから不要と判断するか］

変更してよい範囲：
［HTML、JavaScript、CSS、生成処理、テストなど］

変更してはいけない範囲：
［守るべき機能やデータ］

完了条件：
［検索結果ゼロ、参照切れなし、テスト合格など］

判断できない場合：
勝手に変更せず、要確認として理由と選択肢を報告してください。

この情報をもとに、次の2つを作ってください。

1. 実装担当が使うゴールプロンプト
2. 独立した検査担当が使うチェックプロンプト

検査結果は、PASS／REWORK／USER DECISIONのいずれかで判定できるようにしてください。

✅

HTMLツール整理の記入例

記入済みサンプル

🎯対象

D:\plistプロジェクト内のすべてのHTMLツールを対象にします。HTMLだけでなく、共通JavaScript、CSS、自動生成スクリプト、一覧生成処理、検証スクリプト、自動テストも確認してください。

⚠️困っていること

各ツールに、利用価値の低い保存ボタンが追加されています。特に、コピーボタンとまったく同じプロンプトをテキストファイルとしてダウンロードする機能があり、利用者に不要な選択をさせています。また、ボタンだけ削除すると、イベント処理や専用関数が残る可能性があります。

✨本来こうしたい

生成された文章は、基本的にコピーボタンから利用できる状態にします。同じ文章を保存するだけのダウンロードボタンはなくし、各画面の主操作を分かりやすくしてください。

削除したい状態

悪い例

「結果をコピー」ボタンと「プロンプトをダウンロード」ボタンが並んでおり、両方とも同じpreview.textContentを対象にしているものです。

次のような実装を想定しています。

function savePrompt(){
  downloadText(
    document.getElementById("preview").textContent,
    "prompt.txt",
    "text/plain;charset=utf-8"
  );
}

✓

守るべき機能

残したい例

AIが作成した完成HTML、画像、PDF、CSVなど、コピーでは受け取れない最終成果物のダウンロード機能は残してください。

入力状態を正しく復元できる設定JSONのエクスポートも残してください。

クリップボードへのコピーに失敗した場合だけ、代替手段としてテキストファイルを保存する処理も残してください。

⚖️判断基準

同じ画面のコピーボタンとダウンロードボタンについて、対象となる変数、関数の戻り値、DOM要素を比較してください。

両方が完全に同じ文章を扱っており、ファイル保存に独立した利用価値がない場合は削除対象とします。

ボタンの文言や関数名だけで判断しないでください。

🔧変更してよい範囲

HTMLのボタン、イベントリスナー、専用関数、専用変数、不要になったCSS、説明文、自動生成処理、旧仕様を前提にしたテストを変更して構いません。

🛡️変更してはいけない範囲

コピー機能、生成処理、入力フォーム、本来の最終成果物を保存する機能、ほかの処理でも利用されている共有関数は維持してください。

関係のない画面デザインや文章は変更しないでください。

🏁

終了判定

完了条件

✓

対象ボタンが削除されていること。

✓

削除したID、関数、変数、イベントリスナーへの参照が残っていないこと。

✓

自動生成を再実行しても削除した機能が復活しないこと。

✓

ボタン削除後のレイアウトが崩れていないこと。

✓

JavaScriptの構文確認、ローカルリンク検証、台帳との整合性確認、自動テストに合格すること。

✓

残っているダウンロード機能について、維持した理由を説明できること。

?判断できない場合

勝手に変更せず、保存対象、コピー対象、想定用途を示したうえで、要確認として理由と選択肢を報告してください。

この情報をもとに、次の2つを作ってください。

実装担当が使うゴールプロンプト

独立した検査担当が使うチェックプロンプト

検査結果は、PASSREWORKUSER DECISIONのいずれかで判定できるようにしてください。

ループエンジニアリング用の「実装側プロンプト」と「検査側プロンプト」を作ってください。

対象：
D:\plistプロジェクト内のすべてのHTMLツールを対象にします。HTMLだけでなく、共通JavaScript、CSS、自動生成スクリプト、一覧生成処理、検証スクリプト、自動テストも確認してください。

困っていること：
各ツールに、利用価値の低い保存ボタンが追加されています。特に、コピーボタンとまったく同じプロンプトをテキストファイルとしてダウンロードする機能があり、利用者に不要な選択をさせています。また、ボタンだけ削除すると、イベント処理や専用関数が残る可能性があります。

本来こうしたい：
生成された文章は、基本的にコピーボタンから利用できる状態にします。同じ文章を保存するだけのダウンロードボタンはなくし、各画面の主操作を分かりやすくしてください。

悪い例：
「結果をコピー」ボタンと「プロンプトをダウンロード」ボタンが並んでおり、両方とも同じ`preview.textContent`を対象にしているものです。

次のような実装を想定しています。

function savePrompt(){
  downloadText(
    document.getElementById("preview").textContent,
    "prompt.txt",
    "text/plain;charset=utf-8"
  );
}

残したい例：
AIが作成した完成HTML、画像、PDF、CSVなど、コピーでは受け取れない最終成果物のダウンロード機能は残してください。

入力状態を正しく復元できる設定JSONのエクスポートも残してください。

クリップボードへのコピーに失敗した場合だけ、代替手段としてテキストファイルを保存する処理も残してください。

判断基準：
同じ画面のコピーボタンとダウンロードボタンについて、対象となる変数、関数の戻り値、DOM要素を比較してください。

両方が完全に同じ文章を扱っており、ファイル保存に独立した利用価値がない場合は削除対象とします。

ボタンの文言や関数名だけで判断しないでください。

変更してよい範囲：
HTMLのボタン、イベントリスナー、専用関数、専用変数、不要になったCSS、説明文、自動生成処理、旧仕様を前提にしたテストを変更して構いません。

変更してはいけない範囲：
コピー機能、生成処理、入力フォーム、本来の最終成果物を保存する機能、ほかの処理でも利用されている共有関数は維持してください。

関係のない画面デザインや文章は変更しないでください。

完了条件：
対象ボタンが削除されていること。

削除したID、関数、変数、イベントリスナーへの参照が残っていないこと。

自動生成を再実行しても削除した機能が復活しないこと。

ボタン削除後のレイアウトが崩れていないこと。

JavaScriptの構文確認、ローカルリンク検証、台帳との整合性確認、自動テストに合格すること。

残っているダウンロード機能について、維持した理由を説明できること。

判断できない場合：
勝手に変更せず、保存対象、コピー対象、想定用途を示したうえで、要確認として理由と選択肢を報告してください。

この情報をもとに、次の2つを作ってください。

1. 実装担当が使うゴールプロンプト
2. 独立した検査担当が使うチェックプロンプト

検査結果は、PASS／REWORK／USER DECISIONのいずれかで判定できるようにしてください。