Google Stitch Studio

An end-to-end AI design-to-deployment pipeline powered by Google Stitch and Firebase — built for Claude Cowork.

Describe a UI in plain language. Get production-ready screens, an interactive prototype, clean HTML/CSS code, and a live Firebase deployment — without leaving Claude.

---

What It Does

Design → Generate polished UI screens from text prompts using Google Stitch's AI.

Prototype → Compile all screens into a fully routed, clickable interactive site.

Export → Pull out production HTML/CSS (or convert to React, Vue, etc.) for development.

Deploy → Publish directly to Firebase Hosting with a shareable live URL.

---

Components

MCP Servers

Server	Purpose
stitch	Google Stitch MCP at stitch.googleapis.com — screen generation, prototyping, code export
firebase	Firebase MCP — 30+ tools for hosting, Firestore, Auth, and Cloud Functions

Skill

stitch-design-pipeline — Triggers when you ask Claude to design a UI, build a prototype, generate app screens, or deploy a design. Includes an E2E workflow guide and full Stitch MCP tool reference.

Commands

Command	Description
/stitch-new [brief]	Start a new Stitch project from a brief — creates the project and generates your first set of screens
/stitch-screen [project] [description]	Generate a new screen and add it to an existing project
/stitch-preview [project]	Build the full interactive prototype and open it in the browser
/stitch-export [screen]	Export HTML code from a screen, with options to convert to React/Vue or scaffold full-stack
/stitch-deploy [project]	Deploy the built site to Firebase Hosting and get a live shareable URL

---

Setup

Step 1: Connect your Stitch API key

Run /stitch-setup in Claude and follow the prompts. It will walk you through getting a free API key from Google AI Studio and registering it with one terminal command. Takes about 2 minutes.

Why terminal instead of browser sign-in? Stitch uses a Google API key for auth — not OAuth. Registering it via claude mcp add saves it directly to your Claude user profile so it works across all sessions and projects without any browser flow.

Step 2: Set Up Firebase (for deployment)

1. Install the Firebase CLI:

npm install -g firebase-tools

2. Log in:

firebase login

That's it — the Firebase MCP uses your login credentials automatically. No token env var needed.

Step 3: Install the Plugin

Install this plugin globally in Claude:

claude plugin install google-stitch-studio.plugin --scope user

---

Usage Examples

Start a new design:

/stitch-new A mobile fitness tracker with a daily step counter, workout log, and progress charts. Clean, energetic design with a dark navy and electric blue palette.

Add a screen:

/stitch-screen FitTrack A profile settings screen with user avatar, name, connected devices, and notification preferences.

Build the prototype:

/stitch-preview FitTrack

Get the code:

/stitch-export Dashboard

Go live:

/stitch-deploy FitTrack

Or just talk to Claude naturally:

"Design me a landing page for a SaaS product that helps restaurants manage reservations. Modern, clean, with a warm color palette."

---

Environment Variables

Variable	Required	Description
STITCH_API_KEY	Yes	Google API key with Stitch API enabled. Get one at aistudio.google.com.

Firebase uses firebase login credentials — no additional variable needed.

---

The E2E Pipeline

Plain English Brief
       ↓
  /stitch-new          ← Google Stitch generates screens from text
       ↓
  /stitch-screen       ← Iterate, add screens, refine
       ↓
  /stitch-preview      ← Interactive prototype in your browser
       ↓
  /stitch-export       ← Production HTML → React/Vue components
       ↓
  Full-stack code      ← Claude + Gemini API finalize the app logic
       ↓
  /stitch-deploy       ← Live site on Firebase Hosting
       ↓
  🚀 Live at yourapp.web.app

---

Resources

• Google Stitch — Design with AI
• Stitch MCP Docs — Official MCP setup guide
• Google AI Studio — Free Gemini API access
• Firebase Console — Project management and hosting
• Firebase MCP Docs — Firebase MCP server reference