stitch::generate-design

生成设计

使用 Stitch MCP，根据文本描述、图像或模型图创建新的设计屏幕，使用提示词和设计系统令牌编辑现有屏幕，并生成设计变体。

说明

请参阅系统提示词，了解如何处理本技能中提到的所有工具的 MCP 工具前缀（例如 list_projects、 generate_screen_from_text、edit_screens）。

🎨 提示词增强流程

调用任何 Stitch 生成或编辑工具之前，必须增强用户的提示词。

1. 分析上下文

• 项目：使用 list_projects 查找正确的 projectId。如果没有合适的项目，请使用 create_project 创建一个。
• 设计系统：通过 list_design_systems 检查项目是否已有设计系统。如果有，设计令牌（颜色、字体、圆角）已在项目级别应用——生成提示词中不要包含任何颜色、字体或主题说明。如果没有，请先将此任务交给 manage-design-system 技能，再生成屏幕。

2. 优化 UI/UX 术语

参阅设计映射，替换含糊的术语。

• 含糊：“制作一个好看的页眉”
• 专业：“带有玻璃拟态效果和居中徽标的粘性导航栏”

使用提示词关键词中的组件名称、形容词范围、颜色角色和形状描述。

3. 组织最终提示词

将增强后的提示词整理为 Stitch 可用的格式。只关注布局、内容和结构，绝不包含颜色、字体或主题说明（这些由 manage-design-system 技能在项目级别处理）。

对于新屏幕，使用此模板：

[Overall purpose and user intent of the page]

**PLATFORM:** [Web/Mobile], [Desktop/Mobile]-first

**PAGE STRUCTURE:**
1. **Header:** [Description of navigation and branding]
2. **Hero Section:** [Headline, subtext, and primary CTA]
3. **Primary Content Area:** [Detailed component breakdown]
4. **Footer:** [Links and copyright information]

对于编辑，请具体说明要更改的内容：

