stitchkit
The ultimate Stitch toolkit for Claude Code
Design skills, prompt templates, and MCP setup for Google Stitch & Figma.
What is stitchkit?
stitchkit is a Claude Code plugin that supercharges your design workflow. It bundles:
- MCP Setup — One-command installation of Google Stitch, Figma, and NanoBanana MCP servers
- Design Skills — Expert prompting skills for generating UI designs with Stitch
- Prompt Templates — Ready-to-use templates for 22+ web page types
- Agents — Autonomous design exploration agent
Prerequisites
You will need API keys / tokens for the MCP servers bundled in this plugin:
| MCP Server | Key Required | Where to Get It |
|---|---|---|
| Google Stitch | Google account (OAuth) or GOOGLE_API_KEY | Google Cloud Console > APIs & Services > Credentials |
| Figma | FIGMA_ACCESS_TOKEN | Figma > Settings > Security > Personal access tokens |
| NanoBanana | GOOGLE_AI_API_KEY (or GEMINI_API_KEY) | Google AI Studio (free) |
The plugin auto-registers all three MCP servers when installed. You just need to provide your API keys as environment variables (see Setup below).
Installation
claude plugin add tygwan/stitchkit
Or clone manually:
git clone https://github.com/tygwan/stitchkit.git ~/.claude/plugins/stitchkit
Setup
After installing the plugin, configure your API keys so the MCP servers can authenticate.
Step 1: Get API keys
| MCP Server | Key | How to get |
|---|---|---|
| Google Stitch | GOOGLE_API_KEY | Google Cloud Console → APIs & Services → Credentials → Create API Key |
| Figma | FIGMA_ACCESS_TOKEN | Figma → Settings → Security → Personal access tokens → Generate |
| NanoBanana | GOOGLE_AI_API_KEY | Google AI Studio → Create API Key (free) |
Step 2: Set environment variables
Add to your shell profile (~/.bashrc, ~/.zshrc) or project .env file:
export GOOGLE_API_KEY="your-google-cloud-api-key" # Stitch
export FIGMA_ACCESS_TOKEN="figd_your-figma-token" # Figma
export GOOGLE_AI_API_KEY="your-google-ai-api-key" # NanoBanana
Only set the keys for the services you need. Stitch and NanoBanana share Google credentials but from different consoles.
Step 3: Verify with /stitch-setup
Run the setup skill inside Claude Code to validate your configuration:
/stitch-setup
This will check each MCP server's connectivity and guide you through any missing credentials.
Step 4: Start designing
Design a SaaS analytics dashboard with KPI cards, revenue chart, and user segments donut chart
The stitch-design skill auto-activates and handles the rest.
Tip: If you only need a subset of the servers, you can skip the keys you don't need. Stitch works standalone with OAuth (no API key), and NanoBanana is optional if you don't need Gemini image generation.
What's Included
Skills
| Skill | Type | Description |
|---|---|---|
/stitch-setup | User-invoked | Set up Stitch, Figma, and NanoBanana MCP servers with guided configuration |
stitch-design | Auto-triggered | Activates on design requests — generates screens with optimized Stitch prompts |
Agents
| Agent | Description |
|---|---|
design-explorer | Autonomously generates 3-4 design alternatives for a concept, varying style/layout/color |
MCP Servers (auto-configured)
| Server | Purpose |
|---|---|
| Google Stitch | AI-powered UI design generation, editing, variants, and HTML export |
| Figma | Design file sync, component import, and design token extraction |
| Nanobanana | Gemini-powered image generation, editing, and smart model selection |
Prompt Templates
22+ page type templates organized by category:
- Marketing — Landing Page, Pricing, About/Team, Blog, Portfolio
- Product — Dashboard, Settings, Onboarding, Chat, Feed
- Commerce — Product Listing, Product Detail, Cart/Checkout, Order Tracking
- Utility — Login/Auth, 404/Error, Search, Email/Newsletter
- Admin — CMS, Data Table, Kanban, Calendar