StitchFlow
Use this skill when the user wants to create a new screen, refine an existing one, generate design variants, or export local HTML and screenshots through Stitch.
It uses the local toolkit at ${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter} instead of a Stitch MCP tool.
Local setup
- - Toolkit root: INLINECODE1
- API key is expected in INLINECODE2
- Outputs are saved to INLINECODE3
- The latest single-screen result is tracked in INLINECODE4
When to use
- - The user says to use Stitch or StitchFlow
- The user wants a screen generated from a brief, spec, or rough idea
- The user wants design variants before implementation
- The user wants targeted visual edits to a generated screen
- The user wants HTML and screenshots exported locally for review
Workflow routing
- - New screen from a prompt or brief:
Read
text-to-design
- - Targeted changes to an existing Stitch screen:
Read
edit-design
- - Multiple directions from one base screen:
Read
variants
Core rules
- 1. Before any Stitch command, rewrite the user request into a stronger design prompt.
- If the user already has a codebase or UI context, inspect it first and carry that context into the prompt.
- Prefer
DESKTOP by default unless the user clearly asks for mobile or tablet. - For first-pass exploration, prefer one generated screen plus
3 variants. - If a screen is already close, prefer
edit over full regeneration. - Always tell the user where the resulting files were saved.
- Never print or expose
STITCH_API_KEY or .env contents.
What good output looks like
- - the brief is rewritten into a stronger design prompt
- the right Stitch workflow is chosen: generate, edit, or variants
- the command completes and saves artifacts locally
- the response includes project id, screen id, output folder, and what to do next
Prompt shaping
Use prompt-keywords to translate vague requests into design language Stitch understands better.
Structure prompts like this:
CODEBLOCK0
After running Stitch
Report:
- - the command used at a high level, not the secret env
- the project and screen ids
- the output folder under INLINECODE10
- the HTML and image artifact paths if they were downloaded
- a short design assessment and the best next step
References
StitchFlow
当用户想要创建新屏幕、优化现有屏幕、生成设计变体，或通过Stitch导出本地HTML和截图时，使用此技能。
它使用本地工具包${STITCHSTARTERROOT:-$HOME/.agents/stitch-starter}，而非Stitch MCP工具。
本地设置
- - 工具包根目录：${STITCHSTARTERROOT:-$HOME/.agents/stitch-starter}
- API密钥应存放在${STITCHSTARTERROOT:-$HOME/.agents/stitch-starter}/.env中
- 输出文件保存至${STITCHSTARTERROOT:-$HOME/.agents/stitch-starter}/runs
- 最新的单屏结果记录在${STITCHSTARTERROOT:-$HOME/.agents/stitch-starter}/runs/latest-screen.json中
使用场景
- - 用户要求使用Stitch或StitchFlow
- 用户希望根据简报、规格或粗略想法生成屏幕
- 用户希望在实施前获得设计变体
- 用户希望对已生成的屏幕进行针对性视觉编辑
- 用户希望导出本地HTML和截图以供审查
工作流路由
阅读
text-to-design
阅读
edit-design
阅读
variants
核心规则
- 1. 在执行任何Stitch命令前，将用户请求改写为更强大的设计提示。
- 如果用户已有代码库或UI上下文，先检查并携带该上下文进入提示。
- 默认优先使用DESKTOP，除非用户明确要求移动端或平板端。
- 初次探索时，优先生成一个屏幕加3个变体。
- 如果屏幕已接近目标，优先使用edit而非完全重新生成。
- 始终告知用户结果文件的保存位置。
- 绝不打印或暴露STITCHAPIKEY或.env内容。
优质输出示例
- - 简报被改写为更强大的设计提示
- 选择了正确的Stitch工作流：生成、编辑或变体
- 命令执行完成并将产物保存至本地
- 回复中包含项目ID、屏幕ID、输出文件夹及后续操作建议
提示优化
使用 prompt-keywords 将模糊请求转化为Stitch更易理解的设计语言。
按如下结构组织提示：
md
[整体氛围、产品意图和受众]
平台：[网页/移动端]，[桌面/移动端]优先
页面目标：
页面结构：
- 1. 页眉/导航
- 主内容/英雄区/仪表盘主体
- 次要内容
- 页脚/操作/辅助细节
视觉方向：
运行Stitch后
报告内容：
- - 使用的高级命令（不含秘密环境变量）
- 项目ID和屏幕ID
- ${STITCHSTARTERROOT:-$HOME/.agents/stitch-starter}/runs下的输出文件夹
- 已下载的HTML和图片产物路径
- 简短的设计评估及最佳后续步骤
参考资料
