Stitch + Antigravity: The Free Design-to-Code Workflow Nobody Is Talking About

Stitch + Antigravity: The Free Design-to-Code Workflow Nobody Is Talking About

I've always had the same frustration with the design-to-code process.

You design something in Figma. It looks great. Then you hand it off — or in solo projects, you switch hats — and start building. And within about twenty minutes, the code has already drifted from the design. The font weight is slightly off. The spacing isn't matching. You're not looking at the design anymore, you're guessing from memory. By the time you're done, it barely resembles what you originally had in mind.

Every team I've seen has this problem, and the standard fix is "better communication" or "tighter handoff documentation." Neither actually works.

So when I saw Google's official codelab walking through a workflow where Stitch designs feed directly into Antigravity as agent context — not as a screenshot you paste in, but as structured design metadata the agent actually reads — I wanted to understand what was really happening there.

I went through the full workflow. This is what I found.

What Stitch Actually Is

A lot of people I've talked to either haven't heard of Stitch or think it's just another AI mockup tool. It's more interesting than that.

Stitch is a Google Labs experiment that Google describes as an AI-native software design canvas. You describe what you want in natural language and it generates high-fidelity UI — not wireframes, not rough sketches, but something that already looks close to a real application. It has an infinite canvas, a design agent you can give feedback to, and voice critiques.

But the part that matters for this workflow is DESIGN.md.

DESIGN.md is a format Google introduced with Stitch that captures your design rules — color tokens, typography, spacing, component structure — in a structured, agent-readable file. It's essentially a machine-readable version of your design system. And because it's a file, not a locked Figma project, other tools can read it.

That's the piece that makes the rest of this possible.

What Antigravity Actually Is

Antigravity is Google's agentic development environment. The framing is different from Cursor or other AI-enhanced editors — Google positions it as an agent-first environment where the primary unit is a task, not a file edit. The agent can plan work, verify results in the browser, and use external tools through MCP.

It's currently in public preview with no charge and generous rate limits on Gemini 3 Pro. Which, given what it can do, is still a bit surprising.

The combination of task planning, browser verification, and MCP tool access is what makes it a good pairing with Stitch. The agent isn't just generating code into a file — it can check whether the result actually renders correctly, iterate, and refine.

The Workflow: Design Context Travels With the Code

Here's the actual flow Google documented, and what I went through:

Step 1 — Design in Stitch

You start with a product idea and build it out in Stitch. Give the design agent natural language instructions. Iterate until the UI looks right. This is faster than Figma for early-stage work because you're not fighting with components and constraints — you're just describing what you want and refining the output.

Step 2 — Export DESIGN.md

Once the design is where you want it, you export a DESIGN.md file from Stitch. This captures the visual system: the color palette, type scale, spacing rules, and layout decisions. It's not a screenshot. It's structured data.

Step 3 — Connect Stitch to Antigravity via MCP

This is the step that makes the whole thing work differently from every other "AI helps you code" workflow.

You install the Stitch MCP server in Antigravity and give it your Stitch API key. Now Antigravity has direct access to your Stitch project as a tool. The agent can query the design metadata at any point during the build — not just at the start, but continuously as it generates and refines the code.

# In Antigravity, add the Stitch MCP server
# Settings → MCP Servers → Add server
# Server: Stitch MCP
# API Key: your key from Stitch settings

Step 4 — Build with the agent

Now you give Antigravity a task: build the frontend using the Stitch design as the source of truth. The agent reads the DESIGN.md, queries the Stitch MCP for design context, scaffolds a React and Tailwind app, and verifies it in the browser.

The critical difference from a normal "paste the design screenshot into Claude" workflow: the agent has structured access to your design system, not an image it's trying to interpret. It knows the exact hex values. It knows the spacing scale. It's not guessing.

What I Actually Noticed While Using It

A few things stood out that I didn't expect.

The MCP connection is the real innovation, not the individual tools. Stitch alone is useful but not dramatically different from other AI design tools. Antigravity alone is useful but not dramatically different from other agentic IDEs. The part that changes things is that MCP turns the design from a static reference into a live context layer the agent queries. That's architecturally different from every design-to-code workflow I've used before.

The design drift problem mostly disappears. When the agent is pulling from DESIGN.md and querying Stitch rather than eyeballing a screenshot, the output is much more consistent with the original design. I didn't have to manually correct spacing or color values — the source of truth was available to the agent the whole time.

It's fast for early-stage projects. For a landing page, a dashboard prototype, or a startup MVP, the time from idea to working frontend is significantly compressed. You're not doing the design-to-code translation by hand. The agent does it, and it has the context to do it correctly.

It's not ready to replace production design workflows. For complex component systems, interactive states, and edge cases, the workflow has friction. Stitch's design agent doesn't always get interactions right on the first pass. Antigravity's browser verification helps catch visual issues but isn't foolproof. This is an early-stage tool, and it behaves like one.

Why the Timing Matters

Here's the part that I think is underappreciated: both tools are currently free.

Antigravity is in public preview with no charge and Gemini 3 Pro rate limits that are genuinely generous for learning and prototyping. Stitch is a Google Labs experiment with usage limits, but accessible enough to build real projects with.

This access window won't last indefinitely. Early-stage Google Labs experiments tend to either get folded into paid tiers or shut down. The teams that learn this workflow now — while the cost is zero — are building a skill that will be valuable when the tooling matures and the pricing changes.

I've seen this pattern before with other Google tools. The experimental phase is when the learning is cheapest.

What the Stack Actually Looks Like

The architecture is straightforward:

Stitch (design canvas)
  ↓ exports
DESIGN.md (design system as structured data)
  ↓ feeds into
Stitch MCP Server (running in Antigravity)
  ↓ queried by
Antigravity Agent
  ↓ generates
React + Tailwind frontend
  ↓ verified in
Browser (Antigravity's built-in verification)

Each layer has a clear job. Stitch creates the visual direction. DESIGN.md captures it in a format machines can use. MCP gives the agent persistent access to that context. Antigravity turns it into running code. Browser verification closes the loop.

What makes this stack feel different from the usual AI-assisted coding experience is that the design intent isn't lost at any step. It travels through the entire pipeline.

When to Use This vs. Something Else

This workflow is a strong fit when:

• You're building a new product and want to move from idea to working UI quickly
• You're solo or on a small team without a dedicated design-engineering handoff process
• You want to test whether a design direction is buildable before committing to it
• You're learning how modern AI-assisted product building works

It's not the right fit when:

• You have an existing component library and design system in Figma — migrating to Stitch just to use this workflow isn't worth it yet
• Your frontend requirements involve complex animation, custom interactions, or accessibility constraints that need precise control
• You need production-grade, reviewed code rather than fast prototypes

Final Thoughts

The design-to-code problem has been "almost solved" many times. Every tool claims to close the gap. Most of them just move the translation problem, they don't eliminate it.

What's different about the Stitch and Antigravity combination is the MCP layer. Instead of translating design to code once at handoff and then letting the two drift apart, MCP keeps the design accessible as a live source of truth throughout the build. That's not an incremental improvement on the old workflow — it's a different model of how design and code can relate to each other.

It's early. The tools are experimental. Not everything works smoothly. But the architecture is right, and the cost to try it right now is zero.

That's a rare combination.