Google Stitch × Antigravity — A Design-First AI Development Workflow

Bridging Design and Code with AI

Google Stitch is an AI-powered UI design tool that generates pixel-perfect designs from natural language descriptions. Antigravity is an AI agent-driven development platform. Together, they create a "design-first" workflow where AI handles everything from design to code to deployment.

Setting Up the Stitch MCP Server

To use Stitch within Antigravity, add it as an MCP server. The setup takes just three steps.

Step 1: Open the MCP Configuration File

# Navigate to Antigravity's config directory
cd ~/.antigravity/
# Edit the MCP configuration
nano mcp-servers.json

Step 2: Add the Stitch Server

{
  "servers": {
    "stitch": {
      "command": "npx",
      "args": ["@google/stitch-mcp-server"],
      "env": {
        "GOOGLE_API_KEY": "your-api-key"
      }
    }
  }
}

Step 3: Restart Antigravity

Save the config and restart Antigravity. Your agents will now have access to Stitch's design capabilities.

The Workflow in Practice

Design → Code → Deploy

1. Generate designs in Stitch: Describe what you want — "Dashboard UI, dark theme, sidebar navigation"
2. Antigravity agents convert to code: The agent implements Stitch's design as React components
3. Test & deploy: The agent runs automated tests and deploys to Cloudflare Workers or Vercel

Applying to Existing Projects

You can also integrate Stitch designs into existing codebases.

@antigravity Redesign the settings page of this project using Stitch
and convert it to React components. Match the existing Tailwind classes
and design system.

The Antigravity agent analyzes your existing codebase and integrates the Stitch design while maintaining consistency with your design system.

Why Stitch × Antigravity Works

Smoother Designer-Developer Collaboration

Designers create mockups in Stitch, and Antigravity agents turn them into production code — preserving the design intent. This minimizes the gap between what was designed and what gets built.

Faster Iteration Cycles

The design-change-to-code-update cycle can be completed in minutes. Compared to the traditional Figma-to-manual-coding flow, this represents a massive time savings.

Things to Keep in Mind

• The Stitch MCP server is still in beta, so some UI patterns may not produce expected results
• A Google API Key is required (available from AI Studio)
• Complex animations and interactions may still need manual agent-guided adjustments

Inserting Figma in the Middle — Stitch to Prototype, Figma to Finalize, Antigravity to Build

Stitch is fast, but what it hands you is a look, not a spec. If the screen is a one-off you'll throw away, pass it straight to Antigravity. Once the screen count grows and you want to hold a design system together, though, slipping Figma between Stitch and Antigravity makes later changes far less painful.

The handoff starts with a small design note. Write the palette, typography, and spacing values you settled on in Stitch into a short Markdown file.

# Design Metadata
## Color Palette
- Primary: #3A86FF
- Background: #FFFFFF
- Text: #1A1A1A
## Typography
- Heading: Inter Bold, 32px
- Body: Inter Regular, 16px / line-height 1.6
## Spacing
- Base unit: 4px (4 / 8 / 12 / 16 / 24 / 32)

Transcribe those values into Figma Variables, and Stitch's abstract visual turns into explicit tokens. That conversion is the whole point of bringing Figma in.

Antigravity reads Figma's Dev Mode directly. A measurement annotated in Dev Mode — say "left margin: 16px" — lands as margin-left: 16px; a primary-color token becomes a --color-primary CSS variable; and if mobile, tablet, and desktop breakpoints are provided, they're implemented as @media rules. You never retype the numbers by hand.

When you prompt the agent, point it at Dev Mode explicitly:

@antigravity Convert the settings page from this Figma file (Dev Mode enabled) to React.
Map the defined Variables to CSS custom properties, and follow the Dev Mode
measurements for spacing and breakpoints.

Whether to insert Figma comes down to scale. For a throwaway prototype or a single landing page, Stitch straight into Antigravity is plenty. The moment you have a multi-screen product, a team handoff, or light/dark theme switching, that's when I slip Figma in. On my own indie projects I'll code straight from Stitch while it's only a screen or two — but once I want to reuse shared tokens across the Dolice sites, I route through Figma first.

Takeaway

Google Stitch × Antigravity enables a new development style where AI handles the entire pipeline from design to deployment. It's as easy as adding an MCP server. Try it on your next project.