Google Stitch + MCP Server Changed How I Design UI — Here's My Full Workflow

I'm not a designer. I'm a software engineer who's spent the last three years building enterprise platforms — RAG pipelines, AUTOSAR tooling, FastAPI backends, Angular dashboards. I know how to make things work. Making them look good has always been the bottleneck.

Every project followed the same pattern: build the functionality, then spend days wrestling with CSS, copying Dribbble layouts pixel by pixel, or waiting for a designer to turn my wireframe into something presentable. For internal enterprise tools, that designer handoff often just... never happened.

Then I tried Google Stitch. And the MCP server that connects it to my coding workflow.

Everything changed.

What Is Google Stitch?

Stitch is Google Labs' AI-native design canvas. Not "AI-assisted" — AI-native. The entire interface is built around the idea that you describe what you want in natural language, and the AI generates high-fidelity UI designs.

But calling it "a tool that turns prompts into mockups" undersells it. Here's what makes it different from every other AI design tool I've tried:

1. It's an Infinite Canvas, Not a Chat Window

Most AI design tools give you a chat interface where you type a prompt and get back a static image. Stitch gives you an infinite canvas where you can:

• Generate multiple design variations simultaneously
• Drag in images, text, code snippets, or reference screenshots as context
• Have the AI reason across your entire project history, not just the last message
• Diverge into different directions, then converge on the best one

This mirrors how actual design thinking works. You don't arrive at a great UI through a single prompt. You explore, compare, iterate, and refine.

2. The Design Agent Tracks Your Progress

Stitch has a design agent that maintains awareness of your entire project. When you ask for "a settings page that matches the style of my dashboard," it actually knows what your dashboard looks like. It tracks decisions you've made, understands your design system, and maintains consistency across screens.

There's also an Agent Manager that lets you work on multiple design directions in parallel. Think of it as branching in git, but for design. You can explore a dark mode variant on one branch and a minimal redesign on another, then merge the pieces you like.

3. DESIGN.md — A Design System You Can Version Control

This is the feature that sold me. Stitch uses a markdown file called DESIGN.md — an agent-friendly design system specification. You can:

• Extract a design system from any URL (point it at a site you admire, get the design tokens)
• Export your Stitch project's design rules to DESIGN.md
• Import that file into other tools — including your code editor

This means your design decisions travel with your repository. When I set up a color palette, typography scale, and spacing system in Stitch, those decisions are captured in a markdown file I can commit to git. My Cursor or Claude Code agent can read DESIGN.md and generate code that respects the design system without me manually specifying "use Inter font at 16px with 1.5 line height" every time.

4. Interactive Prototyping — Not Just Static Screens

Stitch converts static designs into interactive prototypes instantly. You "stitch" screens together, click "Play," and you're navigating a functional prototype. The AI can even auto-generate logical next screens based on user interaction patterns — if you design a login page, it'll suggest what the dashboard after login should look like.

5. Voice-Driven Design

You can speak to the canvas. Not just voice-to-text dictation — actual conversational design critiques:

• "Give me three different menu options"
• "Show me this screen in a darker color palette"
• "The spacing feels too tight — add more breathing room"

The AI responds in real-time, making adjustments as you speak. It's like pair-designing with someone who has infinite patience and perfect Figma skills.

The MCP Server: Where Stitch Meets Your Code Editor

This is where it gets powerful for developers. Stitch has an MCP (Model Context Protocol) server that bridges your designs directly into your coding workflow.

What Is MCP?

If you haven't encountered MCP yet — it's an open protocol that lets AI coding agents connect to external tools. Your code editor (Cursor, Claude Code, VS Code with Copilot, Gemini CLI) can call MCP tools to get information or perform actions in external services.

The Stitch MCP server exposes your Stitch designs as tools that any MCP-compatible editor can access.

Setting It Up

Add this to your MCP client config (works with Cursor, Claude Code, VS Code, Gemini CLI, Codex, OpenCode):

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["@_davideast/stitch-mcp", "proxy"]
    }
  }
}

Or run the setup wizard:

npx @_davideast/stitch-mcp init

This handles authentication (Google Cloud OAuth), project configuration, and MCP client registration. One command, done.

What the MCP Server Can Do

Once connected, your AI coding agent has access to these tools:

build_site — Builds a full Astro site from your Stitch project. Maps screens to routes, downloads the HTML/CSS for each page, and generates a deployable project structure.

npx @_davideast/stitch-mcp site -p <project-id>

get_screen_code — Retrieves the HTML/CSS code for any specific screen in your project.

get_screen_image — Downloads a screenshot of any screen as base64. Perfect for passing to vision-capable models for code generation.

Preview locally — Serve all your project screens on a local Vite dev server:

npx @_davideast/stitch-mcp serve -p <project-id>

Browse designs in terminal — Navigate projects and screens interactively:

npx @_davideast/stitch-mcp view --projects

The Workflow That Changed Everything

Here's my actual workflow now:

