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:

bash
mcporter list stitch

If missing, configure it:

bash
# 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

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

Create a Project

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

Generate a Screen

bash
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

bash
mcporter call stitch.list_screens projectId="PROJECT_ID"

Get Screen Details

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

Download Code

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

Returns self-contained HTML with Tailwind CSS.

Download Image

bash
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

1. Create a project for your design system
2. Generate initial screens with FLASH for rapid iteration
3. Refine prompts based on output
4. Generate final versions with PRO
5. 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

bash
# 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

bash
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"