生成设计
根据文本描述、图片或设计图创建新的设计界面，使用提示和设计系统令牌编辑现有界面，并利用 Stitch MCP 生成设计变体。
[!NOTE] 请参阅您的系统提示，了解如何处理本技能中提到的所有 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 技能处理）。
对于新界面，使用以下模板：
[页面的总体目的和用户意图]
**平台：** [Web/移动端]，[桌面/移动端]-优先
**页面结构：**
1. **头部：** [导航和品牌描述]
2. **英雄区域：** [标题、副文本和主要行动号召]
3. **主要内容区域：** [详细的组件分解]
4. **页脚：** [链接和版权信息]
对于编辑，要具体说明要更改的内容：
- 位置： “将[英雄区域]中的[主要按钮]更改为...”
- 视觉： “...更改为深蓝色（#004080）并添加微妙阴影。”
- 结构： “在主要按钮旁添加一个带有‘了解更多’文本的辅助按钮。”
[!CAUTION] 不要在生成提示中包含十六进制颜色代码、字体名称、调色板、圆角值或任何设计系统令牌。这些由项目级别的 manage-design-system 技能处理，如果重复将导致冲突。（对于编辑提示，十六进制颜色代码可用于精确的颜色调整。）
4. 展示 AI 洞察
在任何工具调用之后，始终将 outputComponents（文本描述和建议）展示给用户。
参见示例/enhanced-prompt.md获取完整的提示增强前后示例。
步骤
确定模式
根据用户的请求决定使用哪个流程：
- 用户想从文本描述创建 → 从文本生成 流程
- 用户提供了图像、截图或设计图 → 从图像生成 流程
- 用户想修改现有界面 → 编辑 流程
- 用户想要布局/颜色/内容变体 → 生成变体 流程
从文本生成流程（新界面）
1. 增强用户提示
应用以上提示增强管线。
2. 识别项目
使用 list_projects 查找正确的 projectId（如果未知）。
3. 生成界面
使用增强后的提示和 designSystem ID（如果步骤 1 中找到）调用 generate_screen_from_text 工具。
{
"projectId": "...",
"prompt": "[您的增强提示]",
"designSystem": "assets/...", // 可选：如果步骤 1 中找到则传入
"deviceType": "DESKTOP" // 选项：MOBILE, DESKTOP, TABLET
}
4. 展示 AI 反馈
始终向用户展示 outputComponents 中的文本描述和建议。
5. 下载设计资产
生成后，将 outputComponents 中的 HTML 和截图 URL 下载到 .stitch/designs 目录。
- 命名： 使用界面 ID 或描述性短名称作为文件名。
- 工具： 使用
curl -o通过run_command或类似工具。 - 目录： 确保
.stitch/designs存在。
6. 审查和优化
- 如果结果不完全符合预期，继续使用编辑流程进行针对性调整。
- 除非基本布局错误，否则不要从头重新生成。
从图像生成流程（图像/设计图 → 设计）
当用户提供要重新创建的图像、截图或设计图时使用此流程。
1. 识别项目
使用 list_projects 查找正确的 projectId。如果没有合适的项目，使用 create_project 创建。
2. 上传图像
委托给 upload-to-stitch 技能将图像上传到项目。这将以图像作为内容创建一个新界面。
3. 通过编辑优化
上传后，使用 list_screens 查找新创建的 screenId，然后调用 edit_screens 并附带描述性提示以优化设计：
{
"projectId": "...",
"selectedScreenIds": ["<上传的界面 ID>"],
"prompt": "[描述要调整、增强或从该设计图中重新创建的内容]"
}
[!TIP] 为获得最佳效果，请描述图像背后的意图，而不仅仅说“让它看起来像这样”。例如：“这是仪表板设计图 — 用适当的数据表格、侧边栏导航和图表小部件重新创建它。”
4. 展示 AI 反馈
始终向用户展示 outputComponents 中的文本描述和建议。
5. 下载设计资产
将 outputComponents 中的 HTML 和截图 URL 下载到 .stitch/designs 目录。
- 命名： 使用界面 ID 或描述性短名称作为文件名。
- 工具： 使用
curl -o通过run_command或类似工具。 - 目录： 确保
.stitch/designs存在。
编辑流程（修改现有界面）
1. 识别界面
使用 list_screens 或 get_screen 查找正确的 projectId 和 screenId。
2. 制定编辑提示
应用提示增强管线，专注于具体性：
- 位置： “将[英雄区域]中的[主要按钮]的颜色更改为...”
- 视觉： “...更改为深蓝色（#004080）并添加微妙阴影。”
- 结构： “在主要按钮旁添加一个带有‘了解更多’文本的辅助按钮。”
3. 应用编辑
调用 edit_screens 工具。
{
"projectId": "...",
"selectedScreenIds": ["..."],
"prompt": "[您的有针对性的编辑提示]"
}
4. 展示 AI 反馈
始终向用户展示 outputComponents 中的文本描述和建议。
5. 下载设计资产
编辑后，将 outputComponents 中更新的 HTML 和截图 URL 下载到 .stitch/designs 目录，覆盖之前的版本以确保本地文件反映最新编辑。
- 命名： 使用界面 ID 或描述性短名称作为文件名。
- 工具： 使用
curl -o通过run_command或类似工具。 - 目录： 确保
.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": "[描述变体的方向]",
"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 或描述性短名称作为文件名。
- 工具： 使用
curl -o通过run_command或类似工具。 - 目录： 确保
.stitch/designs存在。
💡 提示
- 结构化： 在提示中将页面分解为头部、英雄区域、功能区域和页脚。
- 内容优先： 描述每个部分包含什么（文本、图像、行动号召），而不是它看起来如何。
- 迭代润色： 优先使用编辑进行针对性调整，而不是完全重新生成。
- 无主题泄漏： 不要在生成提示中包含十六进制颜色代码、字体名称或颜色角色 — 设计系统处理所有视觉样式。
- 指定交互： 提及悬停状态、动画和点击行为，而不是视觉样式。
- 保持编辑专注： 一次一个编辑通常比一长串更改更好。
- 参考组件： 使用专业术语，如“导航栏”、“英雄区域”、“页脚”、“卡片网格”。
- 编辑中的精确颜色： 在编辑现有界面时，使用十六进制颜色代码进行精确颜色匹配。