stitch-a11y

stitch-kit

Your coding agent writes decent code and designs terrible UI. stitch-kit fixes the second half — it wires agents into Google Stitch (text prompts → genuinely beautiful screens) and teaches them to drive it properly.

I built this because I got tired of watching Claude Code generate UIs that look like a government form from 2004. Gray boxes, blue buttons, zero taste. Meanwhile Stitch generates pixel-perfect screens from text — but it's a raw MCP tool sitting there, and no coding agent knows how to use it well.

So I taught them.

All four of these came out of stitch-kit. Different briefs, genuinely different results — not one template with the hue rotated.

---

Generating designs needs Google Stitch. Sign in at stitch.withgoogle.com with any Google account, then grab an API key from settings. As of July 2026: no waitlist, no invite, free to use — but there are monthly generation limits and Google has signalled paid tiers, so treat the allowance as generous-but-finite. Check Stitch's own site before relying on any of that; it's their pricing to change, not mine.

Converting to code doesn't. The framework conversion skills take a local HTML file or a URL just as happily as a Stitch screen. If you already have markup and only want production components out of it, you need no Google account at all.

Install

npx @booplex/stitch-kit

Detects every supported client you have installed — Claude Code, Codex CLI, OpenCode, Crush, Cursor, VS Code, Gemini CLI — and wires up whatever each one supports. See Works with for what that means per client.

Then, inside Claude Code, add the skills:

/plugin marketplace add https://github.com/gabelul/stitch-kit.git
/plugin install stitch-kit@stitch-kit

Two steps, not one — the npx installer handles the agent and MCP wiring, the plugin adds the 36 skills. The agent works without them, but the skills are what make the output good.

npx @booplex/stitch-kit update   # update to latest
npx @booplex/stitch-kit status   # check what's installed

# 1. Add Stitch MCP (remote HTTP server — needs API key from stitch.withgoogle.com/settings)
claude mcp add stitch --transport http https://stitch.googleapis.com/mcp \
  --header "X-Goog-Api-Key: YOUR-API-KEY" -s user

# 2. Install the plugin (inside Claude Code)
/plugin marketplace add https://github.com/gabelul/stitch-kit.git
/plugin install stitch-kit@stitch-kit

git clone https://github.com/gabelul/stitch-kit.git
cd stitch-kit && bash install-codex.sh

Then add Stitch MCP to ~/.codex/config.toml:

[mcp_servers.stitch]
url = "https://stitch.googleapis.com/mcp"

[mcp_servers.stitch.headers]
X-Goog-Api-Key = "YOUR-API-KEY"

Get your API key at stitch.withgoogle.com/settings.

Use $stitch-kit to activate the agent or $stitch-orchestrator for the full pipeline.

Compaction resilience (optional): to keep your project, screens, and PRD draft across a context compaction, stitch-kit needs the stitch-session helper on PATH — npm i -g @booplex/stitch-kit provides it, and install-codex.sh symlinks it. For automatic re-orientation after a compaction, install stitch-kit as a Codex plugin (codex plugin add) and trust its hooks. Details: docs/compaction-resilience.md.

---

Works with

The installer detects what you've got and wires up whatever that client supports. Not every agent takes skills, so here's the honest breakdown rather than a logo wall:

Skills are the structured workflows — ideation, prompt engineering, ID-safe MCP wrappers, framework conversion. Agent is the Stitch-aware persona that knows the full toolset. MCP only means you get Stitch wired into the client and can drive it by hand, but none of the design intelligence — which is most of the point, so the top three are where this actually shines.

Gemini CLI handles MCP through its own extension system rather than a config file, so the installer points you at gemini extensions list instead of writing config for you.

Check what you've got with npx @booplex/stitch-kit status.

---

What actually happens when you use it

Without stitch-kit, your agent sends Stitch a half-baked prompt, gets confused by ID formats, generates one screen, hands you raw HTML, and calls it a day. With stitch-kit:

1. Think first — stitch-ideate does something your coding agent literally cannot: design research. It fetches trends, analyzes competitor UIs, and proposes 3 distinct design directions with real hex colors, typography pairings, and mood descriptions. It's the design buddy your agent was missing.

2. Generate smart — The orchestrator detects whether your request needs ideation or can go straight to generation (there's a specificity scoring system — hex colors and layout details skip ideation, vague requests trigger it). It engineers a structured prompt, sends the full PRD to Stitch, and batch-generates up to 10 screens in one call. If there are more, it auto-continues.

3. Iterate without starting over — Edit screens with text prompts, generate design variants, apply design systems across multiple screens for visual consistency. The agent knows which Stitch tool to reach for (and more importantly, which ID format each one expects — because apparently Google couldn't pick one).

4. Ship real code — Convert to production components with dark mode, TypeScript, design tokens, and ARIA. Not "here's some JSX, figure it out" — proper Server/Client component spli