• 位置：“更改 [主按钮] 在 [首屏区域] 中的……”
• 视觉效果：“……改为更深的蓝色 (#004080)，并添加轻微阴影。”
• 结构：“在主按钮旁添加一个次要按钮，文本为 ‘了解更多’。”

注意

生成提示词中不要包含十六进制代码、字体名称、颜色调色板、圆角值或任何设计系统令牌。这些内容由 manage-design-system 技能在项目级别应用，重复指定会产生冲突。（对于编辑提示词，可以使用十六进制代码精确调整颜色。）

4. 呈现 AI 洞察

每次调用工具后，始终向用户展示 outputComponents（文本描述和建议）。

完整的提示词增强前后示例，请参阅 examples/enhanced-prompt.md。

---

步骤

确定模式

根据用户请求决定使用哪种流程：

• 用户想根据文本描述创建 → 使用根据文本生成流程
• 用户提供图像、屏幕截图或模型图 → 使用根据图像生成流程
• 用户想修改现有屏幕 → 使用编辑流程
• 用户想要布局、颜色或内容变体 → 使用生成变体流程

---

根据文本生成流程（新屏幕）

1. 增强用户提示词

应用上述提示词增强流程。

2. 确定项目

如果尚未确定正确的 projectId，请使用 list_projects 查找。

3. 生成屏幕

使用增强后的提示词和 designSystem ID（如果在步骤 1 中找到）调用 generate_screen_from_text 工具。

{
  "projectId": "...",
  "prompt": "[Your Enhanced Prompt]",
  "designSystem": "assets/...", // Optional: Pass if found in Step 1
  "deviceType": "DESKTOP"  // Options: MOBILE, DESKTOP, TABLET
}

4. 呈现 AI 反馈

始终向用户展示 outputComponents 中的文本描述和建议。

5. 下载设计资源

生成后，将 outputComponents 中的 HTML 和屏幕截图 URL 下载到 .stitch/designs 目录。

• 命名：使用屏幕 ID 或描述性 slug 作为文件名。
• 工具：通过 run_command 使用 curl -o 或类似工具。
• 目录：确保 .stitch/designs 目录存在。

6. 审查和优化

• 如果结果与预期不完全一致，请继续使用 Edit 流程进行针对性调整。
• 除非整体布局有误，否则不要从头重新生成。

---

从图像生成流程（图像／模型图 → 设计）

当用户提供图像、屏幕截图或设计模型图，并希望在 Stitch 中重新创建时，使用此流程。

1. 确定项目

使用 list_projects 查找正确的 projectId。如果没有合适的项目，请使用 create_project 创建一个。

2. 上传图像

委托 upload-to-stitch 技能将图像上传到项目。这会创建一个以该图像为内容的新屏幕。

3. 使用 Edit 优化

上传后，使用 list_screens 查找新创建的 screenId，然后调用 edit_screens，并提供描述性提示词来优化设计：

{
  "projectId": "...",
  "selectedScreenIds": ["<uploaded-screen-id>"],
  "prompt": "[Describe what to adjust, enhance, or recreate from this mockup]"
}

提示

为获得最佳效果，请描述图像背后的意图，而不只是说“让它看起来像这样”。例如：“这是一张仪表板模型图——请重新创建，并加入合适的数据表、侧边栏导航和图表小部件。”

4. 展示 AI 反馈

务必向用户展示 outputComponents 中的文本描述和建议。

5. 下载设计资源

将 outputComponents 中的 HTML 和屏幕截图 URL 下载到 .stitch/designs 目录。

• 命名：文件名使用屏幕 ID 或描述性短名称。
• 工具：通过 run_command 使用 curl -o 或类似工具。
• 目录：确保 .stitch/designs 存在。

---

Edit 流程（修改现有屏幕）

1. 确定屏幕

使用 list_screens 或 get_screen 查找正确的 projectId 和 screenId。

2. 编写编辑提示词

应用提示词增强流程，重点在于明确具体：

• 位置：“更改 [hero 区域] 中 [主按钮] 的颜色……”
• 视觉效果：“……改为更深的蓝色（#004080），并添加淡淡的阴影。”
• 结构：“在主按钮旁添加一个次要按钮，文本为 ‘了解更多’。”

3. 应用编辑

调用 edit_screens 工具。

{
  "projectId": "...",
  "selectedScreenIds": ["..."],
  "prompt": "[Your targeted edit prompt]"
}

4. 展示 AI 反馈

务必向用户展示 outputComponents 中的文本描述和建议。

5. 下载设计资源

编辑后，将 outputComponents 中更新后的 HTML 和屏幕截图 URL 下载到 .stitch/designs 目录，覆盖之前的版本，以确保本地文件反映最新编辑内容。

• 命名：文件名使用屏幕 ID 或描述性短名称。
• 工具：通过 run_command 使用 curl -o 或类似工具。
• 目录：确保 .stitch/designs 存在。

6. 更新项目元数据

下载资源后，更新 .stitch/metadata.json，以反映任何更改（例如更新后的屏幕标题或编辑产生的新屏幕 ID）。元数据文件会记录所有屏幕、其设备类型和设计系统信息。格式请参见 manage-design-system 技能中的 examples/metadata.json。

7. 验证并重复

• 检查输出屏幕，确认更改是否已正确应用。
• 如果还需要进一步润色，请使用新的具体提示词重复编辑流程。

---

生成变体流程（探索不同方案）

当用户希望探索现有屏幕的替代布局、配色方案或内容变体时，使用此流程。

1. 确定屏幕

使用 list_screens 或 get_screen 查找正确的 projectId 和 screenId。

2. 配置变体选项

使用适当的选项调用 generate_variants 工具：

{
  "projectId": "...",
  "selectedScreenIds": ["..."],
  "prompt": "[Describe the direction for variants]",
  "variantOptions": {
    "variantCount": 3,
    "creativeRange": "EXPLORE",
    "aspects": ["LAYOUT", "COLOR_SCHEME"]
  }
}

变体选项：

• variantCount：1–5 个变体（默认值：3）
• creativeRange：REFINE（细微调整）、EXPLORE（均衡）或 REIMAGINE（彻底重构）
• aspects：聚焦于特定维度——LAYOUT、COLOR_SCHEME、IMAGES、TEXT_FONT、TEXT_CONTENT，也可留空以涵盖全部维度

3. 展示 AI 反馈

务必向用户展示 outputComponents 中的文本描述和建议。

4. 下载设计素材

将 outputComponents 中的变体 HTML 和截图 URL 下载到 .stitch/designs 目录。

• 命名：使用屏幕 ID 或描述性 slug 作为文件名。
• 工具：通过 run_command 使用 curl -o 或类似工具。
• 目录：确保 .stitch/designs 存在。

---

💡 提示

• 注重结构：在提示词中将页面拆分为页眉、主视觉区、功能区和页脚。
• 内容优先：描述各个区块包含的内容（文本、图像、CTA），而不是外观。
• 迭代润色：针对性调整时，优先编辑，而非完全重新生成。
• 避免主题泄漏：生成提示词中绝不要填写十六进制颜色代码、字体名称或颜色角色——设计系统会处理所有视觉样式。
• 指定交互：提及悬停状态、动画和点击行为，而不是视觉样式。
• 聚焦修改：一次只做一项修改通常比列出一长串改动更好。
• 使用组件术语：使用“导航栏”“主视觉区”“页脚”“卡片网格”等专业术语。
• 在编辑中指定精确颜色：编辑现有屏幕时，使用十六进制颜色代码进行精确的颜色匹配。

📚 参考资料

• 设计映射 — UI/UX 关键词和氛围描述词。
• 提示词关键词 — Stitch 最能理解的技术术语。
• 增强提示词示例 — 提示词增强前后的对比。