2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

AI IDEに14円で落ちものパズルを作らせた — 「仕様書先行」の2段階プロンプトが安定する

2
Posted at

自作の 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 を選び、エクスプローラーの「新規プロジェクト」で空のフォルダを作ります。

起動直後のTeaspoon IDE

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

ここが人間のレビューポイントです。気に入らなければ readme.md を直接編集しても、追記指示を出してもOK。実装前に「思ってたのと違う」を潰せます。

3. プロンプト2 — 仕様通りに実装

仕様書に納得したら、実装指示はこれだけです。

readme.mdの仕様通りに実装して

AI は readme.md を読み込み、index.html / style.css / script.js を作成します。ファイルの書き込みは勝手には行われず、承認ダイアログで内容を確認してから適用します。

ファイル編集の承認ダイアログ

4. 内蔵ターミナルで起動

表示メニューからターミナルを開き、start index.html を実行するだけです(AI に「ブラウザで開いて」と頼んでも同じです)。

ターミナルで start index.html

ブラウザでゲームが起動して完成。ここまでプロンプト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 を作らせる」試してみてください。

2
0
10

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?