StitchFlow
Turn plain-language product briefs into UI directions, Tailwind-friendly HTML, and screenshots in minutes.
Prompt -> UI direction -> local HTML + screenshots.
StitchFlow packages Google Stitch into a portable local workflow for:
- Codex
- Claude Code
- OpenClaw
- GitHub Copilot
- Gemini CLI
- other clients that understand
SKILL.md or AGENTS.md
Why people star and keep it:
- generate usable UI directions from plain-language briefs
- save local HTML and screenshots your team can review immediately
- reuse one workflow across multiple coding-agent clients
Main demo: a live-style workflow built from real Stitch project artifacts (screen.html, screen.png, result.json) pulled from the Stitch API.
Example generated output.
What you need before install
- Node.js
>=22
- a
STITCH_API_KEY
- one supported client: Codex, Claude Code, OpenClaw, GitHub Copilot, or Gemini CLI
First result in ~2 minutes
- clone the repo and run the installer
- add
STITCH_API_KEY to your local .env
- restart your agent client
- run one of the example prompts below
- open the generated HTML and screenshot artifacts from the local
runs/ folder
Try these prompts first
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.
Use $stitchflow to explore three mobile-first checkout directions for a modern ecommerce app, with sticky CTA, compact order summary, and polished spacing.
Use $stitchflow to create a SaaS landing page for an enterprise design tool, with strong typography, product shots, pricing cards, and a credible B2B feel.
Compatibility note:
- brand name:
StitchFlow
- current skill slug:
stitchflow
- legacy alias still supported:
stitch-design-local
- GitHub Copilot plugin slug:
stitchflow
- Gemini CLI extension id:
stitchflow
60-second setup
git clone https://github.com/yshishenya/stitchflow.git
cd stitchflow
bash install.sh --target all
Then add STITCH_API_KEY to:
${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}/.env
Then restart your client and run one of the prompts from this README.
Expected first output:
- a generated UI direction
- local HTML you can inspect or share
- a screenshot image saved in the corresponding
runs/ folder
Who this is for
- product and design engineers who want faster UI exploration before frontend work
- agent builders who want one reusable design workflow across multiple clients
- teams that need local artifacts instead of another hosted black box
What you get
- one canonical skill:
stitchflow
- one shared local toolkit:
stitch-starter
- local HTML, screenshots, and run artifacts
- variants and edits from natural-language prompts
- installable packaging across multiple agent clients
English
Why this exists
The Stitch SDK is powerful, but most teams still need a repeatable workflow around it.
This repo removes the friction between:
- a rough product brief
- a useful UI direction
- local artifacts the team can review immediately
StitchFlow packages Stitch as a reusable agent skill, installs a local toolkit, and saves HTML, screenshots, and run metadata on your machine instead of behind another hosted workflow.
Who this is for
- product engineers who want to explore UI before writing frontend code
- design engineers who want faster prompt-to-HTML loops
- founders who need strong first-pass screens from natural-language briefs
- AI-agent builders who want a ready-to-run Stitch workflow across multiple clients
What you get