stitch

name	stitch
description	Generate UI designs and frontend code with Google Stitch via MCP. Use when asked to create screens, mockups, UI designs, or generate frontend code from text descriptions. Supports desktop, mobile, and tablet layouts.
compatibility	Requires mcporter CLI and stitch-mcp configured (npx -y stitch-mcp)
metadata	{"homepage":"https://stitch.googleapis.com","author":"Google"}

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

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

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