stitch-kit
installs/mo · npmstarsforks
How to install stitch-kit?
gabelul/stitch-kit
$git clone https://github.com/gabelul/stitch-kitYour coding agent designs terrible UI. stitch-kit wires it into Google Stitch MCP and teaches it the whole pipeline — ideation, screen generation, design systems, production components.
README.md
| 1 | <p align="center"> |
| 2 | <img src=".github/assets/banner.svg" alt="stitch-kit — design superpowers for AI coding agents" width="100%"/> |
| 3 | </p> |
| 4 | |
| 5 | # stitch-kit |
| 6 | |
| 7 | **Your coding agent writes decent code and designs terrible UI. stitch-kit fixes the second half — it wires agents into [Google Stitch](https://stitch.withgoogle.com) (text prompts → genuinely beautiful screens) and teaches them to drive it properly.** |
| 8 | |
| 9 | 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. |
| 10 | |
| 11 | So I taught them. |
| 12 | |
| 13 | All four of these came out of stitch-kit. Different briefs, genuinely different results — not one template with the hue rotated. |
| 14 | |
| 15 | <table> |
| 16 | <tr> |
| 17 | <td width="50%"><img src=".github/assets/showcase-ghostwork.png" alt="Ghostwork ops dashboard — monospace source health matrix, transport lane utilisation, live job queue"/></td> |
| 18 | <td width="50%"><img src=".github/assets/showcase-hostguard.png" alt="HostGuard compliance dashboard — serif headings on warm cream, property alerts, activity timeline"/></td> |
| 19 | </tr> |
| 20 | <tr> |
| 21 | <td><sub><b>Ops console</b> · monospace, dense tables, industrial light</sub></td> |
| 22 | <td><sub><b>Compliance SaaS</b> · serif on warm cream, generous whitespace</sub></td> |
| 23 | </tr> |
| 24 | <tr> |
| 25 | <td><img src=".github/assets/showcase-destiny.png" alt="Destiny Lantern chart screen — midnight blue and gold, display serif with CJK typography"/></td> |
| 26 | <td><img src=".github/assets/showcase-vault.jpg" alt="Document scanner mobile screen — dark capture UI with orange framing over a live camera view"/></td> |
| 27 | </tr> |
| 28 | <tr> |
| 29 | <td><sub><b>Astrology app</b> · midnight and gold, serif + CJK type</sub></td> |
| 30 | <td><sub><b>Mobile capture</b> · dark UI over live camera, orange framing</sub></td> |
| 31 | </tr> |
| 32 | </table> |
| 33 | |
| 34 | <!-- These are real generated screens, pulled from Stitch projects via the |
| 35 | MCP API. Never swap them for illustrations, mockups or diagrams — for |
| 36 | a tool that sells aesthetic quality, fabricated proof is the fastest |
| 37 | way to lose the argument. |
| 38 | |
| 39 | When replacing one, check it full-size first: Stitch renders text |
| 40 | inside nested device mockups as noise, which is invisible at gallery |
| 41 | scale and obvious when someone clicks through. Prefer screens whose |
| 42 | copy is real at 100%. --> |
| 43 | |
| 44 | --- |
| 45 | |
| 46 | > **Generating designs needs Google Stitch.** Sign in at [stitch.withgoogle.com](https://stitch.withgoogle.com) with any Google account, then grab an API key from [settings](https://stitch.withgoogle.com/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. |
| 47 | > |
| 48 | > **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. |
| 49 | |
| 50 | ## Install |
| 51 | |
| 52 | ```bash |
| 53 | npx @booplex/stitch-kit |
| 54 | ``` |
| 55 | |
| 56 | 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](#works-with) for what that means per client. |
| 57 | |
| 58 | Then, inside Claude Code, add the skills: |
| 59 | |
| 60 | ```bash |
| 61 | /plugin marketplace add https://github.com/gabelul/stitch-kit.git |
| 62 | /plugin install stitch-kit@stitch-kit |
| 63 | ``` |
| 64 | |
| 65 | 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. |
| 66 | |
| 67 | ```bash |
| 68 | npx @booplex/stitch-kit update # update to latest |
| 69 | npx @booplex/stitch-kit status # check what's installed |
| 70 | ``` |
| 71 | |
| 72 | <details> |
| 73 | <summary>Claude Code — manual steps</summary> |
| 74 | |
| 75 | ```bash |
| 76 | # 1. Add Stitch MCP (remote HTTP server — needs API key from stitch.withgoogle.com/settings) |
| 77 | claude mcp add stitch --transport http https://stitch.googleapis.com/mcp \ |
| 78 | --header "X-Goog-Api-Key: YOUR-API-KEY" -s user |
| 79 | |
| 80 | # 2. Install the plugin (inside Claude Code) |
| 81 | /plugin marketplace add https://github.com/gabelul/stitch-kit.git |
| 82 | /plugin install stitch-kit@stitch-kit |
| 83 | ``` |
| 84 | </details> |
| 85 | |
| 86 | <details> |
| 87 | <summary>Codex CLI — manual steps</summary> |
| 88 | |
| 89 | ```bash |
| 90 | git clone https://github.com/gabelul/stitch-kit.git |
| 91 | cd stitch-kit && bash install-codex.sh |
| 92 | ``` |
| 93 | |
| 94 | Then add Stitch MCP to `~/.codex/config.toml`: |
| 95 | |
| 96 | ```toml |
| 97 | [mcp_servers.stitch] |
| 98 | url = "https://stitch.googleapis.com/mcp" |
| 99 | |
| 100 | [mcp_servers.stitch.headers] |
| 101 | X-Goog-Api-Key = "YOUR-API-KEY" |
| 102 | ``` |
| 103 | |
| 104 | Get your API key at [stitch.withgoogle.com/settings](https://stitch.withgoogle.com/settings). |
| 105 | |
| 106 | Use `$stitch-kit` to activate the agent or `$stitch-orchestrator` for the full pipeline. |
| 107 | |
| 108 | **Compaction resilience (optional):** to keep your project, screens, and PRD draft across a context compaction, stitch-kit |
People who liked this also viewed
6 picksType
- Figma-Context-MCPMCP server to provide Figma layout information to AI coding agents like CursorMCP ServersJul 2026
- sunnysideFigma-Context-MCPA comprehensive Model Context Protocol (MCP) server that bridges Figma designs with AI development workflows. It provides 30 specialized tools for extracting pixel-perfect code, assets, and component structures directly from Figma designs.MCP ServersApr 2026
- figma-console-mcpYour design system as an API. Connect AI to Figma for extraction, creation, and debugging.MCP ServersJul 2026
- dcc-mcp-coreCore runtime and shared tooling for DCC-MCP: safe, skill-first MCP integration across Maya, Blender, Houdini, Photoshop, and custom DCC hosts.MCP ServersJul 2026
- godot-aiProduction-grade MCP server and AI tools for the Godot engine. A Snap to install. Totally free and fun.MCP ServersJul 2026
- freecad-mcpFreeCAD MCP(Model Context Protocol) serverMCP ServersJul 2026
