StitchFlow
Turn product briefs into Google Stitch projects, UI directions, design systems,
HTML handoff artifacts, screenshots, and regression evidence from one portable
agent workflow.
StitchFlow is for teams that want Stitch to stay the design source of truth
while agents handle the repeatable work around it: prompt shaping, variants,
DESIGN.md, design-system application, local exports, audits, and release
checks.
Why Use It
- One workflow across agent clients: Codex, Claude Code, OpenClaw, GitHub
Copilot, Gemini CLI, and clients that understand
SKILL.md / AGENTS.md.
- Native MCP first, local CLI fallback: use live Stitch MCP tools when your
client exposes them; otherwise use the bundled
stitch-starter toolkit.
- Local evidence by default: save HTML, screenshots,
result.json,
variants.json, export manifests, and audit reports under runs/.
- Design-system coverage: upload
DESIGN.md, create/list/update/apply
Stitch design systems, and regression-test the full design-system path.
- Handoff checks: audit required text, unsupported claims, artifact quality,
responsive overflow, browser errors, and serious accessibility issues.
- Safe project downloads: use the SDK downloader when possible and fall back
to short local paths when long Stitch screen titles hit filesystem limits.
Requirements
- Node.js
>=22
- A Google Stitch API key in
STITCH_API_KEY
- At least one supported agent client or direct CLI usage
Secrets stay local. The installer preserves an existing toolkit .env, and the
toolkit .gitignore excludes .env, runs/, and node_modules/.
Install
git clone https://github.com/yshishenya/stitchflow.git
cd stitchflow
bash install.sh --target all
Add your API key:
${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}/.env
Then restart your agent client.
Canonical install paths:
| Item | Path |
|---|
| Skill | ${AGENT_SKILLS_HOME:-$HOME/.agents}/skills/stitchflow |
| Toolkit | ${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter} |
| Legacy alias | stitch-design-local |
Quick Start
In Codex:
Use $stitchflow to generate a premium desktop analytics dashboard for a product team, with a left sidebar, KPI cards, trend charts, and clean Tailwind-ready HTML.
In Claude Code:
/stitchflow landing page for a design tool aimed at enterprise product teams
In OpenClaw:
Use the stitchflow skill to explore three mobile-first UI directions for a checkout experience.
Direct CLI:
cd "${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}"
npm run generate -- --prompt "A modern SaaS dashboard with sidebar and stat cards"
npm run variants -- --prompt "Explore three different visual directions" --variant-count 3
npm run edit -- --prompt "Make spacing calmer and strengthen the primary CTA"
Outputs are written to:
${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}/runs/<timestamp>-<operation>-<slug>/
Native Stitch MCP
When available, StitchFlow prefers native Stitch MCP tools such as
create_project, generate_screen_from_text, edit_screens,
generate_variants, upload_design_md, create_design_system_from_design_md,
apply_design_system, and get_screen.
Codex MCP example:
[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.
CLI Toolkit
Run these from ${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}:
