Google Stitch × Antigravity — デザインファーストなAI開発ワークフロー

デザインとコーディングをAIで橋渡しする

Google Stitchは、AIを活用したUIデザインツールです。自然言語でUIコンポーネントを生成し、ピクセルパーフェクトなデザインを出力できます。そしてAntigravityは、AIエージェントによるコーディングプラットフォームです。

この2つを組み合わせることで、デザインからコーディング、デプロイまでをAIが一貫して担う「デザインファースト」ワークフローが実現します。

Stitch MCPサーバーのセットアップ

AntigravityでStitchを利用するには、MCPサーバーとして追加します。設定は3ステップで完了します。

ステップ1: MCPの設定ファイルを開く

# Antigravityの設定ディレクトリ
cd ~/.antigravity/
# MCP設定ファイルを編集
nano mcp-servers.json

ステップ2: Stitchサーバーを追加

{
  "servers": {
    "stitch": {
      "command": "npx",
      "args": ["@google/stitch-mcp-server"],
      "env": {
        "GOOGLE_API_KEY": "your-api-key"
      }
    }
  }
}

ステップ3: Antigravityを再起動

設定ファイルを保存してAntigravityを再起動すると、エージェントがStitchの機能にアクセスできるようになります。

実践ワークフロー

デザイン → コード → デプロイ

Stitchでデザイン生成: 「ダッシュボードのUI、ダークテーマ、サイドバーナビ付き」のように自然言語で指示
Antigravityエージェントがコードへ変換: StitchのデザインをReactコンポーネントとして実装
テスト＆デプロイ: エージェントが自動でテストを実行し、Cloudflare Workersやvercelにデプロイ

既存プロジェクトへの適用

既存のプロジェクトにStitchデザインを組み込むことも可能です。

@antigravity このプロジェクトの設定画面を
StitchでリデザインしてReactコンポーネントに変換してください。
既存のTailwindクラスとデザインシステムに合わせてください。

Antigravityエージェントは既存のコードベースを分析し、デザインシステムに沿った形でStitchのデザインを統合します。

Stitch × Antigravityの強み

デザイナーとの連携がスムーズに

デザイナーがStitchでモックアップを作成し、そのままAntigravityのエージェントがコード化するフローが実現します。デザインの意図を損なわずにコードに落とし込めるため、デザインと実装のギャップが最小化されます。

イテレーション速度の向上

デザイン変更→コード反映のサイクルが数分で完了します。従来のFigma→手動コーディングのフローと比べて、大幅な時間短縮が期待できます。

注意点

Stitch MCPサーバーはまだベータ段階のため、一部のUIパターンで期待通りの出力が得られない場合があります
Google API Keyが必要です（AI Studio から取得可能）
複雑なアニメーションやインタラクションは、エージェントによる手動調整が必要になることがあります

Figma を間に挟む — 試作は Stitch、設計の確定は Figma、実装は Antigravity

Stitch の出力は速いのですが、得られるのは「見た目」であって「仕様」ではありません。画面が数枚で使い捨てなら、そのまま Antigravity に渡して構いません。ただ、画面数が増えてデザインシステムを保ちたくなったときは、Stitch と Antigravity の間に Figma を一枚挟むと、後からの修正がぐっと楽になります。

受け渡しは、小さな設計メモから始めます。Stitch で決めた配色・フォント・余白の基準値を、短い Markdown に書き出しておきます。

# Design Metadata
## Color Palette
- Primary: #3A86FF
- Background: #FFFFFF
- Text: #1A1A1A
## Typography
- Heading: Inter Bold, 32px
- Body: Inter Regular, 16px / line-height 1.6
## Spacing
- Base unit: 4px (4 / 8 / 12 / 16 / 24 / 32)

このメモの値を Figma の Variables に転記すると、Stitch の抽象的なビジュアルが、明示的なトークンに変わります。ここが Figma を挟む一番の意味です。

Antigravity は Figma の Dev Mode をそのまま読み取れます。Dev Mode で付いた計測値、たとえば「左マージン 16px」は margin-left: 16px に、primary-color トークンは --color-primary という CSS 変数に落ちます。モバイル・タブレット・デスクトップのブレークポイントが用意されていれば、@media ルールとして実装されます。手で数値を打ち直す必要がありません。

エージェントへの指示は、Dev Mode を見るよう明示します。

@antigravity この Figma ファイル（Dev Mode 有効）の設定画面を React に変換してください。
定義済みの Variables を CSS カスタムプロパティに対応させ、
余白とブレークポイントは Dev Mode の計測値に従ってください。

Figma を挟むかどうかは、規模で決めています。使い捨ての試作や一枚もののランディングページなら、Stitch から Antigravity へ直結で十分です。複数画面をまたぐプロダクト、チームでの受け渡し、ライトとダークのテーマ切り替えが必要になった時点で、Figma を一枚挟む——という線引きです。私自身、個人開発で画面が一枚二枚のうちは Stitch から直接コード化してしまいますが、Dolice の複数サイトで共通のトークンを使い回したくなった時点で、Figma を経由するようにしています。

全体を振り返って

Google Stitch × Antigravityの組み合わせは、デザインからデプロイまでをAIで一気通貫に行う新しい開発スタイルを可能にします。MCPサーバーの追加だけで使い始められるので、次のプロジェクトでぜひ試してみてください。