Design-to-Code Compilation: Building Functional App Interfaces with Stitch

Have an idea you need to turn into a mobile app or web application? Google Stitch might just be the answer. Imagine creating anything from a houseplant care dashboard to a platform for teaching cooking classes to an employee feedback tool. All from just a few words, a sketch or an image. In seconds, your UI comes to life. You can refine the design, export clean static HTML, or send it directly into Figma for further collaboration. Powered by Google Deep Mind's latest AI models, Stitch helps you own your new design faster, easier, and at zero cost. Make me a music app with a beach vibe. Tap mobile and generate. You can change its appearance, update the color scheme, and even add additional functionality on the fly. You can copy to Figma with a singleclick import, create a daily challenges app, a volunteer recipe, DIY project apps. The possibilities with Stitch are actually pretty impressive. Let's start with the top questions. What exactly is Stitch? According to Google, it's a tool designed for developers to create high quality UI for web and mobile applications powered by the latest AI models from Google Deep Mind. The second question, is it free? Yes. Each user gets a monthly allowance of 350 generations in standard mode and 50 in experimental mode, making Google Stitch free to use. All right, let's try it out for ourselves. The first thing you'll notice is the clean, refreshed user interface. You'll also see prompt suggestions right away, making it easy to get started. Google Stitch recently updated its prompt guide to help you get the most out of the model. Following the link takes you to the Stitch prompt guide page, where you'll find clear instructions on crafting effective prompts to design and refine your apps. I highly recommend checking it out as a starting point. Stitch has upgraded its default experimental mode to run on Gemini 2.5 Pro. You can now add a sketch, mockup, or any visual inspiration to kickstart your project with support for building both web and mobile applications. To make things even easier, Stitch also provides a set of sample apps along the left side of your screen to help you get started. Standard mode uses Gemini 2.5 Flash for speed and efficiency, while experimental mode with Gemini 2.5 Pro delivers slower but higher quality, more complex generations. Ideal for detailed design work. Stitch users prefer Gemini 2.5 Pro results three times more than standard mode, largely due to the new canvas flow visualization. Designers can now map the entire user journey at once, renaming or deleting screens to stay organized. While developers value generating an initial design and refining it with follow-up prompts. For today's demo, we're switching to experimental mode. We'll upload our image, keep the music theme rolling, and let Stitch generate a fully functional landing page for our music app, complete with navigation, player controls, and a recommendation feed. All production ready with clean exportable code. Just like that, Stitch makes refining your design simple. Just enter updates in the toolbar or use the add design in chat tab for instant changes, even in full screen. Developers can tap the code button to view and copy clean production ready code, cutting the time from concept to product. With Google Stitch, the way we design and build has truly changed. Thanks for watching. If this helped, subscribe and hit the bell for the latest Google AI updates. Keep exploring, keep creating, and we'll catch you in the next one. [Music]