Help us improve
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
By devinilabs
Create, edit, and export high-fidelity UI screens from text prompts using Google Stitch, with design-system awareness.
npx claudepluginhub devinilabs/claude-stitch-setupConnect Google Stitch to Claude Code so you can design UI screens just by chatting.
Ask Claude to "design a login page in dark mode with a sidebar" and watch it generate a real Stitch screen — HTML, screenshot, editable, all inside your terminal.
stitch MCP server — exposes Stitch's tools (generate_screen_from_text, edit_screens, get_screen, variants, export) directly to Claude Code.stitch-mcp agent skill — tells Claude how and when to use the tools, with design-system-aware workflow.You need these installed already:
node --version. If missing, get it from nodejs.org.npm install -g @anthropic-ai/claude-code and run claude.git clone https://github.com/devinilabs/claude-stitch-setup.git
cd claude-stitch-setup
Or download the ZIP and unzip it wherever you like.
cp .env.example .env
Then open .env in any text editor and replace your-stitch-api-key-here with your real key:
STITCH_API_KEY=stit_xxxxxxxxxxxxxxxxxxxx
Open Claude Code in the folder and run:
/plugin install .
That's it. Claude Code auto-loads the MCP server and the skill. On the first message, you'll see a quick npm install — this is normal, happens once.
In Claude Code, type:
/mcp
You should see stitch with a ✓ next to it and a list of tools (generate_screen_from_text, edit_screens, etc.).
Now try:
Design a modern pricing page with 3 tiers, dark mode, purple accents.
Claude will call Stitch and return a screenshot + HTML link.
claude-stitch-setup/
├── .claude-plugin/
│ └── plugin.json # Plugin manifest
├── .mcp.json # MCP server config
├── bin/
│ ├── start.sh # Bootstrap (auto-installs deps, loads .env)
│ └── stitch-mcp-server.mjs # The MCP server itself
├── skills/
│ └── stitch-mcp/
│ └── SKILL.md # Tells Claude how to use Stitch
├── package.json # Node dependencies
├── .env.example # Copy to .env and add your key
├── LICENSE # Apache-2.0
└── README.md # This file
"STITCH_API_KEY is not set"
→ You skipped step 2. Copy .env.example to .env and paste your key.
/mcp shows stitch as failed / red
→ Most common cause is a wrong key or a missing .env. Check the logs with /mcp → select stitch → View logs.
/plugin install . not recognized
→ Update Claude Code: npm update -g @anthropic-ai/claude-code. Plugin support needs a recent version.
First run is slow
→ That's the one-time npm install. After it finishes, subsequent starts are instant.
Want to uninstall
→ /plugin uninstall stitch inside Claude Code, or delete the folder.
This plugin ships with one skill (stitch-mcp). Google Labs publishes a whole library of additional skills — React conversion, Remotion video walkthroughs, shadcn/ui integration, and more:
npx skills add google-labs-code/stitch-skills --list
Install any of them globally:
npx skills add google-labs-code/stitch-skills --skill stitch-design --global
Apache-2.0. Same as @google/stitch-sdk.
Not an official Google product.
Admin access level
Server config contains admin-level keywords
Share bugs, ideas, or general feedback.
Based on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Memory compression system for Claude Code - persist context across sessions
Standalone image generation plugin using Nano Banana MCP server. Generates and edits images, icons, diagrams, patterns, and visual assets via Gemini image models. No Gemini CLI dependency required.
Streamline people operations — recruiting, onboarding, performance reviews, compensation analysis, and policy guidance. Maintain compliance and keep your team running smoothly.
Write feature specs, plan roadmaps, and synthesize user research faster. Keep stakeholders updated and stay ahead of the competitive landscape.
Prospect, craft outreach, and build deal strategy faster. Prep for calls, manage your pipeline, and write personalized messaging that moves deals forward.
Create content, plan campaigns, and analyze performance across marketing channels. Maintain brand voice consistency, track competitors, and report on what's working.
Turn any video into a section-by-section study-notes markdown file with embedded screenshots and a timestamped transcript.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claim