By using this site, you agree to the Privacy Policy and Terms of Use.
Accept

GadgetBond

  • Latest
  • How-to
  • Tech
    • AI
    • Amazon
    • Apple
    • CES
    • Computing
    • Creators
    • Google
    • Meta
    • Microsoft
    • Mobile
    • Samsung
    • Security
    • Xbox
  • Transportation
    • Audi
    • BMW
    • Cadillac
    • E-Bike
    • Ferrari
    • Ford
    • Honda Prelude
    • Lamborghini
    • McLaren W1
    • Mercedes
    • Porsche
    • Rivian
    • Tesla
  • Culture
    • Apple TV
    • Disney
    • Gaming
    • Hulu
    • Marvel
    • HBO Max
    • Netflix
    • Paramount
    • SHOWTIME
    • Star Wars
    • Streaming
Add GadgetBond as a preferred source to see more of our stories on Google.
Font ResizerAa
GadgetBondGadgetBond
  • Latest
  • Tech
  • AI
  • Deals
  • How-to
  • Apps
  • Mobile
  • Gaming
  • Streaming
  • Transportation
Search
  • Latest
  • Deals
  • How-to
  • Tech
    • Amazon
    • Apple
    • CES
    • Computing
    • Creators
    • Google
    • Meta
    • Microsoft
    • Mobile
    • Samsung
    • Security
    • Xbox
  • AI
    • Anthropic
    • ChatGPT
    • ChatGPT Atlas
    • Gemini AI (formerly Bard)
    • Google DeepMind
    • Grok AI
    • Meta AI
    • Microsoft Copilot
    • OpenAI
    • Perplexity
    • xAI
  • Transportation
    • Audi
    • BMW
    • Cadillac
    • E-Bike
    • Ferrari
    • Ford
    • Honda Prelude
    • Lamborghini
    • McLaren W1
    • Mercedes
    • Porsche
    • Rivian
    • Tesla
  • Culture
    • Apple TV
    • Disney
    • Gaming
    • Hulu
    • Marvel
    • HBO Max
    • Netflix
    • Paramount
    • SHOWTIME
    • Star Wars
    • Streaming
Follow US
AIGoogleGoogle I/OProductivityTech

Google’s new AI tool generates full UI designs and frontend code

Google unveils Stitch, an AI experiment that morphs rough wireframes and screenshots into responsive, theme-ready UIs complete with HTML, CSS, and JavaScript.

By
Shubham Sawarkar
Shubham Sawarkar's avatar
ByShubham Sawarkar
Editor-in-Chief
I’m a tech enthusiast who loves exploring gadgets, trends, and innovations. With certifications in CISCO Routing & Switching and Windows Server Administration, I bring a sharp...
Follow:
- Editor-in-Chief
May 21, 2025, 7:10 AM EDT
Share
Google Stitch AI UI design tool
Image: Google
SHARE

When you’re sketching out an app idea on the back of a napkin, there’s a long road between that napkin and a working interface. Designers painstakingly craft pixel-perfect mock-ups in Figma or Sketch, then hand them off to developers who translate those visuals into HTML, CSS, and JavaScript. It’s a workflow riddled with busywork: exporting assets, slicing images, chasing down hex codes, wrestling with responsive layouts, and squinting at spec sheets. Google’s new Labs experiment, Stitch, aims to collapse all that friction into a single generative AI-powered leap—from rough prompt or sketch to production-ready front-end code in mere minutes.

Stitch emerged from a simple insight: what if a single tool could serve both designers and developers, leveraging the same AI brain? Behind the experiment is Gemini 2.5 Pro, Google’s latest multimodal powerhouse tuned for both language and visual tasks. By feeding it plain-English instructions (“Build a gallery app with a dark theme and card layouts”) or uploading a wireframe sketch, you get back a fully fleshed-out interface complete with style guide, interactive components, and exportable code. No more exporting PNGs and manually writing boilerplate—you’re handed a working UI ready to drop into your project.

