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

Claude Code — manual steps

# 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

Codex CLI — manual steps

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.