Stitchkit

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](#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](LICENSE) — Made with Stitch by @tygwan

Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: tygwan
• Source: tygwan/stitchkit
• License: MIT

Install and usage instructions live in the source repository linked above.