はじめに
本記事は、生成 AI を使った開発フローに興味のあるエンジニア向けの内容です。
最近の AI の進化は凄まじい。さらに Google Stitch を使うと、いい感じの UI を作成できるという話も耳にしました。
そこで、 UI デザインから実装までを AI に丸投げした場合、 どのくらいのスピードで、どのくらいの品質のものができるのか を確かめてみたいと考えました。
上記のような想いから、今回は、
- ChatGPT で要件を言語化し
- Google Stitch で UI を生成し
- Antigravity の Agent Manager を使って、Claude Opus 4.5 に実装を指示する
という流れを、 最後までやり切ったらどうなるのか を試します。
- ワイヤーフレームなし
- 人手によるコーディングなし
AI エージェントだけで、Flutter アプリを起動するところまで 実際にやってみた記録です。
この記事で分かること
- ChatGPT をプロンプト生成器として使う実例
- Google Stitch の UI 生成結果のクオリティ
- Antigravity + MCP + Skills によるツール連携
- AI 任せにした場合の実装クオリティ
① ChatGPT に Google Stitch 用プロンプトを作らせる
ここでは、UI を直接作るのではなく、 Google Stitch に渡す「設計用プロンプト」を ChatGPT に作らせます。
実際に投げた指示
今回の検証では所属している会社とは関係なく、自分のサイドプロジェクトとして「訪日外国人用のアプリ」があったら喜ばれるのではないか、と考えていることから、こちらを題材に作成してもらおうと思います。
Google Stitch にスマホアプリのデザインを作成してもらうためのプロンプトを書いてほしいです。
作りたいアプリは、訪日外国人が日本に入国してから出国するまでをトータルでサポートするアプリです。
具体的には、入国審査の際に気をつけること、モバイル通信を利用するための SIM 契約方法、電車やタクシーなどの移動手段の使い方、レストランでの食事の作法、簡単な日本語表現などを総合的にサポートしたいと考えています。
また、お土産の購入方法を調べられる機能に加え、掲示板のような形でユーザーが Tips を投稿・共有できる機能も追加したいです。
（私の環境だけかもしれませんが）
Google Stitch は日本語だと期待通りの UI が生成されなかったため、最終的には英語のプロンプトを使用しました。
【参考】実際に使った Google Stitch 英文プロンプト
以下は、ChatGPT が生成した英文プロンプトの要点を抜粋したものです。Create a complete mobile app design for a travel assistance app for foreign visitors to Japan. The target users are international travelers who want guidance from the moment they arrive in Japan until they depart. The app should provide:
1. Simple onboarding flow for first-time users arriving in Japan.
2. Clear guidance on key arrival procedures:
- What to prepare before immigration and customs
- What to expect at immigration checkpoints
- Entry rules, visa basics, common mistakes to avoid
3. Support for mobile connectivity:
- How to get mobile data / SIM card
- Choose between eSIM, physical SIM, pocket Wi-Fi
- Step-by-step setup for users who don’t speak Japanese
4. Transportation support:
- Train navigation (JR, Shinkansen, metro, IC cards like Suica/PASMO)
- Taxi usage tips (how to hail, payment, etiquette)
- Ride-sharing options if available
5. Local cultural tips:
- Basic Japanese phrases with audio examples
- Restaurant etiquette and common dining rules
- Onsen/bathing manners
- Tipping culture and public manners
6. Planning and exploration tools:
- AI-powered search for sightseeing, restaurants, shopping
- Suggestions for souvenirs and tax-free shopping
- Maps and offline access
7. Social and community features:
- A forum or bulletin board where travelers can share tips
- Tagging features (e.g., “best ramen in Shinjuku”, “IC card top-up tips”)
- Local expert contributions
8. UX/UI expectations:
- Friendly, simple, and intuitive UI
- Multilingual support: at minimum English, Chinese (Simplified/Traditional), Korean
- Icons and visuals that are easy to understand for non-Japanese speakers
- Offline support for key features
Please provide screens, user flows, color scheme suggestions, UI components, and a style guide suitable for both Android and iOS.
Generate:
- A sitemap
- Key screens with annotations
- Interaction details
- Suggested text content for core screens
② Google Stitch で UI を生成する
次に、作成したプロンプトを Google Stitch に渡し、実際にどのレベルの UI が生成されるのかを確認します。
以下は、Google Stitch が生成した主要な画面になり、オンボーディングからの流れが最低限揃っています。
【言語選択ページ】
【旅行前のチェックリスト】
【ダッシュボード】
【eSIM のガイド】
【IC カードなど公共交通機関の案内】
③ Antigravity から Stitch を使えるように MCP サーバーを設定
ここでは、Antigravity から Google Stitch を操作できるようにするため、 MCP サーバーの設定を行います。
詳細な手順は Google Stitch の 公式ドキュメント に譲りたいと思います。
簡単な流れとしては Google Stitch 側で API Key を発行し、 Antigravity の MCP 設定から連携できるように設定しました。
なお 2026年2月の時点では MCP Store に Google Stitch がなかったため JSON ファイルに追記して設定しました。
設定が完了すると、以下のような画面が表示されます。
④ Antigravity に Google Stitch の Skill を追加
続いて、Antigravity に Google Stitch の Skill を追加し、エージェントが上手く Google Stitch の機能を利用できるようにします。
MCP と同じように 公式ドキュメント がありますので、詳細はそちらを参照してください。
筆者はドキュメントのガイドに従い npx add-skill を使い、下記の skill を追加しました。
- design-md
- react-components
- stitch-loop
- enhance-prompt
⑤ Agent Manager × Claude Opus 4.5 で Flutter 実装
ここからは、準備した環境を使って、Claude Opus 4.5 に Flutter アプリとして実装させます。
今回は「どこまで AI に丸投げできるのか」を確認したかったため、 Agent Manager から主に指示を出しました。
Claude Opus 4.5 への指示
まず、MCP サーバー経由で Google Stitch のプロジェクトを正しく参照できるかを確認します。
google stitchのプロジェクトを取得してください。
無事にプロジェクトを参照できることを確認しましたので、Claude Opus 4.5 に以下のプロンプトを指示してアプリを実装してもらいます。
Google Stitch で作成された画面デザインを元に、 Flutter アプリを実装してください。
- Widget 構成は可読性を優先
- 画面ごとに Widget を分離
- 状態管理はシンプルに
- 後から人間が修正しやすい構成にすること
およそ 15 分ほどで Google Stitch で作成した 5 つの画面を実装してくれました。
⑥ Simulator で起動してみる
最後に、生成された Flutter アプリを Simulator で起動し、実際にどのような画面・挙動になるかを確認します。
【言語選択ページ】
【旅行前のチェックリスト】
【ダッシュボード】
【eSIM のガイド】
【IC カードなど公共交通機関の案内】
所感
ここでは、今回の検証を通して感じたことや、今後の開発スタイルについての所感をまとめます。
正直、 想像以上のスピードで、想像以上のクオリティ のものが出来上がったと感じました。
もちろん、実際にストアへ公開して使ってもらうためには、セキュリティ、エラーハンドリング、UX の作り込みなど、考慮すべき点はまだ多くあります。
それでも、 アイデアから 「動くもの」 ができるまでのスピードは段違い です。
また、個人的には、今後は Claude Code を使った スペック駆動開発（Spec / Task ベース） が主流になっていくと考えていましたが、
Antigravity は標準で
- Implementation Plan
- Task
- Walkthrough
が生成されるため、 Antigravity もいいなと感じました。
もう一点、個人的な感想ですが、
現時点ではコーディングに関しては Claude Opus 4.5 が、他の基盤モデルと比べて遠回りが少なく、期待通り、あるいは期待以上のアウトプットを出してくれると感じています。
今後は、Firebase や Supabase などの mBaaS と組み合わせて、より MVP として実用的なアプリがどこまで作れるかを検証していきたいと思います。
また、アプリが大規模化しコンテキストが肥大化したときに、期待通りの実装が維持できるかどうかも試していきたいと考えています。
今後どうなっていくか確かなことは分かりませんが、少なくとも「アプリ開発の入り口」は、確実に別のものになりつつあると感じる体験でした。
最後に、同じような構成で検証している方がいれば、ぜひコメントで教えてください。