stitch-kit

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.

Ops console · monospace, dense tables, industrial light	Compliance SaaS · serif on warm cream, generous whitespace
Astrology app · midnight and gold, serif + CJK type	Mobile capture · dark UI over live camera, orange framing

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

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

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

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 split, theme integration, accessibility baked in.

Ship to any framework

Works on any HTML, not just Stitch output. Each conversion skill takes a Stitch screen, a local HTML file, or a URL — point it at a template you bought, a page you already built, or something a different tool generated. Only the Stitch route needs an API key.

Every target gets dark mode and design tokens. The rest depends on where you’re shipping: TypeScript and ARIA on the web targets, Swift and native accessibility APIs on SwiftUI, plain semantic HTML with no build step on the HTML target.

Pick your target:

Architecture

Five layers, 36 skills. Each layer exists because agents fail at something specific with Stitch, and the failures are different enough that one skill can’t cover them.

The ID format thing deserves its own callout. generate_screen_from_text wants "3780309359108792857". list_screens wants "projects/3780309359108792857". Pass the wrong one and you get a cryptic error. This is the #1 reason agents fail with raw Stitch MCP, and it’s why there’s a dedicated wrapper skill per API tool instead of letting agents call the API directly.

Details → docs/architecture.md

Skill anatomy

skills/[skill-name]/
├── SKILL.md        — what it does, when to use it, step-by-step workflow
├── examples/       — real examples so the agent copies patterns instead of guessing
├── references/     — design contracts, checklists (loaded only when needed)
└── scripts/        — fetch helpers, validators, code generators

The examples folder is the secret weapon. Agents produce dramatically better output when they have real patterns to copy instead of hallucinating boilerplate from training data. (I learned this the hard way after watching Claude generate the same broken Tailwind config 15 times in a row.)

vs. the official Google Stitch Skills

Google’s official repo ships 15 skills across three plugins — stitch-design, stitch-build, stitch-utilities. (Checked July 2026; they move fast, so verify before taking this comparison as current.) It’s a real toolkit, not a stub, and it does one whole thing stitch-kit doesn’t (see the gaps below).

Raw skill counts aren’t a fair comparison: Google consolidated generate/edit/variants into one skill and the four design-system operations into another, where stitch-kit keeps them as separate wrappers. Different granularity, not more capability. Here’s where both cover the same ground:

What stitch-kit adds:

• stitch-ideate — conversational design agent that researches trends, proposes directions, produces PRDs, and batch-generates all screens. No equivalent.
• stitch-orchestrator — end-to-end coordinator with smart ideation routing. No equivalent.
• stitch-ui-design-spec-generator — structured spec before prompt, which beats pure prompt enhancement. No equivalent.
• stitch-swiftui-components — SwiftUI isn’t a target in the official repo at all.
• stitch-design-system — token extraction → CSS custom properties with dark mode. Their manage-design-system handles Stitch-side design systems; this one emits CSS for your codebase.
• stitch-a11y — a dedicated WCAG 2.1 AA audit-and-fix pass. They cover accessibility as guidance inside individual conversion skills, but there’s no audit skill.
• stitch-animate — implements motion in components. Their taste-design specifies motion philosophy in DESIGN.md; this writes the actual animation code with prefers-reduced-motion handled.
• stitch-skill-creator — meta-skill for extending the plugin. No equivalent.
• Every conversion skill takes a local HTML file or URL, so that half works with no Stitch account.

What Google has that stitch-kit doesn’t — worth knowing before you pick:

• stitch::upload-to-stitch — uploads screenshots or mockups into a Stitch project. stitch-kit had a wrapper for this (upload_screens_from_images), but Google removed that tool from the live MCP API — there’s no image-upload route left on the API side, so the wrapper skill is gone too. Recreate the design from a text prompt instead, or use one of the conversion skills’ local-file routes if you already have markup.
• stitch::code-to-design — pulls an existing web app into Stitch by chaining the two skills below. stitch-kit only goes design → code; this goes code → design.
• stitch::extract-static-html — extracts self-contained static HTML, assets inlined, from a running app
• stitch::extract-design-md — generates DESIGN.md from frontend source code. stitch-kit’s version reads a Stitch project instead, so same output, different input.
• taste-design — a stricter anti-generic DESIGN.md variant (calibrated color, asymmetric layout, deliberate motion)
• react-vite-dashboard — Vite dashboard generator, Web3/DeFi flavored

If your workflow starts from an app you’ve already built and you want it in Stitch, use the official repo — that’s the direction stitch-kit doesn’t cover.

Full skill reference

All 36 skills with descriptions, layers, and the ID format table → docs/skills-index.md

MCP API schemas (JSON Schema for the 15 Stitch tools, all wrapped) → docs/mcp-schemas/

Prerequisites

• Stitch MCP — setup guide (Google account + API key required)
• Node.js for web framework conversions
• Xcode 15+ for SwiftUI, Expo CLI for React Native

Related

Other tools for agents that care about quality:

• slopbuster — AI text humanizer. 100+ patterns, two-pass audit, three-tier scoring. Makes AI-generated prose, code comments, and academic writing sound human.
• pixelslop — Design quality scanner. Opens real pages in Playwright, measures actual pixels, catches visual AI slop. The visual counterpart to slopbuster.
• pixeltamer — Image generation skill for AI coding agents. Two backends (OpenAI API or codex CLI signed in to ChatGPT subscription), three modes (generate, edit, compose up to 16 references), prompting doctrine for gpt-image-2 plus six production recipes.
• claude-code-skill-activator — Skill auto-detection for Claude Code. AI extracts keywords once, then fast offline matching suggests skills as you type.

Built by Gabi @ Booplex.com — because watching AI agents produce ugly UIs when beautiful tools exist was driving me nuts. Apache 2.0.