StitchFlow

当用户希望创建新界面、优化现有界面、生成设计变体，或通过 Stitch 导出本地 HTML 文件与截图时，请使用此技能。

该技能使用本地工具包（路径为 ${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}），而非 Stitch MCP 工具。

本地环境配置

• 工具包根目录：${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}
• API 密钥应存放于 ${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}/.env
• 输出文件保存至 ${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}/runs
• 最新单屏结果记录在 ${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}/runs/latest-screen.json

适用场景

• 用户明确要求使用 Stitch 或 StitchFlow
• 用户希望基于简要描述、需求文档或初步构想生成界面
• 用户希望在开发前获得多个设计变体以供选择
• 用户希望对已生成的界面进行有针对性的视觉调整
• 用户希望将 HTML 与截图导出至本地用于评审

工作流路由

• 基于提示词或需求文档生成新界面：参考 text-to-design
• 对已有 Stitch 界面进行定向修改：参考 edit-design
• 从一个基础界面出发生成多个方向的设计变体：参考 variants

核心规则

1. 执行任何 Stitch 命令前，需先将用户请求重写为更精准、更具指导性的设计提示词。
2. 若用户已有代码库或 UI 上下文，须优先检查并将其整合进提示词中。
3. 默认平台首选 DESKTOP，除非用户明确指定移动端或平板端。
4. 首次探索性生成时，推荐输出 1 个主界面 + 3 个变体。
5. 若当前界面已接近目标效果，优先使用 edit 操作而非全量重新生成。
6. 始终向用户明确说明生成文件的保存位置。
7. 严禁打印或泄露 STITCH_API_KEY 或 .env 文件内容。

优质输出的标准

• 原始需求已被重写为更高质量的设计提示词
• 正确选择了 Stitch 工作流类型：生成（generate）、编辑（edit）或变体（variants）
• 命令成功执行，并将产物（artifacts）保存至本地
• 响应中包含项目 ID、屏幕 ID、输出目录路径，以及后续操作建议

提示词构建方法

使用提示词关键词（prompt-keywords），将模糊的用户请求转化为 Stitch 更易理解的设计语言。

提示词结构建议如下：

[整体风格、产品定位与目标用户]

平台：[web/mobile]，[desktop/mobile]-first

页面目标：
- 该界面的核心用途
- 最关键的首要操作是什么

页面结构：
1. 页眉 / 导航栏
2. 主体内容 / 首屏区域 / 仪表盘主体
3. 次要内容
4. 页脚 / 操作按钮 / 补充信息

视觉方向：
- 色彩体系的角色定义（如主色、辅助色、背景色等）
- 字体风格与语调（如现代、专业、亲和等）
- 间距密度（紧凑、均衡、宽松）
- 组件样式（如圆角、阴影、边框等）

运行 Stitch 后的反馈规范

请报告以下信息：

• 所用命令的高层级描述（不暴露敏感环境变量）
• 项目 ID 与屏幕 ID
• 输出目录路径（位于 ${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}/runs 下）
• 如已下载，注明 HTML 与图像产物的具体路径
• 简短的设计评估结论及推荐的下一步操作

参考资料

• cli-usage
• prompt-keywords