TechLogStack

Posted on May 22 • Originally published at techlogstack.com on May 21

Google Built a Free Design Tool That Generates Production Code From a Sentence — Then Added Multiplayer

#techlogstack #google #generativeai #frontend

Google · Performance · 21 May 2026

At Google I/O 2025, Sundar Pichai demoed a tool that turned a plain English description into a complete mobile UI in under 30 seconds. Figma charges $15 per editor per month for collaborative design. Google Stitch does it free. A year later, Google added real-time multiplayer, a streaming design agent, and voice input. The design industry noticed.

Launched I/O May 20 2025
Galileo AI acquisition → Stitch rebrand
Gemini 2.5 Pro multimodal core
Figma export + React/HTML code output
Multiplayer added I/O May 20 2026
350 free generations/month

The Story

On May 20, 2025, Sundar Pichai stood on stage at Google I/O and ran a live demo that made designers and developers simultaneously uncomfortable. He typed a one-sentence description of a mobile app. In under 30 seconds, Google Stitch rendered a complete, multi-component mobile UI with matching color palette, navigation structure, and typography. One button click exported it as React code ready to paste into a development environment. Another exported it as a Figma file with editable layers and auto-layout. The audience applauded. Figma's product team took notes. The tool was free.

Google Stitch did not emerge from Google's internal R&D labs. It began with the early-2025 acquisition of Galileo AI — a startup that had built one of the first credible text-to-UI generators, capable of interpreting product descriptions and producing coherent interface layouts. Google acquired Galileo, rebranded the technology as Stitch, integrated it with the Gemini 2.5 Pro (Google's most capable multimodal model at the time of Stitch's launch — able to process text, images, audio, and video simultaneously and generate structured outputs across all of them) model family, and launched it as a Google Labs experiment at I/O 2025. The deliberate Labs framing was a signal: Google was testing the market before committing to a full product. The response was immediate. Over 1 million waitlist signups appeared overnight after the live demo.

WHAT 'VIBE DESIGN' ACTUALLY MEANS

Stitch entered the vocabulary alongside 'vibe coding' — the practice of describing software intent to an AI and refining the output iteratively rather than building from first principles. Vibe design applies the same model to interface creation: describe a screen, watch it appear, ask for changes conversationally. The skill shifts from pixel manipulation to intent specification. A founder who cannot use Figma can now produce a working prototype in minutes. A product manager can test five layout variations in the time it would previously have taken to brief a designer on one.

The evolution from launch to I/O 2026 followed a clear product trajectory, compressed by user feedback and Google's resources. The May 2025 version was single-screen only — one prompt, one screen, export. By July 2025, theme customization and Figma export were added based on beta user feedback showing that designers needed design-system integration, not just raw screens. December 2025 brought the Prototypes feature alongside Gemini 3 integration — for the first time, multiple related screens could be linked into interactive flows. March 19, 2026 was Stitch 2.0 : infinite canvas, multi-screen generation, voice input, app-flow generation, and 5-screen simultaneous canvas rendering. Ten months of user feedback had transformed a demo into a workspace.

Problem

Design-to-Dev Handoff: The Productivity Black Hole

The traditional design-to-development pipeline required designers to build components in Figma, annotate specifications manually, and hand off to developers who re-implemented everything in code. Even with design tokens and component libraries, the gap between 'designed' and 'built' consumed weeks of coordination. For small teams and solo founders, this gap was existential: they lacked either the design skill or the engineering skill to complete the loop alone.

Cause

Multimodal Models Reached UI-Generation Quality

By early 2025, Gemini's multimodal capabilities had reached a threshold where they could reliably interpret both text descriptions of interfaces and uploaded images of existing UIs, and generate coherent layouts with appropriate component choices, spacing, and visual hierarchy. The Galileo AI acquisition gave Google a product layer that had already worked out the prompt engineering, training data, and output format questions on top of this capability.

Solution

Stitch: Gemini-Powered UI Generator With Production-Grade Exports

Stitch accepted three input types simultaneously: natural language descriptions, uploaded reference images or screenshots, and annotated screenshots with modification notes. Gemini 2.5 Pro processed all three modalities together to produce screen designs. Export paths were designed for real developer workflows: Figma files with editable layers and auto-layout, production-ready HTML/CSS, React components, and Vue code.

Result

I/O 2026: Streaming Agent + Multiplayer — Free

At I/O 2026 on May 20, 2026, Google launched a streaming design agent that renders UI components onto the canvas in real time as a designer types or speaks — before generation completes, mid-generation course correction is possible. Simultaneous multi-user editing was also added, directly matching Figma's flagship collaboration feature. Both are free. Figma's professional plan charges $15 per editor per month.

🎨

Google Stitch accepts three types of input simultaneously : plain language prompts ('a healthcare app onboarding screen for elderly users'), uploaded images or screenshots ('match this visual style'), and annotated screenshots with modification notes ('make this header bigger and change the blue to green'). Gemini 2.5 Pro processes all three modalities in a single context window, producing a UI design that reflects all constraints at once.

