stitch-mcp-generate-variants

Stitch MCP — 生成变体

使用 Stitch 原生的变体生成 API，为现有屏幕生成替代版本。与文本提示词的方式相比，这种方式效率更高（1 次 API 调用而非 3 次），并且可以精细控制要改变哪些方面。

关键前提

仅当用户明确提到“Stitch”时才使用此技能。

必须同时拥有现有屏幕的 projectId 和至少一个 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 — 控制变更内容和幅度

字段	类型	值	说明
variantCount	int	1–5	要生成的变体数量
creativeRange	enum	REFINE、EXPLORE、REIMAGINE	与原设计的偏离程度
aspects	array	见下文	要变化的设计方面

根据用户用语映射 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 个变体：[screenshots]。你更喜欢哪一个？”
4. 用户选定后，提供以下选项：
   • “进一步编辑选定的变体？” → stitch-mcp-edit-screens
   • “转换为代码？” → 框架转换工作流
   • “基于选定的变体生成更多变体？” → 再次调用 generate_variants

反模式

• 绝不要在没有现有屏幕的情况下生成变体——你需要一个源设计
• 绝不要对 projectId 或 screenId 使用 projects/ID 格式——两者都必须是数字
• 绝不要将 variantCount 设为大于 5 的值——API 上限为 5