Stitch 2.0: Free AI Front‑End Design Tool for Cloud Code

Stitch 2.0 arrives as a brand‑new, free front‑end design tool from Google, positioned as the starting point for building a website instead of Cloud Code. The update was notable enough to cause Figma’s stock to dip by almost 8 percent, highlighting its impact on the design ecosystem. While Stitch 2.0 does not replace Cloud Code, it complements it by addressing the weak point of front‑end design in AI‑driven coding agents.

Features and Benefits

Powered by Google’s Gemini 3.1 model, Stitch 2.0 lets users create high‑quality mockups for web and mobile applications on a canvas‑like interface. Editing is straightforward: individual components, layouts, or entire designs can be regenerated or adjusted, delivering an 80‑90 % solution that dramatically reduces the labor of pure Cloud Code work. All designs can be exported directly as code, and the service remains completely free.

Workflow: From Inspiration to Stitch

The workflow begins in Stitch’s chatbot interface, where users describe the desired app or website and choose a model—Gemini 3.1 Flash or Pro. Inspiration can be supplied via uploaded screenshots, URLs, or links to design sources such as Dribbble, Godly.website, and Pinterest. By feeding these references into the prompt, Stitch interprets the visual language and generates a corresponding design on its infinite canvas.

Prompting and Design System

A typical prompt might read: “Create a landing page for my AI agency, Chase AI, in the style of the screenshot. I want the exact same hero page setup as seen in the screenshot.” Stitch uses the image (and optionally NanoBanana on the backend) to mimic the layout, then produces an “agent log” of commands and a generated design system—named “Obsidian Ember” in the example. This design system documents colors, typography, button styles, and overall visual strategy, serving as a guiding framework that avoids generic “AI slop.”

Iteration and Editing

The initial output is rarely a pixel‑perfect copy; instead, it reflects the influence of the inspiration. Users can regenerate specific components or whole layouts, request variations in layout, color scheme, or imagery, and apply custom creative ranges. Direct editing is possible by clicking any component, and a preview mode offers a full‑screen view. Multiple visual styles are produced, enabling extensive iteration until the creative vision is locked in.

Advanced Features: NanoBanana and Live Mode

When a particular element from the source is not reproduced accurately, edited images from NanoBanana Pro can be used as backgrounds or references for easier tweaking. “Live mode” adds a conversational layer: the AI watches the screen and responds to spoken or typed instructions, allowing on‑the‑fly additions such as motion graphics or cursor effects to the landing page background.

Exporting to Cloud Code

Once satisfied, the design is exported via the “More → Export → Code to clipboard” command. The copied code is pasted into Cloud Code, which builds the front‑end in roughly 60 seconds. The result provides a solid base—an 80‑90 % solution—without consuming Cloud Code tokens, and can be further refined with tools like 21st.dev.

Value Proposition

Stitch 2.0 fills the front‑end design gap left by many AI coding agents, offering a free, accessible entry point for users who are not professional designers. Compared with complex tools like Figma, Stitch streamlines the workflow: Inspiration → Stitch → Cloud Code. The speaker notes that deployment to GitHub and Vercel follows as a next step, completing the end‑to‑end process.