mcpskills.net
← Back to Skills
Design

Google Stitch

AI-powered design tool from Google Labs that generates UI designs from text prompts. Produces HTML, CSS, design tokens, and DESIGN.md files for seamless design-to-code workflows.

by GoogleSource →

Google Stitch is an AI-native software design canvas from Google Labs, powered by Gemini. It generates high-fidelity UI designs from text descriptions, complete with structured outputs designed for AI coding agents.

Key Features

  • Text-to-UI: Describe what you want and Stitch generates whole screens or up to 5 connected screens in a single prompt
  • Multi-screen generation: Create connected screens with consistent design systems
  • Infinite canvas: Work on multiple screens side by side
  • Voice input: Describe designs verbally
  • Interactive prototyping: Test flows directly in the tool
  • Design system imports: Bring in existing brand guidelines

Two Model Modes

  • Standard mode: Faster generation for quick iterations
  • Experimental mode: Slower but noticeably higher quality output

Free Tier

  • 350 Standard generations per month
  • 200 Experimental generations per month

Structured Output

Stitch produces machine-readable outputs alongside visual designs:

  • HTML with embedded CSS
  • Design tokens as structured data
  • DESIGN.md file capturing the entire design system (colors, typography, spacing, component patterns)

MCP Integration

The Stitch MCP server (@_davideast/stitch-mcp) connects AI coding agents directly to Stitch:

  • List projects and available screens
  • Fetch design HTML for individual screens
  • Download screen screenshots as base64 images
  • Assemble a full site from multiple screens (build_site)

Usage with Claude Code

# Install the MCP server
npm install -g @_davideast/stitch-mcp

Claude Code can then pull design data and translate it directly into code without manual export.

DESIGN.md Export

Stitch exports a DESIGN.md file that gives coding agents a persistent, structured understanding of the design system. This file can be dropped into Claude Code, Cursor, or any AI coding agent that reads context files.

Workflow

  1. Design: Describe your UI in Stitch (text or voice)
  2. Iterate: Refine on the infinite canvas with multiple screens
  3. Export: Get DESIGN.md + HTML/CSS outputs
  4. Code: Feed outputs to your AI coding agent via MCP or manual copy
  5. Ship: Agent generates production code matching your design

Links