The Rundown: Google's new design tool can transform your app ideas into fully functional UI designs for both mobile and web applications, complete with multiple screens, custom themes, and ready-to-use code.

🧰 Who is this useful for:

• Startup founders needing quick prototypes for investor pitches
• Developers who want to skip the design phase and jump straight to coding
• UI/UX designers looking to rapidly brainstorm interface concepts
• Product managers creating mockups for stakeholder presentations

STEP 1: Choose Your Platform and Create Your Prompt

Head over to Stitch and you'll see the main interface with two primary options: Mobile or Web. Choose the platform that matches your project needs. In the text area, describe your application concept in detail. Be specific about the functionality you want.

For example:

"Make me a web application for discovering California activities and getaways. Focus on showcasing destinations, musical events, and easy trip planning."

The more detailed your prompt, the better the AI will understand your vision and create relevant screens.

STEP 2: Review and Approve the Generated Plan

After submitting your prompt, the tool will analyze your request and present a comprehensive plan showing all the screens it intends to create. You'll see a breakdown like "Homepage," "Destination Detail," "Event Listings," "Trip Planner," and "User Profile."

This planning phase uses deep research to ensure all necessary components are included. If you're satisfied with the proposed structure, click "Yes" to proceed. If you want modifications, you can provide additional instructions before moving forward.

STEP 3: Generate and Customize Your Designs

The tool will generate multiple high-quality UI screens with realistic content, images, and layouts. You'll get a complete set of interfaces that work together as a cohesive application. Each screen includes proper navigation, relevant imagery, and functional design elements.

To make modifications, click "Edit" on any screen and describe your changes. For example, "Move the activities below the map." The AI will instantly update the design while maintaining the overall aesthetic and functionality.

STEP 4: Apply Themes and Export Your Work

Customize the overall appearance by clicking the theme editor. You can switch between light and dark modes, adjust corner styles, change fonts, or apply custom color schemes. All changes apply across every screen automatically, maintaining design consistency.

When you're satisfied with your designs, export them using the "Figma" button to import directly into Figma for further editing, or click "Code" to access the frontend code for immediate development use.

Pro tip: Start with broad descriptions in your initial prompt, then use the editing features to fine-tune specific elements.