1. はじめに
この Codelab では、AI 主導のデザインとエージェント ファーストの開発環境を橋渡しして、本番環境に対応したウェブサイトを構築します。 Google Stitch を使用して高精細な UI を生成し、 Model Context Protocol（MCP） を介して Antigravity IDE に接続します。最後に、自律型エージェントを使用して「デザイン DNA」を取得し、ピクセルパーフェクトな React アプリケーションを実装します。
演習内容
- Stitch で UI を生成する: 自然言語を使用して、Google Stitch で本格的なウェブデザインを作成します。
- MCP で橋渡しする: Model Context Protocol を使用して、Antigravity を Stitch プロジェクトに接続します。
- 自律的な実装: Antigravity の [Agent Tab] を使用してデザイン トークンを取得し、React/Tailwind プロジェクトをスキャフォールディングします。
- 検証と絞り込み: 統合ブラウザを使用して、元のデザインに対してコードの「Vibe Check」を行います。
学習内容
- Google Stitch を使用して、高精細な UI デザインのプロトタイプを迅速に作成する方法。
- Antigravity IDE 内で MCP サーバーを構成する方法。
- 自律型エージェントを使用して、ビジュアル デザイン メタデータをモジュール化されたコードに変換する方法。
必要なもの
- Chrome ウェブブラウザ
- Antigravity IDE がインストールされている
- Google Stitch アカウント
- Stitch API キー
- Node.js（v18 以降）がローカルにインストールされている
始める前に
- Google Cloud コンソールのプロジェクト選択ページで、Google Cloud プロジェクトを選択または作成します。
- Cloud プロジェクトに対して課金が有効になっていることを確認します。詳しくは、プロジェクトで課金が有効になっているかどうかを確認する方法をご覧ください。
- stitch.withgoogle.com に移動し、ログインできることを確認します。
- Antigravity IDE がインストールされていることを確認します（antigravity.google で入手可能）。
2. Google Stitch でデザインを作成する
エージェントは、従うべきビジュアルな「信頼できる情報源」を必要とします。コードを記述する前に、美学を定義する必要があります。
- プラットフォームにアクセスする: stitch.withgoogle.com に移動します。
- プロジェクト タイプを選択する: メイン ダッシュボードで、[Start a new design] 切り替えボタンを見つけます。[Web] をクリックして、デザインがブラウザベースのレイアウトに最適化されていることを確認します。
- モデルを選択する: プロンプト ボックス内のモデル プルダウン メニュー（現在は [3.0 Flash] と表示）をクリックします。最も高度な推論とレイアウト生成を行うには、[Gemini 3] が選択されていることを確認します。
- [Describe your design] というラベルの付いたテキスト エリアに、次のプロンプトを入力します。
「LaunchPad という宇宙技術スタートアップ向けの最新の SaaS ランディング ページをデザインしてください。ミッドナイト ブルーとネオン パープルのパレットを使用します。[Get Started] ボタン付きのヒーロー セクション、3 列の機能グリッド、グラスモーフィズムの料金表を含めます。」5. 生成: [矢印アイコン]（モデル セレクタの横）をクリックして、生成プロセスを開始します。6. 絞り込みと名前付け: UI が生成されたら、上部のヘッダーにプロジェクト名を入力します。LaunchPad という名前を付けます。チャット サイドバーを使用して、IDE に移動する前に特定の要素を絞り込むことができます。
[!TIP] また、
「Try these prompts」
セクションから選択して、すぐに始めることもできます。
3. Antigravity MCP を構成する
Antigravity エージェントがデザインを「読み取る」ようにするには、安全な API キーを生成して Stitch MCP サーバーを追加する必要があります。
Stitch API キーを生成する
- Google Stitch で、右上にあるプロフィール写真 をクリックします。
- プルダウン メニューから [Stitch settings] を選択します。
- [API key] セクションに移動します。
- [Create key] ボタンをクリックします。
- キーをコピーする: 生成されたキーをすぐにコピーして、安全に保管します。次のステップで必要になります。
Antigravity で Stitch MCP を構成する
- Antigravity IDE を開きます。
- Agent Manager を開きます。
いつでも、CMD+E キー（Mac）または CTRL+E キー（Windows）を押すか、メニューバーの右上にある [Open Editor] ボタンと [Open Agent Manager] ボタンを使用して、Agent Manager とエディタを切り替えることができます。。
- [**\+ Open Workspace**] をクリックします。
ワークスペース内で新しい会話を開始するには、[Start Conversation] タブで目的のワークスペースを選択するか、サイドバーのワークスペース名の横にあるプラスボタンを押します。
- [Open New Workspace] をクリックして、ワークスペースに
LaunchPad-Projectという名前を付け、ローカル ディレクトリを選択します。これにより、エージェントは、他のプロジェクトを煩雑にすることなく、ファイルをスキャフォールディングするための特定のルートフォルダを持つことができます。
Stitch MCP を構成する
- 新しいワークスペース内で、Agent Manager （Mac の場合は CMD+E、Windows の場合は CTRL+E）に戻り、[MCP Servers] を選択します。
エディタのエージェント ペインの上部にある「...」プルダウンから MCP ストアを開きます。
Antigravity は、エディタがローカル ツール、データベース、外部サービスに安全に接続できるようにする標準である Model Context Protocol（MCP）をサポートしています。この統合により、AI はエディタで開いているファイルだけでなく、リアルタイムのコンテキストも取得できます。
MCP は、Antigravity と Google Stitch の間のブリッジとして機能します。デザイン トークンを手動でエクスポートしたり、16 進コードとレイアウト メタデータをエディタにコピーしたりする代わりに、MCP を使用すると、Antigravity は必要に応じて Stitch プロジェクトからデザイン DNA を直接取得できます。
- 「Stitch」 を検索して [Install] をクリックします。
- プロンプトが表示されたら、構成フィールドにStitch API キー を貼り付けます。
- 確認: エージェント チャットで「
List my Stitch projects.」と入力します。LaunchPadが返されたら、準備完了です。
- 確認: エージェント チャットで「
List my Stitch projects.」と入力します。エージェントがLaunchPadを返したら、ブリッジは正常に構成されています。
4. デザイン コンテキストを取得する
エージェントは、コードの正確性を確保するために、デザイン メタデータを取り込む必要があります。
- Antigravity チャットで、「Use the Stitch MCP to fetch the ‘LaunchPad' project. Extract the color palette and typography, then generate a
DESIGN.mdfile in my root directory.」と入力します。 - 確認: 新しく作成した
DESIGN.mdを開いて、エージェントが抽出した 16 進コードとレイアウト ルールを確認します。
5. 実装（ビルド）
エージェントを使用して、デザインを動作する React アプリケーションに変換します。
- 「Build」プロンプトを入力します。
「このウェブサイト全体を今すぐ構築したい。React と Tailwind CSS を使用してください。コンポーネントがモジュール化されていることを確認してください。完了したら、開発サーバーを実行して、統合ブラウザに表示してください。」2. エージェントを観察する: エージェントは、ターミナルでプロジェクトをスキャフォールディングし、エディタにコンポーネントを書き込み、統合ブラウザでプレビューを開きます。
6. 確認と絞り込み
出力を確認し、エージェントを使用して視覚的な不一致を修正します。
- 統合ブラウザの出力と元の Stitch デザインを比較します。
- ボタンのパディングやフォントの太さなどの要素が一致しない場合は、エージェントに「The ‘Get Started' button padding is slightly off. Refer back to the Stitch design and update the Tailwind classes.」と指示します。
- エージェントはデザイン コンテキストを再取得し、修正を即座に適用します。
7. まとめと次のステップ
おめでとうございます！Antigravity と Stitch MCP を使用して、高精細なデザインと機能するコードベースのギャップを埋めることができました。
実施した内容の概要:
- Gemini 3 を使用して Stitch で UI を設計しました。
- 安全な API キー を生成し、Antigravity MCP を構成しました。
- 自律型エージェントを使用して React + Tailwind サイトを構築し、検証しました。