Skip to content
UXClaim
Design Ops

Stitchflow

AI UI design automation that understands your project context, generates tailored designs via Google Stitch, and exports production-ready code.

View source More in Design Ops

What It Does

Stitchflow automates UI design generation by combining project context with AI reasoning. Instead of generic AI-generated layouts, it reads your brand guidelines, product specs, and existing designs—then crafts a tailored prompt specifically for your project before generating designs through Google Stitch.

How It Works

The six-stage pipeline transforms project understanding into production code:

  1. Read your project context (CLAUDE.md, brand data, specs)
  2. Craft a tailored prompt with your brand colors and requirements
  3. Generate designs via Google Stitch’s AI models
  4. Screenshot the result for review
  5. Export HTML/CSS from the rendered design
  6. Convert to your tech stack (React, Vue, HTML)

Runs cross-platform (macOS, Windows, Linux) and integrates with 27+ AI coding agents including Claude Code, Cursor, and Codex—no API keys required, just your existing Chrome login.

Use Cases

  • Rapidly prototype dashboards, landing pages, and internal tools
  • Generate on-brand UI that matches your product aesthetic
  • Speed up design-to-code workflows for product teams
  • Create design variations without manual iteration

Who Benefits

Product designers automating their UI workflows, product managers accelerating prototyping, and design-ops teams integrating AI generation into their toolchains.

Frequently asked questions

How do I install Stitchflow?
Install Python dependencies with `pip install playwright && playwright install chromium`, log into Google in Chrome and visit stitch.withgoogle.com once, then copy the stitchflow folder to your AI agent's skills directory (e.g., `~/.claude/skills/` for Claude Code).
What makes Stitchflow different from regular AI design?
Stitchflow reads your project context first—brand guidelines, product specs, existing UI patterns—then writes a custom prompt tailored to your specific business domain. This produces on-brand designs instead of generic AI-generated layouts.
Do I need API keys or subscriptions?
No. Stitchflow connects to Google Stitch through your existing Chrome login via CDP. No API keys, tokens, or configuration needed.
Which AI agents and platforms does it support?
Compatible with 27+ platforms following the agentskills.io standard: Claude Code, Cursor, Codex CLI, OpenClaw, Hermes, Gemini CLI, and others. One skill file works across all.
Can I use Stitchflow without an AI agent?
Yes. Use CLI mode: `python3 stitch.py "your design prompt" --output dashboard.png` to generate and export designs directly from the command line.
What design outputs does Stitchflow produce?
Full-page screenshots for review, exported HTML/CSS from rendered designs, and AI-converted code matching your stack (React, Vue, plain HTML) with your project's naming conventions.
How long does design generation take?
30-120 seconds depending on model selection. Stitchflow automatically picks the strongest available model for deeper design reasoning, trading generation speed for higher quality output.
What if Stitchflow can't connect to Chrome?
Run `python3 stitch.py --launch-chrome` to launch Chrome in CDP mode. Make sure you're logged into Google and have visited stitch.withgoogle.com at least once before using Stitchflow.

Glossary

CDP (Chrome DevTools Protocol)
A browser automation protocol that allows Stitchflow to control Chrome programmatically, automate interactions with Google Stitch, and capture screenshots.
Google Stitch
Google's AI-powered UI design tool that generates web and app interfaces from text prompts using advanced models.
agentskills.io
An open standard for defining AI agent skills. Stitchflow complies with this standard, allowing it to work across 27+ different AI coding platforms with one skill definition.
Tailored Prompt
A custom-written design prompt generated by reading your project context (brand, specs, existing UI) rather than using generic templates.

More in Design Ops

All →
Design Ops

Autonomous Development Pipeline

Claude Code skill turning specs into shipped code through adaptive phases with feedforward guides, feedback sensors, and requirement traceability.

0xPuncker
Design Ops

Ibras AI Agent

Claude Code marketplace for building and evaluating AI agents. Install plugins to generate complete Mastra evaluation systems with scorers, datasets, experim...

volfadar
Design Ops

Claude Skills

Production-grade Claude AI skills for stock analysis, prompt engineering, meeting documentation, and UX design with visual-first outputs.

bhrpraju
Design Ops

Propose

Run three parallel design agents with different philosophies to generate ranked approach proposals for any design decision.