From stitchflow
Creates Stitch UI screens, design systems, variants, and prototypes from briefs, mockups, or product context. Exports Tailwind HTML, screenshots, and local code artifacts. Use for screen exploration, editing Stitch projects, or multi-screen prototypes.
How this skill is triggered — by the user, by Claude, or both
Slash command
/stitchflow:stitchflowThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Use this skill when the user wants to create a new Stitch screen, refine an existing one, generate design variants, build a multi-screen prototype, run a complete website design process, use `DESIGN.md` / design systems, or export local HTML and screenshots through Stitch.
Use this skill when the user wants to create a new Stitch screen, refine an existing one, generate design variants, build a multi-screen prototype, run a complete website design process, use DESIGN.md / design systems, or export local HTML and screenshots through Stitch.
It prefers native Stitch MCP tools when they are available in the current agent session, and falls back to the local toolkit at ${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter} when they are not.
${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}${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.jsondownload-project over export-project.download-project uses Project.downloadAssets(): it downloads every project screen's code.html, referenced remote images and stylesheet links into per-screen assets/, screenshots when available, top-level DESIGN.md when exposed, and download-project.json with screen metadata and warnings.--safe-download forces that path.download-project output as a local code/assets checkpoint for implementation handoff. It can include scratch/design-system screens and may still reference external runtime scripts such as Tailwind CDN, so filter to approved screen ids in handoff notes and vendor/build external dependencies during production implementation.design-system when local fallback needs to list, create, update, or apply Stitch design systems exposed by the live MCP schema.If the current client exposes Stitch MCP tools such as create_project, generate_screen_from_text, generate_variants, upload_design_md, create_design_system_from_design_md, apply_design_system, and get_screen, use those tools first. Native MCP avoids local SDK transport issues and is the most reliable path in Codex after the client has been restarted with the Stitch MCP server configured.
For Codex, a minimal MCP config looks like this:
[mcp_servers.stitch]
url = "https://stitch.googleapis.com/mcp"
enabled = true
[mcp_servers.stitch.http_headers]
"X-Goog-Api-Key" = "<your Stitch API key>"
Restart the client after changing MCP config so the stitch tools are loaded into the session.
DESIGN.md design systemDESIGN.md, or final code handoff:
Read project-prototype-exportDESKTOP by default unless the user clearly asks for mobile or tablet.3 variants.edit over full regeneration.download-project afterward for local code/assets where possible.STITCH_API_KEY or .env contents.downloadUrl values, save the HTML and screenshot locally into the normal runs/ artifact layout before reporting completion.download-project, inspect download-project.json and report any warnings or unexpected extra screens before treating the checkpoint as final.Use prompt-keywords to translate vague requests into design language Stitch understands better.
Structure prompts like this:
[overall vibe, product intent, and audience]
Platform: [web/mobile], [desktop/mobile]-first
Page goal:
- what the screen is for
- what primary action matters most
Page structure:
1. Header / navigation
2. Main content / hero / dashboard body
3. Secondary content
4. Footer / actions / supporting detail
Visual direction:
- palette roles
- typography tone
- spacing density
- component style
Report:
${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}/runsDESIGN.md / design system was created or appliednpx claudepluginhub yshishenya/stitchflowOrchestrates Stitch UI design workflows: routes from user request through spec, prompt assembly, screen generation, iteration, design system extraction, and framework conversion (Next.js, Svelte, HTML, React Native, SwiftUI).
Generates UI designs using Google Stitch AI with optimized prompts, review documents, and processes exported Figma/HTML/CSS for frontend integration. For rapid prototyping and design iteration.
Creates effective prompts for Google Stitch, an AI UI generator by Google Labs. Covers specific prompting principles, visual style definition, multi-screen flows, and platform targeting for web and mobile app designs.