ℹ️

The Figma Bridge: Complement, Not Replace

When the original Stitch tool was unveiled at I/O 2025, Sarah Drasner, Director of Engineering at Google, was explicit: the Figma export function was designed to complement rather than replace existing design workflows. Stitch generates a starting point; Figma is where professional designers refine, apply design systems, and collaborate with stakeholders. The paste-to-Figma function exports fully editable layers with auto-layout intact, giving designers a high-fidelity starting point that respects their existing tooling. This positioning is why Stitch attracted both vibe designers (who need no Figma) and professional designers (who use both).

⚠️

The Free Tier's Real Constraints

Google Stitch is free, but not unlimited. The standard free tier provides 350 standard generations + 50 experimental generations per month. For solo founders and students, this is ample. For teams using Stitch for daily rapid prototyping, 350 generations can deplete mid-month. The $20/month Pro tier provides unlimited access. Critically, the March 2026 Stitch 2.0 update — which introduced multi-screen generation and infinite canvas — still required separate generation credit per screen, meaning a 5-screen app prototype consumed 5 credits rather than 1. Users building complex flows discovered this quickly.

The I/O 2026 streaming agent represents the most technically ambitious evolution of Stitch's architecture. Previous versions followed a turn-based model : submit a prompt, wait for generation to complete, review the finished result, submit a revision. The streaming model replaces this with a continuous render: as a designer types or speaks, the agent renders UI components directly onto the canvas in real time, reflowing layouts before generation finishes. The practical difference is the ability to steer mid-generation — if a layout is heading in the wrong direction, a designer can interrupt before it finishes and redirect. Voice input, integrated since March 2026, works within this streaming loop: speech is parsed in real time, and the canvas responds while the designer is still talking.

🔌

Three Export Paths for Three Audiences

Stitch's export architecture targets three distinct audiences. Figma export (editable layers + auto-layout) for designers who refine in their primary tool. Production code export (HTML/CSS, React, Vue, Tailwind) for developers who need deployable components. AI Studio integration for developers who want to wire backend logic to the UI without leaving the Stitch workflow. Power users chain all three: Figma for design review, code export for development handoff, AI Studio for full-stack experimentation.

ℹ️

The Internal Google Labs Strategy

Launching Stitch as a Google Labs experiment rather than a full Google product was a deliberate risk-management decision. Labs experiments carry lower accountability expectations — they can be deprecated without the product embarrassment of killing a flagship tool. They also attract the early-adopter, feedback-rich user base that a new AI product needs: developers, designers, and founders who are comfortable with rough edges in exchange for early access. The Labs label signaled 'come help us build this' rather than 'this is production-ready,' which attracted exactly the right population. By March 2026, 10 months of Labs usage had turned enough of those experiments into validated product decisions to justify the Stitch 2.0 announcement.

THE VIT CONNECTION IN GOOGLE TRENDS

The same Google Trends report that showed Stitch trending also showed VIT Counselling at +120% — referring to Vellore Institute of Technology admissions season in India. This demographic overlap is instructive: the Indian engineering student population (VIT, IIT, NIT applicants) represents a massive early-adopter cohort for tools like Stitch. Students who cannot afford Figma's professional pricing ($15/seat) but need to prototype apps for hackathons, capstone projects, and startup pitches are an ideal-fit audience for a free AI-native design tool. Stitch's zero-cost model and browser-based access (no installation, no hardware requirements) make it accessible to exactly this demographic.

The Fix

The Technical Architecture: Gemini as the UI Design Engine

Google Stitch's core is not a purpose-built design model — it is Gemini 2.5 Pro (Google's multimodal frontier model capable of processing text, images, audio, and code simultaneously — trained on a corpus that includes UI design patterns, code, natural language, and visual references) with a specialized prompt engineering and output parsing layer on top. This architectural choice explains both Stitch's strengths and its limitations. Stitch understands design concepts like 'glassmorphism', 'neumorphic', 'material design', and 'iOS Human Interface Guidelines' because Gemini was trained on documentation and examples of all of them. It can interpret a hand-drawn sketch and understand design intent because Gemini's vision capability has seen thousands of wireframes. And it generates production-quality React code because Gemini understands React at a level that exceeds most specialized code generation models.

30s — Time from plain English description to complete mobile UI including navigation, components, and color palette — as demonstrated live by Sundar Pichai at Google I/O 2025
3 inputs — Simultaneous input types: text prompts, uploaded reference images, and annotated screenshots — all processed in a single Gemini 2.5 Pro context window
5-screen — Simultaneous canvas rendering introduced in Stitch 2.0 (March 2026) — generate an entire app flow across 5 connected screens in a single generation
$0 vs $15 — Google Stitch multiplayer vs Figma professional plan per editor per month — the pricing asymmetry that defines Stitch's competitive positioning

