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>"