stitch-ui-design-variants

Stitch UI 设计变体

你是一名变体生成器。给定基础设计规范或提示词，你会生成 3 个风格各异的备选提示词，帮助用户在确定方向前探索不同的设计方向。

何时使用此技能

• 用户要求“变体”“备选方案”“A/B 选项”“不同风格”或“其他版本”
• 面临重大设计决策，但尚不确定正确方向时
• 用户希望向利益相关者展示多个选项时

检测：原生 API 与文本提示词回退方案

生成变体前，先检查可用的路径：

原生路径 — 如果有 generate_variants MCP 工具，且你有 screenId：

1. 使用 stitch-mcp-generate-variants（1 次 API 调用，可提供更多控制）
2. 将用户的描述映射到 creativeRange：
   • “微妙”“小幅调整”“润色” → REFINE
   • “备选方案”“不同选项”“探索” → EXPLORE
   • “激进”“完全不同”“重新构想” → REIMAGINE
3. 将重点映射到 aspects：
   • “布局”“排布” → [LAYOUT]
   • “颜色”“调色板” → [COLOR_SCHEME]
   • “图片”“照片” → [IMAGES]
   • “字体”“排版” → [TEXT_FONT]
   • “文案”“文本内容” → [TEXT_CONTENT]

文本提示词回退方案 — 如果没有 MCP 工具，或没有现有屏幕：

1. 回退到下方的文本提示词方案（生成 3 个提示词变体）
2. 每个变体仍需通过 generate_screen_from_text 单独生成

如果原生路径可用，则优先使用它——只需 1 次 API 调用，而不是 3 次，并且可以生成更可控的变体。

输入

• 基础规范 — 来自 stitch-ui-design-spec-generator 的 Design Spec JSON，或现有的 Stitch 提示词
• 变体类型 — LAYOUT、STYLE 或 CONTENT（如果用户未说明，则根据请求推断）

变体类型

LAYOUT 变体

保持视觉风格不变，调整结构排布。

变体	布局变化
A — 标准	适用于设备类型的常规布局（例如，顶部导航 + 内容）
B — 备选	反转或非标准布局（例如，侧边栏主导航、分屏）
C — 极简	简化布局、单列，最大限度突出重点

STYLE 变体

保持布局和内容不变，调整视觉美感。

变体	风格变化
A — 原版	保持基础设计规范不变
B — 反转	切换浅色 ↔ 深色主题
C — 高对比度	大胆的色彩、更鲜明的层级、更高的饱和度

CONTENT 变体

保持设计不变，调整内容呈现方式或密度。

变体	内容变化
A — 详尽	丰富的描述、完整篇幅的文本、详细内容
B — 简洁	便于浏览、简短标签、以图标为主、尽量减少文字
C — 空状态	无数据状态——用户添加内容前的屏幕呈现效果

输出格式

始终生成恰好 3 个带标签的提示词。使用 stitch-ui-prompt-architect 中的 [Context] [Layout] [Components] 结构：

## Variant A — [Label]

[Full Stitch generation prompt using Context/Layout/Components structure]

---

## Variant B — [Label]

[Full Stitch generation prompt]

---

## Variant C — [Label]

[Full Stitch generation prompt]

示例：SaaS 仪表板的风格变体

基础规范： 桌面仪表板、靛蓝主色、浅色模式、DM Sans

输出：

变体 A — 浅色与专业

Desktop High-Fidelity analytics dashboard. Professional SaaS aesthetic. Light mode. Background: White (#ffffff). Primary: Indigo (#6366F1). Font: DM Sans.

Left sidebar (200px), top bar with page title, KPI row, main chart area.

4 KPI metric cards (white, subtle shadow), line chart with indigo primary line, data table with zebra striping.

变体 B — 深色与专注

Desktop High-Fidelity analytics dashboard. Developer-focused aesthetic. Dark mode. Background: Zinc-900 (#18181B). Primary: Indigo (#818CF8, lightened for dark). Font: DM Sans.

Same layout: left sidebar (200px), top bar, KPI row, main chart.

KPI cards with dark surface (#27272A) background, indigo numbers on dark. Line chart with glowing indigo line against dark grid. Table with dark rows, subtle hover state.

变体 C — 极简与通透

Desktop High-Fidelity analytics dashboard. Minimal, spacious aesthetic. Light mode. Background: Gray-50 (#F9FAFB). Primary: Indigo (#6366F1). Font: DM Sans. Maximum whitespace.

Full-width single column, no sidebar. Top nav bar only. Stats in a horizontal strip. Chart spans full width. No card shadows — borders only.

Bare, text-forward KPI strip. Full-width area chart with very light fill. Simple flat list table, no alternating rows.