1. Design in Stitch — Describe what I need: "A dashboard for monitoring CI/CD pipeline health. Dark theme. Show build success rate, average build time, and a list of recent failures with expandable error logs."

2. Iterate with voice — "Make the success rate card green when above 95%, yellow between 80-95%, red below 80%." Stitch updates in real-time.

3. Export design system — Generate DESIGN.md from the project. Commit it to my repo.

4. Build from code editor — In Cursor or Claude Code, I ask: "Build this dashboard using React and Tailwind. Follow the design system in DESIGN.md. Use the Stitch MCP to get the screen designs."

5. The agent calls Stitch — Through MCP, the coding agent fetches the actual HTML/CSS from Stitch, reads my design system, and generates production-ready React components that match the design.

The result? A fully functional dashboard that looks like a designer built it, but I never left my terminal after step 3.

Real Examples From My Work

Enterprise Analytics Dashboard

Before Stitch: I built a pipeline monitoring dashboard with Angular + Tailwind. Spent 3 days on layout, got feedback that it "looks like a developer built it" (not a compliment). Ended up using a pre-built admin template and spending another day customizing it.

With Stitch: Described the dashboard in natural language. Generated 4 variations in 10 minutes. Picked the best one, iterated on colors and spacing with voice commands. Exported to code through MCP. Total design time: 45 minutes. And the feedback this time? "This looks really clean."

Onboarding Wizard

I needed a 4-step onboarding flow for an internal estimation platform. Each step had different form layouts, validation states, and progress indicators.

In Stitch, I described the full flow: "A 4-step wizard. Step 1: project selection with search. Step 2: team member assignment with drag-and-drop. Step 3: effort estimation with sliders. Step 4: review and submit."

Stitch generated all 4 screens with consistent styling, connected them into an interactive prototype, and the AI auto-suggested loading states and error states I hadn't thought of. The DESIGN.md export meant my Angular components matched the design exactly.

Landing Page for Open-Source Project

For my ragpipe project, I needed a landing page. In Stitch:

"A modern developer-focused landing page for a Python RAG framework called ragpipe. Dark theme. Show a code snippet hero, feature grid with icons, architecture diagram placeholder, and a GitHub stars badge. Inspired by the Tailwind CSS homepage."

Three variations in under a minute. I picked one, adjusted the code snippet content, and built the site with npx @_davideast/stitch-mcp site.

Why This Matters for Developers

The "Designer-Developer" Gap Is Closing

Stitch doesn't replace designers — it gives developers design literacy. I can now:

• Generate professional UI concepts in minutes, not hours
• Iterate on design feedback without touching Figma
• Maintain a version-controlled design system alongside my code
• Hand off actual design artifacts when I do work with a designer

MCP Is the Glue

The MCP server is what elevates Stitch from "cool demo" to "daily workflow tool." Without it, you're screenshot-and-describe. With it, your AI coding agent has direct access to your designs — code, images, and metadata.

DESIGN.md Is Underrated

The idea of a machine-readable design system file that lives in your repo is genuinely powerful. It means:

• Every coding agent that reads your repo respects your design decisions
• Design consistency across features without manual style guides
• Version-controlled design changes alongside code changes

Getting Started

Prerequisites

• A Google Cloud project (free tier works)
• Node.js 18+
• An MCP-compatible editor (Cursor, Claude Code, VS Code, Gemini CLI)

Quick Setup

# One-command setup (handles auth, config, everything)
npx @_davideast/stitch-mcp init

# Preview your designs locally
npx @_davideast/stitch-mcp serve -p <project-id>

# Build a deployable site from designs
npx @_davideast/stitch-mcp site -p <project-id>

# Browse projects in terminal
npx @_davideast/stitch-mcp view --projects

MCP Config for Your Editor

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["@_davideast/stitch-mcp", "proxy"]
    }
  }
}

Add this to:

• Cursor: .cursor/mcp.json
• Claude Code: ~/.claude/settings.json under mcpServers
• VS Code: .vscode/settings.json
• Gemini CLI: ~/.gemini/settings.json

The Shift in Mindset

The biggest change wasn't the tool — it was realizing that UI/UX design doesn't have to be a separate phase with a separate tool and a separate person. Stitch + MCP makes design a continuous part of the development process.

I describe what I need. The AI designs it. I refine with voice. The MCP server feeds it to my coding agent. The coding agent builds it. And the DESIGN.md file ensures everything stays consistent.

From idea to deployed UI in under an hour. No Figma. No design handoff meetings. No "the developer didn't match the mockup" conversations.

For a backend engineer who's been fighting CSS for a decade, that's not just a productivity improvement. It's a fundamental shift in what I can build alone.

I've been using Stitch for about three weeks now, alongside the MCP server in my daily Cursor and Claude Code workflows. The design quality of everything I ship has noticeably improved, and the time I spend on UI has dropped by roughly 70%. If you're a developer who's ever stared at a blank CSS file wondering where to start, give it a try.