stitch-mcp-generate-screen-from-text

Stitch MCP — テキストから画面を生成

構造化テキストのプロンプトから UI デザイン画面を生成します。これは、Stitch ワークフローの中心となるアクションです。これより前の工程（仕様の生成、プロンプトの組み立て）は準備であり、これより後の工程（画面の取得、コードへの変換）は仕上げです。

重要な前提条件

ユーザーが「Stitch」と明示的に言及した場合、または上流のスキル（例：stitch-ideate、stitch-orchestrator）から呼び出された場合にのみ、このスキルを使用してください。

これを呼び出す前に、projectId が必要です。まだない場合は、次のいずれかを行ってください。

• stitch-mcp-create-project を使って新しいプロジェクトを作成する
• stitch-mcp-list-projects を使って既存のプロジェクトを見つける

使用する場面

• Stitch を使って画面を「デザイン」「生成」「作成」するようユーザーから依頼された場合
• オーケストレーターが stitch-ui-prompt-architect を使ってプロンプトを組み立てた場合
• ユーザーが具体的なビジュアル要件を提示し、Stitch で生成した結果を希望する場合

MCP ツールを呼び出す

{
  "name": "generate_screen_from_text",
  "arguments": {
    "projectId": "3780309359108792857",
    "prompt": "[Full structured prompt — see below]",
    "deviceType": "MOBILE",
    "modelId": "GEMINI_3_1_PRO",
    "designSystem": "assets/15996705518239280238"
  }
}

パラメーターのリファレンス

designSystem — 任意。assets/ プレフィックス付きのアセット ID

✅ "assets/15996705518239280238"
❌ "15996705518239280238"

生成する画面全体のデザインに一貫性を持たせるには、stitch-mcp-create-design-system、stitch-mcp-create-design-system-from-design-md、または stitch-mcp-list-design-systems からデザインシステムの name を渡します（assets/ プレフィックス付きのまま使用します）。これは、プレフィックスなしの値が必要な apply_design_system の assetId とは逆の形式です。

projectId — 数値 ID のみ。projects/ プレフィックスは不要

✅ "3780309359108792857"
❌ "projects/3780309359108792857"

prompt — [Context] [Layout] [Components] の構成を使用

[Context & Style]
[Device] [Mode] [screen type] for [product]. [aesthetic]. [theme]. [colors]. [font].

[Layout]
[Describe the structural arrangement]

[Components]
[Specific named UI components with details]

最良の結果を得るには、このツールを呼び出す前に stitch-ui-prompt-architect スキルを使ってプロンプトを組み立ててください。

deviceType

値	使用する場面
MOBILE	モバイルアプリ、スマートフォンサイズの UI（不明な場合のデフォルト）
DESKTOP	Web ダッシュボード、ランディングページ、SaaS UI
TABLET	タブレット専用のレイアウト
AGNOSTIC	特定のデバイスに限定されない場合 — レスポンシブ／流動的なレイアウト

modelId

値	使用する場面
GEMINI_3_1_PRO	推奨 — 複雑なレイアウト、高い忠実度
GEMINI_3_FLASH	高速な反復、ワイヤーフレーム、簡単な変更
GEMINI_3_PRO	非推奨。 引き続き動作しますが、削除される予定です。代わりに GEMINI_3_1_PRO を使用してください。

生成後

このツールはセッション情報を返しますが、スクリーンショットや HTML 自体は返しません。デザインを取得するには、次の操作を行ってください。

1. projects/[projectId] を指定して stitch-mcp-list-screens を呼び出し、新しい画面を見つける
2. projectId と screenId を指定して stitch-mcp-get-screen を呼び出し、スクリーンショットと HTML を取得する

プロンプトの品質チェックリスト

このツールを呼び出す前に、プロンプトが次の条件を満たしていることを確認してください。

• deviceType パラメーターと一致するデバイスタイプを指定している
• 具体的なコンポーネント名を挙げている（「ボタンをいくつか」ではなく、「プライマリの『サインイン』ボタン」）
• 色を指定している（16 進コードまたは明確な色名）
• 現実的なコンテンツを使用している（Lorem Ipsum ではない）
• ライトモードかダークモードかを明示している

完全な PRD からの一括生成

プロンプトが完全な PRD ドキュメント（製品概要、デザインシステム、複数画面の仕様、ビルドガイド）の場合、Stitch は 1 回の呼び出しで 1 画面だけではなく、複数の画面を生成します。Stitch は 1 回の呼び出しで最大 10 画面を生成します。画面仕様が 8 つある PRD では、通常、5～7 画面が自動的に生成されます。

これは、Stitch のウェブ版 Ideate で「すべての画面を生成」する際と同じ仕組みです。PRD の形式は包括的なプロンプトとして機能し、Stitch が内部で分解します。

一括生成の使用方法：

1. 完全な PRD テキストを prompt パラメーターとして送信します

2. Stitch は複数画面の PRD から、1 回の呼び出しで最大約 10 画面を生成します

3. MCP の応答がタイムアウトするかどうかによって、次の 2 通りの結果になります

   データを含む応答が返された場合：

   • output_components に続行の提案（例：「はい、すべて作成」「残りの画面を生成」）がないか確認します
   • 提案のテキストを prompt として指定し、generate_screen_from_text をもう一度自動的に呼び出します。ユーザーはすでに生成を開始しているため、再確認は不要です
   • output_components に提案が表示されなくなるまで繰り返します（無限ループを防ぐため、続行呼び出しは最大 3 回です）

   空の応答が返された場合（HTTP タイムアウト）：

   • 生成はサーバー側で引き続き実行中です。再試行しないでください
   • 90～120 秒待ってから list_screens を呼び出し、生成された画面を確認します
   • 空の場合はさらに 60 秒待ち、一覧取得を再試行します
   • 不足している画面があれば、PRD のデザインシステムを参照する、焦点を絞ったプロンプトで個別に生成します

所要時間

Stitch の生成には、単一画面で 60～180 秒、複数画面の PRD 生成で最大 5 分かかります。これは通常の動作であり、タイムアウトではありません。

• この時間内に再試行しないでください
• 60 秒を超えても失敗だと判断しないでください
• 生成に時間がかかると MCP ツールが空の応答を返すことがあります。後で list_screens を確認してください
• 失敗した場合は、90 秒待って list_screens を確認し、何も表示されていない場合に限り、最大 1 回だけ再試行してください
• 呼び出しごとに新しい生成が行われるため、再試行すると画面が重複します

参考資料

• examples/desktop.md — デスクトップダッシュボードのプロンプト（SaaS 分析、管理パネル）
• examples/mobile.md — モバイルアプリのプロンプト（ログイン、ソーシャルフィード、E コマース）