// Conceptual: How Stitch's streaming agent differs from the original turn-based model
// The I/O 2026 streaming upgrade is an architectural change, not just a speed improvement

// BEFORE (turn-based): submit → wait → review → resubmit
async function generateUI_old(prompt) {
  const result = await stitch.generate(prompt); // blocking — wait for complete output
  // Designer sees nothing until fully done
  // If it's wrong: submit an entirely new prompt from scratch
  return result.screens; // [{ html, css, figmaLayers }]
}

// AFTER (streaming agent): real-time render + mid-generation steering
async function generateUI_streaming(prompt) {
  const stream = stitch.generateStream(prompt);

  // Components render onto canvas as they are generated
  stream.on('component', (component) => {
    canvas.renderPartial(component); // visible immediately
  });

  // Designer can interrupt and redirect before generation finishes
  stream.on('layoutDecision', (decision) => {
    const userFeedback = canvas.checkInterrupt();
    if (userFeedback) {
      // Mid-generation course correction — no waiting, no re-prompting from scratch
      stream.steer(userFeedback);
    }
  });

  // Voice input works inline with the stream:
  // "make the header larger" spoken mid-generation → reflected in remaining components
  voiceInput.on('command', (cmd) => stream.steer(cmd));

  await stream.complete();
  return canvas.getCurrentState(); // final assembled result
}

THE GALILEO ACQUISITION RATIONALE

Google could have built Stitch from scratch using its existing Gemini capabilities. It chose instead to acquire Galileo AI and use their product as the foundation. The rationale is clear in retrospect: Galileo had already solved the hardest non-model problems — the prompt engineering approach that reliably produces coherent UIs, the output parser that converts model outputs into valid design tokens and component trees, the training data pipeline for UI-specific examples, and the user experience model for iterative refinement. Rebuilding these would have taken months. The acquisition compresses that to days. Galileo's technology became the product layer; Gemini became the intelligence underneath it.

ℹ️

RLHF for UI Quality: Training With Design Feedback

Stitch's code export quality reached 95% accuracy (as measured by component rendering fidelity) in the March 2025 closed beta, up from earlier estimates of around 70%. The improvement was driven by RLHF — Reinforcement Learning from Human Feedback — applied specifically to UI generation quality. The beta involved 500+ partner users including Vercel developers, who provided direct feedback on generated code quality and design accuracy. This domain-specific RLHF signal tuned Gemini's output for the specific quality criteria that professional designers and developers cared about: component naming, layout accuracy, code cleanliness, and design system compatibility.

Google Stitch Evolution: Feature Timeline from Launch to I/O 2026

Date	Major Update	Key Feature Added
May 20, 2025	Google I/O Launch	Single-screen generation, Figma export, code export (HTML/CSS/React)
Jul–Aug 2025	Public beta	Theme customization, RTL language support, bug fixes
Dec 2025	Stitch 2.0 preview	Prototypes (multi-screen flows), Gemini 3 integration
Mar 19, 2026	Stitch 2.0 GA	Infinite canvas, 5-screen canvas, voice input, app-flow generation
May 20, 2026	I/O 2026 update	Streaming agent (real-time canvas render), multiplayer editing — both free

✅

The Complete Design-to-Production Pipeline

Power users combine all three export paths sequentially to achieve a full design-to-production workflow without opening additional tools: generate in Stitch (AI-driven rapid exploration), paste to Figma for team review and design system application, export code (React/HTML) for developer handoff, push to AI Studio for backend integration. A workflow that previously took weeks of designer-developer coordination can now be completed by a solo founder in hours. The step-change in productivity has been most pronounced for indie developers and small startup teams.

🎙️

Voice-First Design: The March 2026 Input Upgrade

The voice input feature added in March 2026 was more than a convenience — it signaled a shift in the interaction model for AI design tools. Text prompts require switching mental context from 'I'm designing' to 'I'm writing instructions.' Voice input keeps the designer in continuous creative flow : say 'give me three different menu styles' while looking at the canvas, watch three variants appear, point and say 'more of that one, but with rounded corners.' The integration of voice into the streaming agent at I/O 2026 completed this loop: voice commands steer the generation in real time, not as post-hoc revision instructions.

Architecture

Stitch's internal architecture has three distinct layers. The input layer processes multimodal inputs through Gemini 2.5 Pro — text prompts, reference images, and annotated screenshots are all converted into a unified context window that Gemini reasons across simultaneously. The generation layer produces structured design outputs — not raw HTML, but an intermediate representation of design tokens, component hierarchies, and layout constraints that the export layer then converts into format-specific outputs. The export layer translates the intermediate representation into Figma-compatible JSON (with proper component structure and auto-layout), production-grade React/HTML/CSS, and AI Studio integration configs.

Before Stitch: The Traditional Design-to-Development Pipeline

View interactive diagram on TechLogStack →

Interactive diagram available on TechLogStack (link above).

Google Stitch Architecture: Multimodal Input to Production Output