mcpField
S
stitch-mcp-generate-variants

stitch-mcp-generate-variants

github.com/gabelulデザイン・UI4737 回インストール14 週間前に更新
リポジトリ

stitch-mcp-generate-variants について

既存の Stitch 画面から、数や創造性の幅、変更するデザイン要素を指定して別案を生成するスキルです。デザイン案の検討やレビュー用の選択肢作成に向いており、既存のプロジェクトと画面が必要です。

主な機能

  1. 01既存画面からバリエーションを生成
  2. 02生成数と創造性の幅を指定
  3. 03変更するデザイン要素を選択
  4. 04デバイス種別とモデルを指定

活用シーン

  1. 01画面の別スタイルを検討
  2. 02関係者レビュー用の案を作成

MCP 対応

選択した既存画面に対して、Stitch の generate_variants MCP ツールを呼び出します。新しい案はプロジェクトに追加され、list_screens で確認できます。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/gabelul/stitch-kit --skill stitch-mcp-generate-variants

インストール後、Claude Code で/stitch-mcp-generate-variantsを入力して読み込まれたか確認します。

詳細

Stitch MCP — バリエーションを生成する

Stitch のネイティブなバリエーション生成 API を使用して、既存の画面の別バージョンを生成します。テキストプロンプトを使う方法（API 呼び出しが 3 回に対して 1 回）より効率的で、どの要素を変更するかを細かく制御できます。

必須の前提条件

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

既存の画面の projectId と、少なくとも 1 つの screenId が必要です。バリエーションは常に既存のデザインを基にするため、ゼロから生成することはできません。

使用するタイミング

  • ユーザーが既存の画面の別バージョンを見たい場合
  • 生成後にユーザーが「いくつかバリエーションを見せて」や「違うスタイルを試して」と言った場合
  • オーケストレーターのステップ 5b で「バリエーションを生成」が提示された場合
  • A/B テスト — ステークホルダーによるレビュー用に複数の選択肢を作成する場合

MCP ツールを呼び出す

{
  "name": "generate_variants",
  "arguments": {
    "projectId": "3780309359108792857",
    "selectedScreenIds": ["88805abc123def456"],
    "prompt": "Explore different color schemes while keeping the layout structure",
    "variantOptions": {
      "variantCount": 3,
      "creativeRange": "EXPLORE",
      "aspects": ["COLOR_SCHEME", "IMAGES"]
    },
    "deviceType": "DESKTOP",
    "modelId": "GEMINI_3_1_PRO"
  }
}

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

projectId — プレフィックスなしの数値 ID のみ
✅ "3780309359108792857"
❌ "projects/3780309359108792857"
selectedScreenIds — 数値の画面 ID の配列
✅ ["88805abc123def456"]
❌ ["projects/123/screens/88805abc123def456"]

バリエーション生成の元となる画面です。

prompt — バリエーションの方向性を示す任意のガイダンス

ユーザーがどのようなバリエーションを希望しているか、コンテキストを指定します。主な調整は variantOptions で行いますが、プロンプトで細かなニュアンスを加えられます。

variantOptions — 変更する要素と変更の度合いを制御
フィールド型値説明
variantCountint1–5生成するバリエーションの数
creativeRangeenumREFINE、EXPLORE、REIMAGINE元のデザインからどの程度変更するか
aspectsarray以下を参照変更するデザイン要素
ユーザーの表現から creativeRange への対応
ユーザーの表現→ creativeRange動作
「微調整」、「小さな変更」、「磨き上げる」REFINE元のデザインを維持した小さな改善
「別案」、「違う選択肢」、「いろいろ試す」EXPLOREコンセプトを保ちながら、意味のある違いを加える
「大胆に」、「まったく違うもの」、「再構想する」REIMAGINE元のデザインから大きく変更する
aspects — 変更する要素
値変更するもの維持するもの
LAYOUT構造、間隔、コンポーネントの配置色、フォント、コンテンツ
COLOR_SCHEME色、グラデーション、コントラストレイアウト、フォント、コンテンツ
IMAGES写真、イラスト、アイコンレイアウト、色、テキスト
TEXT_FONTタイポグラフィ、フォントの選択、サイズレイアウト、色、コンテンツ
TEXT_CONTENTコピー、ラベル、プレースホルダーテキストレイアウト、色、フォント

要素を組み合わせることができます。["LAYOUT", "COLOR_SCHEME"] を指定すると、両方を同時に変更します。

deviceType — 任意

同じ列挙値を使用します：MOBILE、DESKTOP、TABLET、AGNOSTIC

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

出力

プロジェクトに追加された新しい画面が返されます。各バリエーションは list_screens で個別の画面として表示されます。

バリエーションを生成した後

  1. stitch-mcp-list-screens を呼び出して、新しいバリエーション画面をすべて確認します
  2. 各画面について stitch-mcp-get-screen を呼び出し、スクリーンショットを取得します
  3. 横並びで提示します：「3 つのバリエーションはこちらです：[スクリーンショット]。どれがよいですか？」
  4. ユーザーが気に入ったものを選んだら、次の選択肢を提示します：
    • 「選んだバリエーションをさらに編集しますか？」→ stitch-mcp-edit-screens
    • 「コードに変換しますか？」→ フレームワーク変換ワークフロー
    • 「選んだバリエーションを基に、さらにバリエーションを生成しますか？」→ もう一度 generate_variants を呼び出す

避けるべきパターン

  • 既存の画面なしでバリエーションを生成しないでください — 元となるデザインが必要です
  • projectId または screenId に projects/ID 形式を使わないでください — どちらも数値でなければなりません
  • variantCount を 5 より大きく設定しないでください — API の上限は 5 です

コメント

Markdown 対応