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 プロジェクトをスキャフォールディングします。
- 検証と調整: 統合ブラウザを使用して、元の設計に対してコードの「バイブ チェック」を行います。
学習内容
- Google Stitch を使用して高忠実度の UI デザインのプロトタイプを迅速に作成する方法について説明します。
- Antigravity IDE 内で MCP サーバーを構成する方法。
- 自律エージェントを使用して、ビジュアル デザインのメタデータをモジュラー コードに変換する方法。
必要なもの
- Chrome ウェブブラウザ
- Antigravity IDE がインストールされている
- Google Stitch アカウント
- Stitch API キー
- ローカルにインストールされた Node.js（v18 以降）
始める前に
- Google Cloud コンソールのプロジェクト選択ページで、Google Cloud プロジェクトを選択または作成します。
- Cloud プロジェクトに対して課金が有効になっていることを確認します。詳しくは、プロジェクトで課金が有効になっているかどうかを確認する方法をご覧ください。
Google Cloud クレジットの場合: Google Cloud プロジェクトで Antigravity を使用できるように、こちらのリンクを使用して無料の Google Cloud クレジットを利用してください。クレジットを有効にして新しいプロジェクトを作成するには、こちらの手順に沿って操作してください。
- stitch.withgoogle.com にアクセスし、ログインできることを確認します。
- Antigravity IDE がインストールされていることを確認します（antigravity.google で入手できます）。
2. Google Stitch でデザインを作成する
エージェントは、従うべき視覚的な「信頼できる情報源」を必要としています。コードを記述する前に、美学を定義する必要があります。
- プラットフォームにアクセスする: stitch.withgoogle.com にアクセスします。
- プロジェクト タイプを選択する: メイン ダッシュボードで、[新しいデザインを開始] 切り替えボタンを見つけます。[ウェブ] をクリックして、デザインがブラウザベースのレイアウトに最適化されていることを確認します。
- モデルを選択する: プロンプト ボックス内のモデル プルダウン メニュー（現在は 3.0 Flash と表示されています）をクリックします。最も高度な推論とレイアウト生成を行うには、Gemini 3 が選択されていることを確認します。
- ビジョンを説明する: [デザインを説明する] というラベルの付いたテキスト エリアに、プロンプトを入力します。
「LaunchPad という宇宙技術スタートアップ向けの最新の SaaS ランディング ページをデザインしてください。ミッドナイトブルーとネオンパープルのパレットを使用します。「[Get Started] ボタン付きのヒーロー セクション、3 列の機能グリッド、グラスモーフィズムの料金表を含めてください。」5. 生成: [矢印アイコン]（モデル セレクタの横）をクリックして、生成プロセスを開始します。6. 調整と名前付け: UI が生成されたら、上部のヘッダーでプロジェクトに名前を付けます。LaunchPad という名前を付けます。チャット サイドバーを使用して、IDE に移動する前に特定の要素を調整できます。
[!TIP]
「これらのプロンプトを試す」
セクションをご覧ください。
3. Antigravity MCP を構成する
Antigravity Agent がデザインを「読み取る」ようにするには、安全な API キーを生成して Stitch MCP サーバーを追加する必要があります。
Stitch API キーを生成する
- Google Stitch で、右上にあるプロフィール写真をクリックします。
- プルダウン メニューから [スティッチ設定] を選択します。
- [API キー] セクションに移動します。
- [鍵を作成] ボタンをクリックします。
- キーをコピーする: 生成されたキーをすぐにコピーして安全に保管します。これは次のステップで必要になります。
Antigravity で Stitch MCP を構成する
- Antigravity IDE を開きます。
- エージェント マネージャーを開きます。
CMD+E（Mac）または CTRL+E（Windows）を押すか、メニューバーの右上にある [エディタを開く] ボタンと [エージェント マネージャーを開く] ボタンを使用して、エージェント マネージャーとエディタをいつでも切り替えることができます。.
- [+ ワークスペースを開く] をクリックします。
ワークスペース内で新しい会話を開始するには、[会話を開始] タブで目的のワークスペースを選択するか、サイドバーのワークスペース名の横にあるプラスボタンをクリックします。
- [Open New Workspace] をクリックし、ワークスペースに
LaunchPad-Projectという名前を付けて、ローカル ディレクトリを選択します。これにより、他のプロジェクトを混乱させることなく、ファイルをスキャフォールディングするための特定のルートフォルダがエージェントに確保されます。
Stitch MCP を構成する
- 新しいワークスペース内で、エージェント マネージャー（Mac の場合は CMD+E、Windows の場合は CTRL+E）に戻り、[MCP サーバー] を選択します。
エディタのエージェント ペインの上部にある [...] プルダウンから MCP ストアを開きます。
Antigravity は、エディタがローカルツール、データベース、外部サービスに安全に接続できるようにする標準である Model Context Protocol（MCP）をサポートしています。この統合により、AI はエディタで開いているファイルだけでなく、リアルタイムのコンテキストも把握できます。
MCP は、Antigravity と Google Stitch の間のブリッジとして機能します。MCP を使用すると、デザイン トークンを手動でエクスポートしたり、16 進コードやレイアウト メタデータをエディタにコピーしたりする代わりに、必要に応じて Stitch プロジェクトから直接デザイン DNA を取得できます。
- 「Stitch」 を検索して、[インストール] をクリックします。
- プロンプトが表示されたら、[Stitch API Key] を構成フィールドに貼り付けます。
- 確認: エージェント チャットで「
List my Stitch projects.」と入力します。LaunchPadが返されたら、準備完了です。
- 確認: エージェント チャットで「
List my Stitch projects.」と入力します。エージェントがLaunchPadを返した場合は、ブリッジが正常に構成されています。
4. 設計コンテキストを取得する
エージェントは、コードの精度を確保するために、設計メタデータを取り込む必要があります。
- Antigravity チャットで、「Use the Stitch MCP to fetch the ‘LaunchPad' project. カラーパレットと書体を抽出し、ルート ディレクトリに
DESIGN.mdファイルを生成して。」 - 確認: 新しく作成された
DESIGN.mdを開き、エージェントが抽出した 16 進コードとレイアウト ルールを確認します。
5. 実装（ビルド）
エージェントを使用して、設計を動作する React アプリケーションに変換します。
- 「ビルド」プロンプトを指定します。
「今すぐこのウェブサイト全体を構築したい。React と Tailwind CSS を使用します。コンポーネントがモジュール化されていることを確認します。完了したら、開発サーバーを実行して、統合ブラウザで表示してください。」2. エージェントを観察する: ターミナルでプロジェクトをスキャフォールディングし、エディタでコンポーネントを記述し、統合ブラウザでプレビューを開きます。
6. 確認と絞り込み
出力を確認し、エージェントを使用して視覚的な不一致を修正します。
- 統合ブラウザの出力を元の Stitch デザインと比較します。
- 要素（ボタンのパディングやフォントの太さなど）が一致しない場合は、エージェントに「[Get Started]（始める）ボタンのパディングが少しずれています。Stitch のデザインを参照して、Tailwind クラスを更新してください」と伝えます。
- エージェントは設計コンテキストを再取得し、修正を即座に適用します。
7. まとめと次のステップ
おめでとうございます！Antigravity と Stitch MCP を使用して、高忠実度のデザインと機能的なコードベースのギャップを埋めることができました。
行った操作の概要:
- Gemini 3 を使用して Stitch で UI を設計しました。
- 安全な API キーを生成し、Antigravity MCP を構成しました。
- 自律型エージェントを使用して React + Tailwind サイトを構築し、検証しました。