stitch-mcp-get-screen

Stitch MCP — Get Screen

Stitch で生成された画面の出力全体を取得します。HTML ソースコードの URL とスクリーンショット画像の URL が含まれます。Stitch のデザインからフレームワークへの変換をつなぐものです。

重要な前提条件

ユーザーが「Stitch」に明示的に言及した場合にのみ、このスキルを使用してください。

projectId と screenId の両方がすでに分かっている場合は、これを直接呼び出してください — 最初に get_project を呼び出さないでください。

使用するタイミング

• list_screens が screenId を返した後
• ユーザーが Stitch の画面 URL を提示し、コードへの変換を希望している場合
• Next.js、Svelte、HTML、React Native、SwiftUI など、変換スキル用のアセットを取得する場合

ステップ 1：コンテキストから ID を解析する

ユーザーが画面の参照情報を提示する形式はさまざまです。

入力形式	→ projectId	→ screenId
projects/123/screens/456	123	456
https://stitch.withgoogle.com/projects/123?node-id=456	123	456
数値 ID が個別にすでに分かっている場合	そのまま使用	そのまま使用

ステップ 2：MCP ツールを呼び出す

get_screen は移行の途中です。現在の識別子は name で、完全なリソースパスを指定します。一方、projectId と screenId は非推奨とされていますが、引き続き必須です。3 つすべてを送信してください。

{
  "name": "get_screen",
  "arguments": {
    "name": "projects/3780309359108792857/screens/88805abc123def456",
    "projectId": "3780309359108792857",
    "screenId": "88805abc123def456"
  }
}

フィールドによってプレフィックスの規則が異なります。これがこのラッパーの存在理由です。

✅ name:      "projects/3780309359108792857/screens/88805abc123def456"
❌ name:      "88805abc123def456"

✅ projectId: "3780309359108792857"
❌ projectId: "projects/3780309359108792857"

✅ screenId:  "88805abc123def456"
❌ screenId:  "screens/88805abc123def456"

name には完全なパスを指定し、残りの 2 つにはプレフィックスを除いた値を指定します。name を省略すると失敗します。非推奨の 2 つも必須ですが、name も必須です。

出力スキーマ

{
  "name": "projects/3780309359108792857/screens/88805abc123def456",
  "htmlCode": {
    "downloadUrl": "https://storage.googleapis.com/stitch-output/..."
  },
  "screenshot": {
    "downloadUrl": "https://storage.googleapis.com/stitch-screenshots/..."
  },
  "figmaExport": {
    "downloadUrl": "https://storage.googleapis.com/stitch-figma/..."
  },
  "width": 390,
  "height": 844,
  "deviceType": "MOBILE"
}

ステップ 3：HTML を確実にダウンロードする

AI の取得ツールは、Google Cloud Storage の URL で失敗することがよくあります。次の bash スクリプトを使用してください。

bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html"

特殊文字を適切に扱えるよう、URL は必ず引用符で囲んでください。

ステップ 4：フレームワークを特定し、変換先に進む

画面を取得したら、ユーザーが何をしたいのかを確認してください。

まず、レスポンスの deviceType を確認してください。提案する選択肢が変わります。

deviceType	提案する妥当なデフォルト
DESKTOP	Next.js、Svelte、HTML
MOBILE	Next.js（PWA）、Svelte、HTML、React Native、SwiftUI
AGNOSTIC	いずれでも可

次に、ユーザーの意図に応じて振り分けます。

ユーザーの意図	→ 読み込むスキル
「Next.js に変換」「React アプリ」「App Router」	stitch-nextjs-components
「Svelte に変換」「SvelteKit」	stitch-svelte-components
「HTML に変換」「PWA」「Capacitor」「Ionic」「ウェブアプリ」	stitch-html-components
「React Native」「Expo」「iOS と Android」「クロスプラットフォーム」	stitch-react-native-components
「SwiftUI」「Xcode」「ネイティブ iOS」「iOS のみ」	stitch-swiftui-components
「デザインシステムを抽出」「色やフォントを取得」	stitch-design-system
「スクリーンショットだけ見せて」	screenshot.downloadUrl を提示する
フレームワークの指定がなく、デスクトップ向けデザインの場合	Next.js、Svelte、HTML のどれがよいか尋ねる
フレームワークの指定がなく、モバイル向けデザインの場合	React Native、SwiftUI、HTML（Capacitor）のどれがよいか尋ねる

参考資料

• scripts/fetch-stitch.sh — GCS から HTML を確実にダウンロードするスクリプト