Google Stitch is Google’s new AI weapon against Figma. The tool generates models and codes from textual or voice instructions.
Stitch is a free AI tool from Google Labs that allows you to create UX/UI interfaces in minutes. It generates models, interactive prototypes and functional code from textual or vocal instructions in French or English.
From screenshot to prototype
Stitch’s interface is similar to many AI tools. On the left panel, you will find all of your current projects as well as various examples to inspire you. In the central space, the chatbot has numerous options allowing you to properly configure your request. You must first determine the support for your design by choosing between a mobile application and a web interface. To enrich your query, it is possible to import files and screenshots, or to directly enter the URL of an existing site that you wish to redesign.
You can also improve your prompt by clicking on the “+” button and “Improve prompt”. You can also refine the aesthetic of your project from the start, with the ability to select predefined color themes.
Choose the right model according to use
Like all AI tools, Stitch offers several models that have different capabilities depending on use cases.
Gemini Flash
Gemini 3.0 Flash offers designs in HTML, allowing them to be exported directly into coding software. Here is a prompt to test its capabilities:
|
Create a minimalist and modern landing page for a new FinTech investment product. Includes a catchy headline, a brief description of key benefits (e.g. ‘Invest Smart, Earn More’), a clear call to action to ‘Join the Waitlist’ with an email field, and a discreet footer. The design should be clean, with a blue and white color palette, and optimized for quick HTML export. |
The agent will first generate a design system which then guides the design of a product with color palettes, buttons, etc. Then generate the interface.
If you want to change the colors or any other element of the page, just use the chatbot or the bar that appears at the top of your screen when you select a page. In it, you can find a tool to annotate the page, and correct what does not suit you.
Still in this bar, you can click on “Generate” then “modify”, which will directly allow you to modify the text available on the design. If you are not convinced by the first generated screen, you can request variations by clicking on “Generate” then “Variants”. A screen will appear on the right of your screen, and you will be able to specify what you want. Here, we will generate 3 variations by asking to change the layout and colors.
Gemini Thinking
Gemini Thinking 3.1 Pro helps strengthen quality and reasoning, which may take more time but also yield more qualitative results.
|
Design a delivery tracking dashboard for an internal logistics application. The dashboard should display key indicators such as ‘Deliveries in progress’, ‘Deliveries completed’, ‘Delays’, and ‘Carrier performance’ in the form of graphs (bars, lines) and maps. Ensures perfect precision for element alignment, consistent spacing and clear typography. Incorporates the company’s graphic charter (primary colors: dark green, anthracite gray; font: Open Sans). The interface should be optimized for a 1920×1080 pixel desktop screen. |
Here, the prompt had specified the addition of cards, which Stitch did not do. However, it offers it in the suggestions above the chatbot.
Redesign
Redesign allows you to redesign sites or applications that already exist, using Nano Banana Pro, you must therefore attach a screenshot or the URL of the site. Using this mode, the generated designs will be in JPEG format. If you want to obtain the code, you will have to copy and paste the image into another conversation and request a screen from there.
In this test, we used the Journal du Net site.
|
Created three distinct redesign concepts for a media website, each exploring a different visual style: the first, modern and minimalist, emphasizing large images and clear typography; the second, bold and dynamic, using strong graphic elements and vibrant accent colors; the third, classic and sophisticated, based on a structured grid and refined typography. Include the following key sections: a hero banner, featured news, category drill-down, and article previews. Also consider a responsive design, with distinct navigation schemes for the desktop version and the mobile version. |
Ideate
Unlike classic Stitch modes aimed at producing interfaces, Ideate mode is, according to Google, an agent of “Deep Design”. He is able to carry out web research to identify UX best practices, analyze trends and transform a problem into a plan before proposing generated interfaces.
|
OmniRetail SaaS offers a centralized platform for major brands to manage their inventory, online sales and customer data. Their customers have access to a huge internal documentation portal (user guides, API documentation, configuration procedures). Here are user interview reports. This feedback indicates a need for AI conversational research. Help me brainstorm features to implement according to customer requests. |
Stitch generated three product requirements documents (PRDs), then generated 3 screens for each document. The results are quite relevant to customer comments.
Key features
Instant preview
The main advantage of Stitch is that it can generate instant prototypes. By selecting a design, then clicking “Generate” then “Instant Prototype”, Stitch will generate an interactive interface, which will allow you to modify the text and preview the model on different screens.
By clicking on “Add screen”, on the left screen, you will be able to add a screen that you have already created, but also generate new ones. By clicking on “Imagine a new screen”, Stitch will ask you to create new screens linked to your design. In this example, Stitch has generated a registration page, which is connected to the button on the first page. However, on this test, Stitch did not recover the colors of the first generated page well.
The different export methods
Stitch also allows you to export screens in formats that can be easily used in business interfaces. Stitch also connects to AI code generation tools, including Anthropic’s Claude Code, through the Model Context Protocol (MCP) implementation. This protocol opens secure communication between data sources and AI tools. The code is also available directly in a zip file and your project can also be exported directly to Google’s AI Studio, to go from design to a functional application.
For Figma, you just click a button, and by pasting the clipboard into Figma, the design becomes interactive and you can edit it as if you had created it directly in the software.
If you are in a company that already has a well-developed graphic charter, you can provide it to Stitch. To do this, simply click on the small colored bubble in the chatbot, and click on “Design Systems”. You can change the colors, fonts and even rounded corners. The most interesting remains the DESIGN.md tab. This markdown file is read by an AI agent and allows it to be framed. You can detail all the elements of a visual identity such as colors, fonts, spacing, component styles, etc.
Overall, Stitch is a very good tool for people who are not comfortable with UX/UI. The few problems perceived during the tests are mainly a break in style. When generating new screens for a prototype, Stitch can sometimes deviate from the graphic charter defined on the first screen (slightly different colors, inconsistent rounded buttons). The AI can also ignore certain specific instructions (like adding cards in one of our examples) if the prompt is too dense. Stitch therefore focuses on the surface, the backend logic remains to be built in addition. AI also favors design over accessibility and tends to overuse tags
in the code, which makes navigation by screen reader difficult, for example. However, the tool remains very interesting, particularly during rapid prototyping phases.