At its core, Stitch provides two entry points:

  1. Natural language prompts: Simply describe the application you envision—specify color palettes, layout preferences, user interactions, even accessibility considerations. The AI interprets your description and generates a mock-up that reflects your vision.
  2. Image inputs: Got a rough sketch on a whiteboard? A screenshot of an existing app you like? Stitch ingests wireframes or photos of hand-drawn layouts and transforms them into polished digital designs.

Both modes exploit Gemini 2.5 Pro’s multimodal strengths, seamlessly bridging text and vision. The result is a live preview you can iterate on instantly—no more context-switching between design and code.

Design is rarely a one-and-done exercise. Recognizing that, Stitch lets you spin out multiple variants of any interface with a single click. Want to explore different button shapes, typography scales, or grid structures? Generate a handful of options side by side, compare them, and pick the winner. This variant feature dramatically accelerates experimentation, shining a light on possibilities you might never have considered if you were hand-coding each tweak.

Once you’re happy with a design, Stitch gives you two natural pathways forward:

  • Paste to Figma: The generated UI can be injected directly into your Figma project, complete with editable layers, component organization, and style tokens. Designers can then refine spacing, swap fonts, or integrate with existing design systems.
  • Export front-end code: Alternatively, grab the HTML, CSS, and JavaScript that Stitch produces. It’s structured, modular, and ready to be integrated into your codebase—no glue code required.

This dual export strategy acknowledges that many teams already have established workflows in Figma, while others prefer to jump straight into code. By supporting both, Stitch positions itself as a connective tissue rather than a replacement for familiar tools.

It’s no accident that Google chose to highlight Figma integration. Figma has become the de facto hub for collaborative design, and earlier this month, the company introduced Make UI, a tool to generate basic interfaces. Stitch, however, goes further by coupling design generation with production-grade code. For teams evaluating whether to stay in the Google ecosystem or lean on Figma, Stitch offers a powerful incentive: skip the hand-off entirely and have your interface live-coded the moment you hit “Generate.”

Gemini 2.5 Pro, the model powering Stitch, represents Google’s latest push in developer-focused AI. It not only interprets complex visual layouts but also understands front-end frameworks, CSS conventions, and responsive design patterns. Earlier this I/O, Google showcased how Gemini 2.5 Pro can translate video walkthroughs into code snippets and enhance Code Assist in IDEs. Stitch is the first public experiment to marry those capabilities with pure UI generation—an ambitious testbed for what multimodal AI can do in a real-world design-dev pipeline.

Stitch is in experimental form on Google Labs, free to try for anyone curious enough to join the waitlist. It currently supports English prompts, with additional languages on the roadmap. As an experiment, it’s unlikely to replace seasoned UX teams overnight, but it will appeal to:

  • Solo developers building MVPs who need quick, polished interfaces without hiring a designer
  • Product teams looking to prototype dozens of variations in hours rather than days
  • Design-dev hybrids seeking a more integrated workflow that minimizes context-switching

Over time, expect Google to expand Stitch’s language support, tighten Figma integration (perhaps real-time collaboration in Google AI Studio), and increase output fidelity for complex patterns like animations or stateful components.

Stitch is more than just a novelty; it’s a tangible peek at where AI could take software development. By collapsing the gap between idea and implementation, tools like this could usher in an era where designers and developers speak the same AI-native language. Whether that future belongs to Google, Figma, or another innovator remains to be seen—but for now, Stitch is a compelling argument for a world where a simple prompt can spark a fully functional UI in moments.


Discover more from GadgetBond

Subscribe to get the latest posts sent to your email.

Most Popular

Gemini 3.1 Flash TTS is Google’s new powerhouse text-to-speech model

Google app for desktop rolls out globally on Windows

Google debuts Gemini app for Mac with instant shortcut access

Claude Opus 4.7 is Anthropic’s new powerhouse for serious software work

