Google Stitch — AI UI/UX Design Generation

Generate production-ready UI designs and frontend code using Google Stitch via MCP.

Prerequisites

Verify stitch is configured:

mcporter list stitch

If missing, configure it:

# 1. Authenticate with Google Cloud
gcloud auth application-default login

# 2. Enable Stitch API
gcloud beta services mcp enable stitch.googleapis.com --project=YOUR_PROJECT_ID

# 3. Add to mcporter
mcporter config add stitch --stdio "npx -y stitch-mcp" --env GOOGLE_CLOUD_PROJECT=YOUR_PROJECT_ID

Tools

| Tool | Purpose | |------|---------| | list_projects | List all projects | | create_project | Create a project | | get_project | Get project details | | list_screens | List screens in a project | | get_screen | Get screen details | | generate_screen_from_text | Generate a screen from a prompt | | fetch_screen_code | Download HTML/CSS code | | fetch_screen_image | Download preview image |

Workflows

List Projects

mcporter call stitch.list_projects
mcporter call stitch.list_projects filter="view=owned"
mcporter call stitch.list_projects filter="view=shared"

Create a Project

mcporter call stitch.create_project title="My App Design"

Generate a Screen

mcporter call stitch.generate_screen_from_text \
  projectId="PROJECT_ID" \
  prompt="A modern dashboard with sidebar navigation, user stats cards, and a data table" \
  deviceType="DESKTOP" \
  modelId="GEMINI_3_PRO"

Parameters:

projectId (required): Numeric project ID (e.g., 4651986810686364080)
prompt (required): UI description
deviceType: MOBILE (default), DESKTOP, TABLET, or AGNOSTIC
modelId: GEMINI_3_FLASH (default, 30–60s) or GEMINI_3_PRO (1–3min, higher quality)

Generation takes 1–3 minutes. Do not retry.

List Screens

mcporter call stitch.list_screens projectId="PROJECT_ID"

Get Screen Details

mcporter call stitch.get_screen projectId="PROJECT_ID" screenId="SCREEN_ID"

Download Code

mcporter call stitch.fetch_screen_code projectId="PROJECT_ID" screenId="SCREEN_ID"

Returns self-contained HTML with Tailwind CSS.

Download Image

mcporter call stitch.fetch_screen_image projectId="PROJECT_ID" screenId="SCREEN_ID"

Saves PNG to current directory; returns base64 data.

Prompt Engineering

Specify These Elements

Layout: sidebar, header, grid, cards
Components: buttons, forms, tables, modals
Content: user data, charts, lists
Style: minimal, corporate, playful, dark mode

Strong Prompts

A settings page with a left sidebar showing navigation categories 
and a main content area with toggle switches for notifications, 
privacy settings, and account preferences. Dark mode.

An e-commerce product listing page with a search bar, filter sidebar 
on the left, and a 3-column grid of product cards showing image, 
title, price, and add-to-cart button.

Weak Prompts

A nice website

Settings page

Device Types

| Type | Resolution | Best For | |------|------------|----------| | DESKTOP | 1280×1024 | Full layouts, sidebars, wide tables | | MOBILE | 390×844 | Single column, bottom nav, touch targets | | TABLET | 768×1024 | Hybrid layouts | | AGNOSTIC | Varies | Responsive components |

Model Selection

GEMINI_3_FLASH: 30–60 seconds. Use for iteration.
GEMINI_3_PRO: 1–3 minutes. Use for final designs.

Iteration Workflow

Create a project for your design system
Generate initial screens with FLASH for rapid iteration
Refine prompts based on output
Generate final versions with PRO
Extract code with fetch_screen_code

Maintain Consistency

Reference existing designs in subsequent prompts:

Following the same design system as the dashboard (dark mode, 
Inter font, blue accent #137fec, rounded-lg corners), 
create a user profile page with...

Response Handling

generate_screen_from_text

Returns:

screenId: Generated screen ID
output_components: Feedback or suggestions

If output_components contains suggestions (e.g., "Yes, make them all"), present them to the user. If accepted, call generate_screen_from_text again with the suggestion as the prompt.

Code Structure

Generated HTML includes:

Tailwind CSS via CDN
Custom Tailwind config (colors, fonts)
Responsive classes
Inline SVG icons

Errors

| Error | Cause | Fix | |-------|-------|-----| | HTTP 401 | Expired auth | gcloud auth application-default login | | HTTP 403 | API disabled | gcloud beta services mcp enable stitch.googleapis.com | | Timeout | Slow generation | Wait; check status with get_screen | | Project ID not found | Missing env var | Set GOOGLE_CLOUD_PROJECT |

Examples

Complete Design Flow

# Create project
mcporter call stitch.create_project title="SaaS Dashboard"

# Generate dashboard
mcporter call stitch.generate_screen_from_text \
  projectId="NEW_PROJECT_ID" \
  prompt="A SaaS analytics dashboard: header with logo and user avatar, left sidebar with nav (Dashboard, Analytics, Users, Settings), main area with 4 stat cards (Revenue, Users, Orders, Growth) and a line chart" \
  deviceType="DESKTOP" \
  modelId="GEMINI_3_PRO"

# List screens
mcporter call stitch.list_screens projectId="NEW_PROJECT_ID"

# Download code
mcporter call stitch.fetch_screen_code projectId="NEW_PROJECT_ID" screenId="SCREEN_ID"

Quick Mobile Mockup

mcporter call stitch.generate_screen_from_text \
  projectId="PROJECT_ID" \
  prompt="Mobile login screen: app logo at top, email and password fields, 'Forgot password?' link, primary 'Sign In' button, 'Don't have an account? Sign up' at bottom" \
  deviceType="MOBILE" \
  modelId="GEMINI_3_FLASH"