Google StitchとAntigravityの連携と使い方（APIキー＋MCP）

1. StitchのサイトとAPIキー作成

GoogleのデザインツールStitch（stitch.withgoogle.com）にアクセスします。Antigravityから利用するには、まずStitch側でAPIキーを作成する必要があります。

Googleアカウントでログイン後、画面右上のアカウントメニューから「Stitch の設定」を開きます。

設定ページ内の「APIキー」セクションで「キーを作成」を押すと、APIキーが発行されます。

作成後、APIキー（一部のみ表示）・作成日時・前回の使用状況などが表示されます。キーは再表示できない場合があるため、必ずコピーして安全に保管してください。公式では、公開されたAPIキーは自動で無効化されると案内されています。

2. Antigravityにキーを設定してMCPを有効化

Antigravity側では、MCPサーバーがすでに用意されています。メニューから「MCP Servers」を開き、StitchのMCPを追加します。

MCPサーバー一覧に「Stitch」が含まれており、インストール（追加）すれば利用可能です。

Stitch MCPを追加する際、ダイアログで「Stitch API Key」の入力が求められます。Stitchの設定画面（stitch.withgoogle.com/settings）で作成したAPIキーを貼り付けて保存します。

設定が完了すると、Manage MCP servers の一覧にStitchが表示され、create_project・generate_screen_from_text・edit_screens などのツールが利用可能になります。反映されない場合は、Antigravityの再起動を試してください。

3. 会話でStitch MCPを使って画面を生成する

チャットで「Stitch MCPを使って、〇〇なホームページを作成して」のように依頼すると、Antigravityが create_project や generate_screen_from_text などのMCPツールを呼び出してくれます。

例として「スタイリッシュで動的な唐揚げのお店のホームページを作成して」と依頼すると、Stitch上でプロジェクトが作られ、画面が生成されます。Stitchのサイト（stitch.withgoogle.com）にアクセスすると、作成されたデザインを確認できます。

4. 作成したデータをローカルプロジェクトに保存する

Stitch上でできたデータをローカルで使うには、「Stitchからデータを持ってきて、指定したプロジェクトフォルダに保存して」とAntigravityに依頼します。get_screen 等で取得したHTMLが、ローカルプロジェクトに保存されます。

保存後は、エクスプローラーから該当HTMLを開いて確認できます。ここから、Antigravityに「もっと明るいイメージにして」「このセクションを変更して」などと指示を出して、Stitch上のデザインを編集していくことができます。

5. 編集指示と改変データの再取得

「既存の唐揚げページを明るいイメージにして」のように依頼すると、Stitch上で edit_screens 等が実行され、デザインが更新されます。Stitchのサイト上で、明るいテーマのバリアントなどが追加された状態を確認できます。

改変したデータも同様に、「改変したデータを取得してローカルプロジェクトに保存して」と依頼すれば、更新後のHTMLなどがプロジェクト内に保存されます。

6. ローカルでの活用と微調整の考え方

前提：筆者はデザイナーでも、お金をもらってデザイン・制作しているプロではありません。以下は、その立場で使い方を想像して書いたものです。業務でデザインを請け負っている方や、ミリ単位の調整を日常的に行う方とは前提が異なります。

プロではない立場だと、保存したHTMLをローカルでどういじるか、あまりピンとこないかもしれません。業務でデザインをしている方ならミリ単位の調整も日常でしょうが、ここではそうではない前提で、自分なりに「こう使えそう」と想像したことをいくつかに分けて書きます。

6.1 プロンプトでデザイン観点を伝えて訂正してもらう

専門家ではないので、細かい数値は指定できません。代わりに、「この部分を黄金比を利用した表現にして」「ユーザー目線を考えた配置に訂正して」のように、デザインの観点をプロンプトで伝えて、AntigravityのLLMとMCP Stitchに訂正してもらうイメージで考えています。ある範囲を指定して「この部分を〇〇な表現に」と頼み、MCP経由でStitchを再編集・再構築してもらう形です。もともとStitchの出力は完成度が高いので、自分でできるのは「観点を言葉で渡す」くらいで、あとはプロンプトと少しの微調整で仕上げる想定です。

6.2 Chromeの検証で構成を確認してから指示する

私の場合は、保存したHTMLをChromeで開き、開発者ツール（検証）で「どの要素がどこに対応しているか」をざっと確認してから、Antigravityに「この余白を詰めて」などと伝え、MCPでStitchを再編集してもらう流れを想定しています。ページ上の部分を選択して検証ボタン（または右クリック→検証）で該当するソースを特定できるので、そこを手がかりに「ここをこうして」と頼みやすくなる、という感じです。

6.3 出力のTailwind CSSと本番運用について

Stitchで生成したHTMLをローカルで開くと、cdn.tailwindcss.com（例：?plugins=forms,container-queries 付き）から Tailwind CSS を読み込んでいることがあります。筆者が開いたときも、ブラウザのコンソールに「cdn.tailwindcss.com should not be used in production」というメッセージが出ていました。

Tailwind 公式では、Play CDN は開発用途向けで、本番環境には向かないとされています（Play CDN）。開発・確認のうちはCDNのままで問題ないと思いますが、本番で使うときは、PostCSS プラグインや Tailwind CLI で静的CSSをビルドする公式の方法（インストール）を検討する旨、公式に書かれています。筆者も一度試してみましたが、これまたややこしいのですが、知っておいて損はないと思います。

以上が、StitchのAPIキーとMCPを使った、Antigravityとの一般的な連携の流れです。GCPの設定に頼らず、Stitchの設定画面とAntigravityのMCP設定だけで、会話から生成・編集・ローカル保存まで一通り試せます。セクション6の微調整の話は、あくまでプロではない筆者が使い方を想像して書いたものです。