Google Stitch ガイド

# gcloud CLI がない場合はまずインストール
# https://cloud.google.com/sdk/docs/install
 
# Google Cloud 認証
gcloud auth login
 
# プロジェクト設定 (既存プロジェクト使用時)
gcloud config set project YOUR_PROJECT_ID

# beta コンポーネントインストール (最初の 1 回のみ)
gcloud components install beta
 
# Stitch API 有効化
gcloud beta services mcp enable stitch.googleapis.com --project=YOUR_PROJECT_ID

# アプリケーションデフォルト認証情報ログイン
gcloud auth application-default login
 
# 割り当てプロジェクト設定
gcloud auth application-default set-quota-project YOUR_PROJECT_ID

# .bashrc または .zshrc に追加
export GOOGLE_CLOUD_PROJECT="YOUR_PROJECT_ID"

{
  "mcpServers": {
    "stitch": {
      "command": "${SHELL:-/bin/bash}",
      "args": ["-l", "-c", "exec npx -y stitch-mcp"],
      "env": {
        "GOOGLE_CLOUD_PROJECT": "YOUR_PROJECT_ID"
      }
    }
  }
}

{
  "permissions": {
    "allow": [
      "mcp__stitch__*"
    ]
  }
}

{
  "enabledMcpjsonServers": ["stitch"]
}

# Claude Code で実行
> Stitch プロジェクトリストを表示して

# Phase 1: 既存ホーム画面からデザインコンテキスト抽出
> ホーム画面のデザインコンテキストを抽出して
# → extract_design_context(screen_id="home-screen-001")
# → カラーパレット、フォント、間隔パターン抽出
 
# Phase 2: 抽出されたコンテキストで商品リスト画面作成
> 商品リストページを作成して。3 列グリッド、左側フィルタサイドバー、
#   各カードに画像/タイトル/価格/カートボタンを含む
# → generate_screen_from_text(prompt=..., design_context=抽出されたコンテキスト)
 
# Phase 3: コードと画像出力
> 作成された画面のコードと画像を出力して
# → fetch_screen_code(screen_id="product-listing-001")
# → fetch_screen_image(screen_id="product-listing-001")

[画面タイプ]を作成して。[コンポーネントリスト]を含む。
[レイアウトタイプ]で配置し[コンテンツ階層]を適用。
[インタラクティブ要素]と[レスポンシブ動作]を含む。
[デザインスタイル/コンテキスト]を適用。

# 1. 再認証
gcloud auth application-default login
 
# 2. API 有効化確認
gcloud services list --enabled | grep stitch
 
# 3. プロジェクト ID 確認
echo $GOOGLE_CLOUD_PROJECT
 
# 4. API 有効化 (無効な場合)
gcloud beta services mcp enable stitch.googleapis.com --project=YOUR_PROJECT_ID