Stitch Skills + Claude Code Tutorial: Generate UI Designs with AI Agents
Comprehensive guide to Google official stitch-skills project, how to configure and use it in Claude Code, achieving a complete workflow from natural language to UI design to code.
What is Stitch Skills?
Stitch Skills is Google's official Agent Skills library (GitHub: google-labs-code/stitch-skills, 6.4k Stars) that enables AI coding agents to directly interact with Google Stitch, enabling:
- Generate designs — Create Stitch UI from text/images
- Manage design systems — Upload and apply DESIGN.md
- Code generation — Convert Stitch designs to React/React Native components
- Extract design specs — Extract DESIGN.md from frontend code
In short, Stitch Skills lets you command AI to generate UI designs from within Claude Code, then automatically convert them to usable frontend code.
Prerequisites
Before starting, you need:
- Google account — For Stitch access
- Node.js 18+ — Runtime
- Claude Code — AI coding agent
- Google Cloud project — For Stitch API authentication
Step 1: Configure Stitch MCP Server
Stitch Skills depends on the Stitch MCP Server to communicate with Stitch. First configure the MCP connection.
1.1 Create a Google Cloud Project
- Visit Google Cloud Console
- Click the project selector → "New Project"
- Enter a project name (e.g., my-stitch-project)
- Click "Create"
1.2 Enable Stitch API
- Click "APIs & Services" → "Library" in the left menu
- Search for "Stitch API"
- Click "Enable"
1.3 Install and Configure MCP Server
Run the auto-configuration wizard:
npx @_davideast/stitch-mcp init
This wizard automatically handles gcloud CLI checks, Google login, project config, and Stitch API activation.
Or configure manually:
# Login to Google Cloud
gcloud auth login
gcloud config set project YOUR_PROJECT_ID
# Configure application default credentials
gcloud auth application-default login
gcloud auth application-default set-quota-project YOUR_PROJECT_ID
# Enable Stitch API
gcloud beta services mcp enable stitch.googleapis.com --project=YOUR_PROJECT_ID
1.4 Register MCP with Claude Code
claude mcp add \
-e GOOGLE_CLOUD_PROJECT=YOUR_PROJECT_ID \
-s user stitch \
-- npx -y @_davideast/stitch-mcp proxy
Verify the connection:
claude mcp list | grep stitch
Step 2: Install Stitch Skills
2.1 Install Full Plugin Set (Recommended)
npx plugins add google-labs-code/stitch-skills --scope project --target claude-code
This installs three plugin packages:
| Plugin | Function |
|---|---|
| stitch-design | Core design workflows (generate, edit, manage designs) |
| stitch-build | Code generation (React, React Native, shadcn/ui) |
| stitch-utilities | Utilities (prompt enhancement, DESIGN.md generation) |
2.2 Selective Installation
If you only need certain skills:
npx skills add google-labs-code/stitch-skills
Step 3: Hands-On Demo
After configuration, you can use natural language commands directly in Claude Code to operate Stitch.
3.1 Generate UI Design
Type in Claude Code:
> Make a mobile app homepage for a fitness tracker with a dashboard,
> activity chart, and bottom navigation
Claude Code will call Stitch's generate-design skill to create the corresponding UI design in your Stitch project.
3.2 Edit Existing Design
> Edit the login screen to add a "Remember Me" checkbox and change
> the button color to blue
3.3 Generate Design Variants
> Generate 3 design variants of the home screen with dark mode,
> light mode, and high-density layouts
3.4 Convert Design to React Components
> Convert all screens in my Stitch project to React components
Claude Code will automatically pull designs from Stitch, generate React component code, and ensure design token consistency.
3.5 Extract Design System from Frontend Code
> Scan /src and extract the design system into .stitch/DESIGN.md
Available Skills
Design Skills
| Skill | Description | Example Command |
|---|---|---|
| stitch::generate-design | Generate design from text/image | "Make a settings page for a SaaS app" |
| stitch::code-to-design | Convert frontend code to Stitch design | "Upload /src/dashboard into Stitch" |
| stitch::manage-design-system | Manage design system | "Apply our DESIGN.md to all screens" |
| stitch::extract-design-md | Extract DESIGN.md from code | "Extract design system from /src" |
| stitch::upload-to-stitch | Upload local resources to Stitch | "Upload landing_page.html to Stitch" |
Build Skills
| Skill | Description | Example Command |
|---|---|---|
| stitch::react-components | Generate React components | "Convert Stitch screens to React" |
| stitch::react-native | Generate React Native components | "Convert design to React Native" |
| shadcn-ui | shadcn/ui development guidance | "Build a data table with shadcn/ui" |
Utility Skills
| Skill | Description | Example Command |
|---|---|---|
| enhance-prompt | Enhance prompts | "Enhance: make a settings page" |
| stitch-loop | Generate multi-page websites | "Build a 5-page portfolio website" |
| taste-design | Generate premium DESIGN.md | "Generate premium DESIGN.md" |
Complete Workflow Example
Here is a complete workflow from scratch:
Step 1: Create Project
mkdir my-app && cd my-app
npm init -y
npx plugins add google-labs-code/stitch-skills --scope project --target claude-code
Step 2: Describe Requirements
In Claude Code:
> Build a mobile fitness tracking app with:
> - Dashboard showing today's stats (steps, calories, heart rate)
> - Activity chart for the last 7 days
> - Bottom navigation with Home, Activities, Profile tabs
> - Clean modern design with blue accent color
Step 3: Generate Design
Claude Code will call Stitch to generate the corresponding UI design. You can view and edit it at stitch.withgoogle.com.
Step 4: Export Code
> Now convert these designs to React Native components with proper
> theme and navigation
Step 5: Iterate
> Change the primary color to green and add a dark mode variant
FAQ
Q: Is it free?
A: Completely free. Stitch uses Google Labs free quota (350 generations per month), and Stitch Skills is open source and free.
Q: Which coding agents are supported?
A: Supports Claude Code, Cursor, Gemini CLI, Codex CLI, Antigravity, and all MCP-compatible coding agents.
Q: How is the generated code quality?
A: Stitch generates HTML/CSS code. The stitch-build plugin can convert it to React/React Native components. Code quality depends on prompt clarity.
Q: Can it integrate with existing projects?
A: Yes. The code-to-design skill can upload existing frontend code to Stitch, then use Stitch for design iteration, and export updated code.
Summary
The combination of Stitch Skills + Claude Code provides a new way to develop UI:
- Describe requirements in natural language → Stitch generates UI design
- Iterate in Claude Code → Adjust design details
- Automatically convert to code → Generate React/React Native components
This workflow is particularly suitable for rapid prototyping, non-designers developing independently, and scenarios that need quick design exploration.
If you want to learn more about Stitch prompt techniques, check out our Stitch Prompt Tutorials and Style Gallery.