自作の AI IDE「Teaspoon IDE」に、ぷよぷよ風の落ちものパズルゲームを作らせてみました。入力したプロンプトは2回だけ。かかった API 料金はおよそ 14円(Gemini 3.8 Flash、Google AI Studio で確認)でした。
完成品はブラウザでそのまま遊べます:
🎮 https://cuculhart.com/sample/puyo/index.html
2個1組のストーンが上から落ちてきて、同色が上下左右に3つ以上つながると消える、という簡易ぷよぷよです。ちゃんと連鎖もします(画像は連鎖3・スコア210のところ)。
手順
1. モデルを選んで新規プロジェクト
AI チャットのモデルに gemini-3.8-flash を選び、エクスプローラーの「新規プロジェクト」で空のフォルダを作ります。
2. プロンプト1 — 仕様書だけを作らせる
いきなり「ゲームを作って」とは言いません。まず仕様書(readme.md)だけを作らせます。
簡易なぷよぷよ的なパズルゲームを作りたい。まず実装はせず、仕様をまとめた readme.md だけを作って。内容は、2個セットのストーンが上から落ちてきて、接地したあと同色が上下左右に3つ以上つながったら消える、消えた後に上の石が落ちてまた揃ったら連鎖、画面上部に石がはみ出した状態で落下が終わったらゲームオーバー。操作は4キーで左移動、6キーで右移動、5キーで右回転、2キーで高速落下。ファイルはindex.html、style.css、script.jsの3つ構成で、効果音とかはいらないのでシンプルに。盤面サイズや色数とか決まってない部分は適当に決めてreadme.mdに書いて。
すると AI が仕様書を生成します。盤面サイズ(6×12)や色数(4色)など、こちらが決めなかった細部も仕様として書き落としてくれます。
ここが人間のレビューポイントです。気に入らなければ readme.md を直接編集しても、追記指示を出してもOK。実装前に「思ってたのと違う」を潰せます。
3. プロンプト2 — 仕様通りに実装
仕様書に納得したら、実装指示はこれだけです。
readme.mdの仕様通りに実装して
AI は readme.md を読み込み、index.html / style.css / script.js を作成します。ファイルの書き込みは勝手には行われず、承認ダイアログで内容を確認してから適用します。
4. 内蔵ターミナルで起動
表示メニューからターミナルを開き、start index.html を実行するだけです(AI に「ブラウザで開いて」と頼んでも同じです)。
ブラウザでゲームが起動して完成。ここまでプロンプト2回・所要数分・約14円でした。
なぜ「仕様書先行」が安定するか
今回の「readme.md → 実装」の2段階は、実際の開発ワークフローと同じ形です。
- 仕様書が事実上の詳細プロンプトになる — 実装指示は「仕様通りに」の一言で済む
- 人間がレビューして調整できる — 盤面サイズやルールの解釈違いを実装前に潰せる
- AI も迷いが減る — 要件が文書化されているので、実装時のブレが少ない
「AIに任せて一発で作る」よりも、ワンクッション置く方が結果的に速くて確実、という実感があります。
生成されたゲームの中身
全部で4ファイル(readme.md 含む)です。
| ファイル | 役割 |
|---|---|
index.html |
盤面・NEXT・スコア・操作説明・ゲームオーバー画面の骨格 |
style.css |
4色のストーン、消去アニメーション、レイアウト |
script.js |
落下・移動・回転・連結判定・消去・連鎖・重力・ゲームオーバー判定 |
readme.md |
AI が生成した仕様書(実物はこちら) |
ちなみに readme.md は単なるメモではなく、実装の材料として AI が読み込むファイルです。「仕様書が仕様として機能する」のが2段階方式の肝ですね。
Teaspoon IDE について
今回使ったのは自作のオープンソース系 AI IDE「Teaspoon IDE」です。
- エクスプローラー・Monaco エディター・AI チャット・Git・ターミナルが一体の Electron 製 IDE
- AI がファイル作成・編集・検索・コマンド実行を自律的に進めるエージェントループ内蔵
- 書き込み・コマンド実行はすべて承認ダイアログ経由。チェックポイントからロールバックも可能
- Gemini API は BYOK(自分のキーを使う)なので料金は使った分だけ。Ollama + ローカル LLM を選べば完全無料・オフラインでも動きます
リポジトリ: https://github.com/cuculhart/teaspoon-ide
製品ページ: https://cuculhart.com/teaspoon.html
今回の手順をスクショ付きで解説したページ: https://cuculhart.com/teaspoon-usecase2.html
まとめ
- プロンプトは「仕様書を作って」→「仕様通りに実装して」の2回
- 落ちものパズル(連鎖あり)が完成し、実際に遊べる
- コストは Gemini 3.8 Flash で約14円
- 「仕様書先行」は小さいアプリ作りでも有効な型
皆さんも「まず readme.md を作らせる」試してみてください。




