はじめに
Google の AI 開発ツール AntigravityCLI を使って、Windows 上で動作するデスクトップ版チェスアプリを作ってみました。
(今回は、プロンプト設計から完成まで1時間以内でした。)
いきなりAIへ「作って」と投げるのではなく、まずGeminiで設計書を作り、それをAntigravityCLIへ渡しました。
まずgeminiに構成を依頼して、画面レイアウト（マルチペイン構成）と機能要件を明確に指示するプロンプトテンプレートを用意し、それを AntigravityCLI に投げることで、狙い通りの構成を一発で生成させることを目指しました。
（ちなみにreadmeはあとから付け足しました、動作は一応Windows11環境では動作確認済み）
本記事では、実際に使ったプロンプトと、生成されたコードを土台に完成させたアプリを紹介します。
完成イメージ
3ペイン構成のダークモード UI で、盤面・対局情報・棋譜ログがそれぞれ独立したエリアに配置されています。QSplitter を使っているため、境界線をドラッグしてペインの幅を自由に調整可能です。
[ 左ペイン：チェス盤 ] | [ 右上ペイン：対局情報 ]
| -------------------------
| [ 右下ペイン：棋譜ログ ]
Antigravity への指示書（プロンプト例）
以下のテキストをそのままコピーし、必要に応じて内容を変更して Antigravity に入力すれば、同様の構成を生成させやすくなります。
Windows 上で動作するデスクトップ版のチェスアプリを作成してください。
【技術スタック】
- OS: Windows 11
- 言語 / フレームワーク: Python + PySide6 (または PyQt6)
（※軽量かつモダンな GUI アプリとして動作させるため）
【レイアウト構成（マルチペイン）】
画面を3つのペイン（領域）に分割したマルチペインレイアウトにしてください。
-
左ペイン（メイン：チェス盤領域）
- 8x8 のチェスボードを大きく配置。
- 駒の描画、クリックによる選択・移動の操作を可能にする。
- 選択された駒の移動可能マスをハイライト表示する。
-
右手前・上ペイン（対局情報・取った駒）
- 現在の手番（白 / 黒）の表示。
- タイマー（対局時間のカウントダウン）。
- お互いが獲得した駒（取られた駒）のリスト表示。
-
右手前・下ペイン（棋譜・対局ログ）
- 棋譜（1. e4 e5 ... 等の表記）をリアルタイムで追記するスクロール可能なリスト。
- 「1手戻る（Undo）」「最初からやり直す（Reset）」の操作ボタン。
【デザイン・操作性】
-
QSplitterを使用し、ユーザーがペイン同士の境界線をドラッグして幅や高さを自由に調整できるようにしてください。 - ウインドウサイズ変更時もチェス盤の比率が崩れないようにリサイズ処理を行ってください。
- ダークモード基調のモダンな UI スタイルを適用してください。
まずは必要なライブラリのインストール手順と、このマルチペイン構造を持つ基本コード（エントリーポイント）を生成してください。
プロンプト設計の3つのポイント
AI にマルチペイン UI を狙い通りに作らせるには、以下の3点を押さえると失敗しにくくなります。
① 画面分割の仕組みを技術的に指定する
「マルチペインにして」と抽象的に伝えるだけでなく、実装手段そのものを指定するのがコツです。PySide6 / PyQt6 であれば QSplitter を使うのが最も確実で、ドラッグで境界幅を調整できるフレキシブルな分割（左右・上下）が簡単に実現できます。
② 各ペインの役割（責務）を明確にする
「左＝盤」「右上＝対局情報」「右下＝棋譜ログ」のように、配置場所ごとに置くべき情報をナンバリングして指定します。これをしないと、AI がどの情報をどこに置くか判断に迷い、レイアウトが安定しません。
③ リサイズ挙動を指定する
チェス盤は正方形（アスペクト比 1:1）を保つ必要があります。ウィンドウサイズ変更時に盤面が潰れたり歪んだりしないよう、リサイズ処理についても明示的に指示を入れておくと、生成されるコードの品質が上がります。
生成後のフィードバックの出し方
一発で完璧なコードが出てくるとは限りません。生成後にアプリを実際に動かしてみて、気になった点はそのまま自然文で Antigravity にフィードバックすると、細かい調整も追従してくれます。
「右ペインの幅をもう少し狭くして」
「棋譜ペインにコピー機能をつけて」
「駒の移動可能マスをもっと分かりやすい色にして」
実際に完成したアプリの構成
今回のプロンプトをベースに、AI との対局機能や棋譜の Undo/Redo、盤面反転などを追加実装し、最終的に以下のような構成になりました。
主な機能
🎨 ダークモード UI: QSplitter によるレスポンシブなレイアウトで、盤面とパネルの比率を自由に調整可能
🤖 内蔵 AI エンジン: Alpha-Beta 枝刈りを備えた Minimax アルゴリズムによる思考エンジン
👥 3つの対局モード: PvP（対人）、PvAI（対AI）、AI vs AI（観戦・分析）
♟️ 直感的な盤面操作: 選択した駒の移動可能マスを自動ハイライト、直前の手や王手状態を視覚的に通知
📜 棋譜履歴: SAN 形式でのリアルタイム棋譜ログ、Undo/Redo、盤面反転、リセット機能
プロジェクト構成
ファイル名 役割
main.py エントリポイント、メインウィンドウの構築
board_widget.py 盤面描画、駒の操作・ハイライトを担当する UI コンポーネント
history_widget.py 棋譜ログ、モード切り替え、操作ボタンのサイドパネル
ai_engine.py Minimax + Alpha-Beta 枝刈りによる AI 思考エンジン
styles.py ダークテーマの QSS（Qt Style Sheet）定義
config.py 定数・配色パレット・フォント設定
セットアップ
bash
git clone https://github.com/mitsuosa0903/chess.git
cd chess
pip install PySide6 python-chess
python main.py
Windows 環境では、run.bat をダブルクリックするだけでも起動できます。
まとめ
Antigravity のような AI 開発ツールに UI 構成を指示する際は、
分割の実装手段（今回なら QSplitter）を明示する
各領域の役割をナンバリングして具体的に指定する
レイアウト崩れを防ぐための挙動（アスペクト比維持など）まで踏み込んで指示する
という3点を意識するだけで、「なんとなく違う」出力に悩まされることがぐっと減ります。GUI アプリを AI に作らせる際のプロンプト設計の参考になれば幸いです。
ソースコード全体は以下のリポジトリで公開しています。よければ見てみてください。
追伸
おわりに
以前であれば、このようなGUIアプリを一から作るにはかなりの時間が必要でした。
今はAIに設計書を渡し、人間がレビューと調整を行うことで、短時間でも実用的なアプリを作れる時代になっています。
重要なのは「コードを書くこと」だけではなく、「AIにどう設計を伝えるか」です。
今回の記事が、GUIアプリ開発やプロンプト設計の参考になれば幸いです。