今回の流れ
- Gemini 3.8 Flash を選び、「新規プロジェクト」で空のフォルダを作成
- プロンプト1：「まず仕様をまとめた readme.md だけを作って」→ AI が仕様書を生成
- プロンプト2：「readme.md の仕様通りに実装して」→ AI が
index.html/style.css/script.jsを作成（書き込みは承認ダイアログで確認） - 内蔵ターミナルで
start index.html→ ブラウザでゲームが動作
今回は「いきなり実装させる」のではなく、仕様書（readme.md）を先に生成してから実装させる 2段階のプロンプトを使いました。仕様書が人間のレビューポイントになり、 実装指示は「仕様通りに」の一言で済むため、実務と同じ流れで安定して完成させられます。
1. モデルを選んで新規プロジェクト
AI チャットのモデルが gemini-3.8-flash になっていることを確認し、
エクスプローラーの「新規プロジェクト」で空のフォルダを作成します。
2. プロンプト1 — 仕様書だけを作らせる
チャットに以下のような内容を入力しました。ポイントは 「実装はせず readme.md だけ作って」と明記し、 決めていない細部（盤面サイズや色数）は AI に任せて仕様書に書き落とさせることです。
readme.md。盤面サイズや色数など、こちらが決めなかった部分も仕様として整理されています。ここで一度内容を目検で確認します。気に入らない部分は readme.md を直接編集しても、追記指示を出してもOKです。
3. プロンプト2 — 仕様通りに実装
仕様書ができたら、実装の指示はこれだけです。
AI は readme.md を読み込み、仕様に沿って3ファイルを作成します。 ファイルの書き込みは承認ダイアログで差分を確認してから「適用」します。
4. 内蔵ターミナルで起動
「表示 → ターミナルの表示切り替え」でターミナルを開き、
start index.html を実行すると既定のブラウザでゲームが起動します。
5. 完成したゲーム
2個1組のストーンを4・6キーで移動、5キーで回転、2キーで高速落下。 同色が3つ以上つながると消えて、上の石が落ちれば連鎖します。 NEXT表示、スコア・連鎖数表示、ゲームオーバー画面とリトライまで実装されました。
この例でわかること
- 実コストは約14円 Gemini 3.8 Flash + BYOK（自分の API キーを使う方式）で、ゲーム1本作って14円。Ollama のローカル LLM を選べば完全無料・オフラインでも同じことができます。
- 「仕様書先行」の2段階プロンプトが効く いきなり実装させるより、readme.md を先に作らせる方が安定します。仕様書は人間がレビューして調整できる上、実装指示は「仕様通りに」の一言で済みます。
- 承認フローで安全 ファイルの書き込み・編集・コマンド実行はすべて承認制。AI が勝手に進めることはありません。
- 専門用語は不要 「仕様をまとめた readme.md だけを作って」「仕様通りに実装して」——ファイル作成の内部コマンド（WRITE_FILE など）は IDE が解釈するので、自然な日本語だけで動きます。
※ 画面内の UI はテーマ「コケット（Coquette）」で撮影しています。他のテーマは テーマ一覧 で見られます。