stitch-mcp-apply-design-system

Stitch MCP — デザインシステムを適用

以前作成した Stitch デザインシステムを、1 つ以上の画面に適用します。画面のビジュアルテーマ（色、フォント、角の丸み）を更新してデザインシステムに合わせ、プロジェクト全体の視覚的な一貫性を確保します。

重要な前提条件

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

次の情報が必要です。

1. projectId（数値）
2. 1 つ以上の screenId（数値）
3. デザインシステムの assetId（list_design_systems または create_design_system から取得）

使用するタイミング

• デザインシステムを作成した後、画面に適用したい場合
• ユーザーが「すべての画面をこのテーマに合わせて」や「デザインシステムを適用して」と言った場合
• オーケストレーターの Step 5b で assetId を保存し、適用を提案する場合
• 複数画面のプロジェクト全体で視覚的な一貫性を確保する場合

MCP ツールを呼び出す

{
  "name": "apply_design_system",
  "arguments": {
    "projectId": "3780309359108792857",
    "selectedScreenInstances": [
      {
        "id": "a1b2c3d4e5f6",
        "sourceScreen": "projects/3780309359108792857/screens/98b50e2ddc9943efb387052637738f61"
      }
    ],
    "assetId": "15996705518239280238"
  }
}

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

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

✅ "3780309359108792857"
❌ "projects/3780309359108792857"

selectedScreenInstances — 画面 ID ではなく、オブジェクトの配列

ここは間違えやすい点です。画面のインスタンスを受け取り、それぞれが {id, sourceScreen} のペアです。画面 ID のリストではありません。

✅ [{ "id": "a1b2c3d4e5f6",
      "sourceScreen": "projects/3780.../screens/98b5..." }]

❌ ["88805abc123def456"]                    ← bare screen ids
❌ [{ "id": "98b50e2ddc99...", ... }]        ← source screen id in the id slot

両方の値は get_project → screenInstances から取得します。id はインスタンスの ID、sourceScreen はその背後にある画面の完全な projects/{p}/screens/{s} パスです。これらは異なる値で、入れ替えると失敗します。

create_design_system_from_design_md と同じ形式ですが、こちらは配列ではなく単一のインスタンスを受け取ります。

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

✅ "15996705518239280238"
❌ "assets/15996705518239280238"

次から取得します。

• stitch-mcp-list-design-systems → name フィールド（assets/15996...）を取得し、assets/ プレフィックスを削除
• stitch-mcp-create-design-system → 同様に、返された name からプレフィックスを削除

apply_design_system ではプレフィックスなしの値が必要ですが、generate_screen_from_text の designSystem パラメーターではプレフィックス付き（assets/15996...）が必要です。同じ識別子ですが、ツールによって形式が異なります。

出力

適用したデザインシステムを反映した、更新済みの画面データを返します。

適用後

1. 対象の画面を再取得します。各 screenId に対して stitch-mcp-get-screen を実行します
2. 更新されたスクリーンショットをユーザーに表示します
3. 次の選択肢を提示します。
   • 「更新した画面を編集しますか？」→ stitch-mcp-edit-screens
   • 「コードに変換しますか？」→ フレームワーク変換
   • 「ほかの画面にも適用しますか？」→ apply_design_system をもう一度呼び出します