stitch-mcp-edit-screens

Stitch MCP — 画面の編集

テキストプロンプトを使って、既存の画面を1つ以上編集します。これは反復作業に使う主要なツールです。画面をゼロから再生成する（60〜180秒）代わりに、対象を絞った変更を加えて既存の画面を調整できます。

重要な前提条件

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

このツールを呼び出す前に、projectId と少なくとも1つの screenId の両方が必要です。揃っていない場合：

• stitch-mcp-list-screens で画面を一覧表示し、画面 ID を確認します
• コンテキストから解析します：projects/123/screens/456 → projectId：123、screenId：456

使用する場面

• ユーザーが既存の Stitch 画面（色、レイアウト、コンテンツ、スタイルなど）の変更を希望している場合
• 生成後に、ユーザーが「もっと暗くして」「フォントを変えて」「ナビゲーションを横に移動して」と言った場合
• オーケストレーターのステップ 5b で「この画面を編集」が提示された場合
• Stitch デザインを反復的に調整する場合

MCP ツールを呼び出す

{
  "name": "edit_screens",
  "arguments": {
    "projectId": "3780309359108792857",
    "selectedScreenIds": ["88805abc123def456"],
    "prompt": "Change the background to dark mode (#09090B). Make the primary color indigo (#818CF8). Increase the font size of the header to 32px bold.",
    "deviceType": "DESKTOP",
    "modelId": "GEMINI_3_1_PRO"
  }
}

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

projectId — プレフィックスなしの数値 ID のみ

✅ "3780309359108792857"
❌ "projects/3780309359108792857"

selectedScreenIds — 数値の画面 ID の配列

✅ ["88805abc123def456"]
❌ ["projects/123/screens/88805abc123def456"]
❌ ["screens/88805abc123def456"]

編集する画面を1つ以上選択します。選択したすべての画面に同じ編集指示が適用されます。

prompt — 編集指示

生成プロンプトと同じ品質基準を適用します：

• 具体的に指定します：「もっと暗くして」ではなく「背景を #09090B に変更」
• コンポーネントを正確に指定します：「上部」ではなく「ヘッダーナビゲーション」
• 値を含めます：16進数の色、px 単位のサイズ、具体的なコンテンツテキスト
• 変更を1回の呼び出しにつき1つに絞ると、一度に多くの変更を加えるより良い結果が得られます

deviceType — 任意

generate_screen_from_text と同じ列挙値です：MOBILE、DESKTOP、TABLET、AGNOSTIC

modelId — 任意

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

output_components の処理

応答には、提案を含む output_components が含まれる場合があります：

{
  "outputComponents": [
    { "text": "I've updated the background color and adjusted contrast ratios." },
    { "suggestion": "Would you also like me to update the sidebar to match the dark theme?" }
  ]
}

提案が表示された場合：

1. ユーザーに提示します
2. ユーザーが承認した場合：その提案を新しい prompt として edit_screens を再度呼び出します
3. これにより自然な調整のループが生まれます。ユーザーが満足するまで続けます

所要時間

生成と同様に、60〜180秒かかるのが通常です。

• この時間内に再試行しないでください
• 60秒以上かかっても失敗と判断しないでください
• 呼び出しごとに新しい編集が作成されます。再試行すると編集が重複します

編集後

1. 同じ projectId と screenId を指定して stitch-mcp-get-screen を呼び出し、画面を再取得します
2. 更新されたスクリーンショットをユーザーに表示します
3. 次の選択肢を提示します：
   • 「編集を続けますか？」→ edit_screens をもう一度呼び出します
   • 「このバージョンのバリエーションを生成しますか？」→ stitch-mcp-generate-variants
   • 「コードに変換しますか？」→ フレームワーク変換ワークフロー

避けるべきパターン

• 曖昧な編集プロンプトは送信しないでください — 「もっと良くして」では予測できない結果になります
• projectId または screenId に projects/ID 形式を使用しないでください — どちらも数値で指定する必要があります
• 関連のない編集をまとめて依頼しないでください — 「色を変更して、レイアウトも完全に作り直す」といった指示はうまくいきません