Stitch: using AI to quickly generate app interfaces and code

Stitch is an AI-powered interface design tool from Google Labs designed to help users quickly turn ideas into interface and front-end code for mobile or web apps. Users simply enter a text description or upload an image, and Stitch generates a responsive interface design with HTML/CSS code that can be used directly or exported to Figma for further editing. The tool is based on the Gemini 2.5 Pro model and supports multiple design styles and rapid iteration, making it suitable for developers, designers and startup teams to build prototypes quickly. It streamlines the workflow from design to development and shortens the time from concept to realization.Stitch is currently in public beta and free to use, but requires a Google account to sign in and may have usage restrictions.

Function List

• Generate interface design: Quickly generate UI layouts for mobile or web apps via text prompts or image input.
• Code Export: Automatically generate clean HTML/CSS code with support for frameworks like React, Flutter, etc. for production environments.
• Figma integration: Supports exporting designs directly to Figma for team collaboration and further optimization.
• responsive design: Generate interfaces for multiple devices to ensure that they display well on different screen sizes.
• Multi-model selection: Users can choose between Gemini 2.5 Pro or Gemini 2.5 Flash models for different performance needs.
• Iterative optimization: Support for adjusting design details such as color, layout, or component styles via conversational prompts.
• image processing: Professional interfaces can be generated based on uploaded sketches or reference images to recognize layouts and styles.
• Accessibility support: Generate code that is WCAG 2.2 compliant and includes automated ARIA tags to improve accessibility.

Using Help

Access & Login

To use Stitch, users need to visit https://stitch.withgoogle.com and sign in with a Google account. The site runs directly in the browser with no additional installation and Chrome or Edge is recommended for best compatibility. Once logged in, the page displays a clean interface that includes a prompt input box and an option to upload an image.

Creating the first interface

1. input prompt: Enter the design requirements in the text box on the home page. For example, enter "Design a mobile app interface for a bookstore with a minimalist style, white background, and blue buttons". The prompt can be high-level (e.g., "a running app") or specific (e.g., "an e-commerce interface with a navigation bar, search button, and product list"). It is recommended to start with a simple description and work your way down. [](https://discuss.ai.google.dev/t/stitch-prompt-guide/83844)
2. Selecting an AI model: Users can choose between Gemini 2.5 Pro (for complex needs) or Gemini 2.5 Flash (faster). Beginners are advised to use the Pro model for more accurate results.
3. Generate Design: Click the "Generate Designs" button and Stitch will generate one or more drafts of the interface in a few seconds. The result is displayed on the right side of the page, with preview images and interaction components.

Editing and Optimization

After generating the interface, the user can adjust it in the following ways:

• Dialogic editing: Click on the "Edit" button to enter the text prompt area and enter specific changes such as "change button color to purple" or "add a sidebar". Stitch will regenerate the interface according to the prompts.
• manual adjustment: Users can select specific components (e.g., buttons, navigation bars) in the preview interface and adjust the style, spacing, or fonts via the side panel.
• Multi-screen design: If you need to generate multiple pages (e.g., an app's home page and details page), explicitly describe "Generate next logical page" in the edit mode, and Stitch will continue to style the design according to the context.

Exporting Designs and Codes

1. Export to FigmaClick on the "Paste to Figma" button and the design will be automatically generated into a Figma-compatible layer structure, suitable for collaboration with the design team. Note: Figma export is currently not supported for designs based on image input, so you need to wait for a feature update.
2. Export CodeStitch generates HTML/CSS code, or React, Flutter, or other frameworks, depending on your needs, by selecting the "Export Code" option. The code includes responsive layouts and ARIA tags, making it suitable for direct use in development. Users can copy the code to an IDE (e.g. VS Code) for further editing.
3. Saving items: While logged in, the design is automatically saved to your Google account for easy subsequent access and modification.

Featured Function Operation

• Image Input: Click the Upload button and select a sketch or reference image (e.g. hand-drawn wireframe).Stitch will analyze the layout and elements in the image to generate a close UI design. It is recommended that the image is clear and contains well-defined UI elements.
• Responsive Preview: After generating the design, switch to "Preview" mode to see how the interface will fit on mobile, tablet and desktop devices. Users can adjust the resolution to test different screen sizes.
• Accessibility Optimization: Stitch-generated code automatically includes ARIA tags to ensure that the interface is WCAG 2.2 compliant. Users can check the accessibility score (average 98.61 TP3T) using the Lighthouse tool after exporting the code.

Tips

• explicit description: Including specific styles (e.g., "Modern, dark theme") and features (e.g., "Include search bar and card layout") in the prompts improves the quality of the generation.
• progressive iteration: Start with simple tips and add details gradually to avoid entering complex requirements all at once.
• reference example: Browse https://mobbin.com或Dribbble获取灵感 to generate a more tailored interface in conjunction with Stitch.

caveat

• Browser compatibility: Some browsers may cause the image to fail to load, we recommend using the latest version of Chrome.
• Limitations on use: As an experimental tool for Google Labs, Stitch may have a limit on the number of times it can be generated per day, and you need to log in to your Google account to get more quota.
• design limitations: Generated results may be skewed towards a generic style, requiring the user to provide detailed prompts to ensure brand consistency.

application scenario

1. Rapid Prototyping
   Startups or independent developers can use Stitch to quickly generate a Minimum Viable Product (MVP) interface and save design time. For example, type in "Design homepage for fitness app with list of classes and subscribe button" and get usable UI and code in minutes.
2. Teamwork
   The design team can export the initial design generated by Stitch to Figma and collaborate with members to optimize it, making it suitable for a quick proof of concept or to show a prototype to a customer.
3. Learn UI Design
   Novice designers can learn about layout, color matching, and component design by entering simple prompts and observing the professional interface generated by Stitch.
4. Cross-platform development
   Developers can use Stitch to generate responsive code that can be used directly in React or Flutter projects, reducing manual coding time.

QA

1. Is Stitch free?
   Yes, Stitch is currently free as an experimental tool for Google Labs, but it requires a Google account to sign in and may have usage quota restrictions.
2. Is it possible to generate multi-page applications?
   Can. Users need to explicitly request multiple pages to be generated in the prompt, or describe the logical pages page by page via edit mode, and Stitch will maintain design consistency.
3. What is the quality of the generated code?
   The code is clean and WCAG 2.2 compliant, supports frameworks such as React and Flutter, and is suitable for production environments, but complex projects may require manual optimization.
4. What browsers are supported?
   Chrome or Edge is recommended for the best experience. Some browsers may cause image loading issues, the team is working on a fix.
5. How can the quality of generation be improved?
   Use specific prompts that include style, color, and function descriptions. Step-by-step iterations are more effective than complex one-time inputs.