Google Chrome’s new Skills feature makes AI workflows one tap away

Also Read
Amazon Fire TV Stick HD (2026 model) with Alexa voice remote featuring streaming shortcut buttons, shown on a clean surface.

New Fire TV Stick HD: slim design, faster streaming

Two women preparing food in the kitchen with Alexa on their Amazon Echo Show on the counter

Amazon’s Alexa+ launches in Italy with an authentically Italian personality

Split promotional banner showing a man’s face beside a dark hand silhouette for Apple TV “Your Friends & Neighbors,” and a woman in pink pajamas with a close-up of a man for Peacock’s “The Miniature Wife,” separated by a plus sign indicating bundled streaming content.

New Prime Video bundle pairs Apple TV and Peacock Premium Plus for $19.99

Claude design system interface showing an interactive 3D globe visualization with customizable settings. The left side displays a dark-themed globe with North America in focus, overlaid with cyan-colored connecting arcs between major North American cities including Reykjavik, Vancouver, Seattle, Portland, San Francisco, Los Angeles, Toronto, Montreal, Chicago, New York, Nashville, Atlanta, Austin, New Orleans, and Miami. The top of the interface includes navigation tabs for 'Stories' and 'Explore', along with 'Tweaks' toggle (enabled), and action buttons for 'Comment' and 'Edit'. On the right side is a dark control panel with three sections: Theme (Dark mode selected, with Light option available), Breakpoint (Desktop selected, with Tablet and Mobile options), and Network settings including adjustable sliders for Arc color (bright cyan), Arc width (0.6), Arc glow (13), Arc density (100%), City size (1.0), and Pulse speed (3.4s), plus checkboxes for 'Show arcs', 'Show cities', and 'City labels'.

Anthropic Labs unveils Claude Design

OpenAI Codex app logo featuring a stylized terminal symbol inside a cloud icon on a blue and purple gradient background, with the word “Codex” displayed below.

Codex desktop app now handles nearly your whole stack

A graphic design featuring the text “GPT Rosalind” in bold black letters on a light green background. Behind the text are overlapping translucent green rectangles. In the bottom left corner, part of a chemical structure diagram is visible with labels such as “CH₃,” “CH₂,” “H,” “N,” and the Roman numeral “II.” The right side of the background shows a blurred turquoise and green abstract pattern, evoking a scientific or natural theme.

OpenAI launches GPT-Rosalind to accelerate biopharma research

Perplexity interface showing a model selection menu with options for advanced AI models. The default choice, “Claude Opus 4.7 Thinking,” is highlighted as a powerful model for complex tasks. Other options include “GPT-5.4 New” for complex tasks and “Claude Sonnet 4.6” for everyday tasks using fewer credits. A toggle for “Thinking” is switched on, and a tooltip on the right reads “Computer powered by Claude 4.7 Opus.”

Perplexity Max users now get Claude Opus 4.7 in Computer by default

Illustration of a speech bubble with code brackets inside, framed by curly braces on an orange background, representing coding conversations or AI-assisted programming.

Anthropic’s revamped Claude Code desktop app is all about parallel coding workflows

Company Info
  • Homepage
  • Support my work
  • Latest stories
  • Company updates
  • GDB Recommends
  • Daily newsletters
  • About us
  • Contact us
  • Write for us
  • Editorial guidelines
Legal
  • Privacy Policy
  • Cookies Policy
  • Terms & Conditions
  • DMCA
  • Disclaimer
  • Accessibility Policy
  • Security Policy
  • Do Not Sell or Share My Personal Information
Socials
Follow US

Disclosure: We love the products we feature and hope you’ll love them too. If you purchase through a link on our site, we may receive compensation at no additional cost to you. Read our ethics statement. Please note that pricing and availability are subject to change.

Copyright © 2026 GadgetBond. All Rights Reserved. Use of this site constitutes acceptance of our Terms of Use and Privacy Policy | Do Not Sell/Share My Personal Information.