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

Quick Start

1. Design something

Design a SaaS analytics dashboard with KPI cards,
revenue chart, and user segments donut chart

The stitch-design skill auto-activates, creates a Stitch project, and generates your design.

2. Generate images with NanoBanana

Generate a hero illustration for my landing page — isometric 3D style,
purple gradient background, floating dashboard elements

3. Explore alternatives

Use the design-explorer agent to create 4 variants
of this landing page in different styles

4. Export

Download the dashboard screenshot and export the HTML

Plugin Structure

stitchkit/
├── .claude-plugin/
│   └── plugin.json              # Plugin metadata
├── .mcp.json                    # Stitch, Figma & NanoBanana MCP auto-configuration
├── skills/
│   ├── stitch-design/
│   │   ├── SKILL.md             # Design generation skill (auto-triggered)
│   │   └── references/
│   │       └── prompt-templates.md  # 22+ page type templates
│   └── stitch-setup/
│       └── SKILL.md             # MCP setup command (/stitch-setup)
├── agents/
│   └── design-explorer.md      # Multi-variant design exploration agent
├── assets/
│   ├── banner.png
│   └── icon.png
├── LICENSE
└── README.md

Examples

Generate a mobile app screen

Design a fitness tracking app home screen with daily step count ring,
heart rate monitor, weekly activity chart, and quick-start workout buttons.
Use a dark theme with vibrant accent colors.

Generate and compare variants

Create a landing page for a meditation app, then generate 3 color variants
exploring different moods: calm blue, warm sunset, forest green.

Design-to-code workflow

1. Generate a checkout page design with Stitch
2. Export the HTML/CSS
3. Integrate into my React project

Nanobanana — Gemini Image Generation

stitchkit includes nanobanana-mcp, an MCP server for AI image generation powered by Google's Gemini models. It provides:

• Multi-model image generation — Gemini 3.1 Flash (default), Gemini 3 Pro, and Gemini 2.5 Flash
• Smart model routing — Automatically picks the best model based on your prompt
• Image editing — Edit existing images with natural language instructions
• Aspect ratio control — 1:1, 16:9, 9:16, 21:9, and more
• Conversation context — Multi-turn image generation with chat history

Standalone installation

If you want nanobanana without the full stitchkit plugin:

claude mcp add -s user nanobanana-mcp -- npx -y @ycse/nanobanana-mcp

Requires a GOOGLE_AI_API_KEY (or GEMINI_API_KEY) environment variable. Get a free key at Google AI Studio.

Acknowledgments

• zhongweili/nanobanana-mcp-server — Original upstream project

Related Projects

• awesome-stitch-design — Curated list of 44+ Stitch design prompts with previews
• stitch-sdk — Official Google Stitch SDK
• stitch-mcp — Community Stitch MCP server

Contributing

Contributions welcome! You can add:

• New prompt templates in skills/stitch-design/references/
• New agents in agents/
• New skills in skills/

License

MIT — Made with Stitch by @tygwan