This Google AI Agent Builds Real App Prototypes!

Google's fully free AI design agent just crossed a pretty important line. Stitch, Google's AI powered UX and UI tool, can now think through your app before writing a single line of code. And that changes what AI design actually means. If you're not familiar with Stitch, it's Google's end-to-end design and coding agent that lets you generate complete UI designs and productionready front-end code from simple text prompts, screenshots, or even live websites completely free. But this month during Google Shipmas rollout, Stitch received a set of updates that push it far beyond just generating UI is now starting to design full user experiences. Let me show you what changed and why this matters. At its core, Stitch is built around a simple idea. Describe what you want and the AI generates responsive layouts, real front-end code, and exportable components. You can send this directly into Figma, Google AI Studio, or download the code locally. Unlike most AI UI tools, Stitch was always designed around code backend design, not screenshots. And now Google is doubling down on that philosophy. The

first major update introduced is the redesign agent. You can now give Stitch a screenshot, an image, or even a URL and ask it to redesign the product using natural language. Previously, this kind of AI redesign stopped at visuals. It looked impressive, but you couldn't actually use it. That limitation is gone. With Gemini 3 Pro now integrated into Stitch, the pipeline continues past the image and into clean working HTML and CSS code. So instead of screenshot and getting a pretty image, you now get a screenshot, redesign UI and production ready code. And that code can be handed off directly to AI Studio or any coding agent for further iteration and improvements. Shipmiss day 2 focus on workflow speed. Stitch now includes a full command pallet, keyboard driven navigation, and distraction-free zen mode. This turns Stitch from a demo tool into something you can actually use for real projects. There's also a new visual understanding layer, including predictive heat maps. This lets Stitch estimate where users are likely to focus and click before you ship anything. In other words, the AI isn't just drawing screens, it's reasoning about attention and interaction and making the app much more reasonable. Shipmiss day 3 is where things really change. Stitch default agent is now Gemini 3 Pro and is running on a thinking mode. This agent now plans the design first, then generates the code. The community has already described Gemini 3 Pro as too good at front end and unmatched in visual reasoning. And now you can see why it handles complex dashboards, intricate DOM structures, and pixel perfect CSS better than anything Google has shipped before. But the real unlock is prototypes. You can now stitch multiple screens together into fully clickable user flows. You can test interactions, animations, and even request edits by clicking directly on elements onto the screen. And when you're done, you can now export the entire flow, including contacts, directly to AI Studio. This is no longer UI generation. This is UX design powered by the top reasoning AI models out there. All right, we are in

Google Stitch right now, and what we're going to do is we're going to test out the new features. So, the first thing you'll notice is that now when you click on this, you can see that Stitch is now powered with Thinking with 3 Pro. And then there's also the redesign feature we talked about, which allows you to take an existing app or a site with Nano Banana Pro and redesign it. And you only have to attach a simple screenshot. So, why don't we test this feature out first? Our goal is going to be to redesign the Nike training app. So, I'm going to include some images here for the model to take as an example. So to test out this redesign feature, I've asked the app to redesign this Nike training app. And I've given it two examples or screenshots of what the training app looks like. So this is one example that I've given it over here as you can see on the right over here, which is like what the feature looks like when it's actually training. And this is kind of more like the landing page where it has examples of programs that you could use to train. So I like this UI of this app and I want Stitch to able to recreate that. So let's see how good it does. The way Stitch works, it works like a developer working with you. So the first thing it does is kind of give an example of what it wants to do. So you can see to redesign the Nike training club app, we could focus on key screens that users interact with most frequently. So it has suggested key screens that has come up with. The first one being the home screen, which makes sense where you have a personalized dashboard and you have a bunch of programs and you can click on start a program. Then it has come up with a second screen calling it the workout detail screen which displays information about a specific workout including exercises. Then it has also decided to add another screen which is called the exercise playback screen. So this screen would show the active workout displaying the current exercise timer and controls. So this would be kind of more like this one and then it has the program list screen and the profile screen. So then it asks you shall we proceed with designing the screens? So you if you're okay with what it has given and like the screens it has designed you can press yes or you can like use this suggested reply here which is design the home screen and workout detail screen. I'll just say I wanted to design all of these so I'll say design. Let's see what the app creates. All right it looks like Stitch is done creating the workout screen. So we have our home screen here which is not bad at all. You have your workout here. You have a progress section which is kind of cool. Then you have bunch of exercises that you can choose to add to your workout plan and you have programs and at the bottom if we look at it we have workouts, programs, activity profile. So this is pretty good. Then when we move to the workout details screen, we also have a 30inut intermediate workout here that is showing as an example. It has a play button and everything like that and also tells you equipment needed exercises. So this is not bad at all. And then when you're actually working out, this is the design it has came up with. So, these are pretty good designs. What I don't really like is this section over here, it kind of doesn't seem coherent compared to the rest of them a little, but if we look at the training program section has bunch of programs that you can add, but it's not bad. And then the profile section kind of looks pretty good. Uh the UI is not bad at all. And it also keeps track of your stats like total workouts, total live time, and achievements. Now what we can do is we can select all of these prototypes and then click on more here and we can export them or download them or we can align them to the top depending on like that or we can even edit them. So this is the cool feature like you have these default things but you're not done with that. You can make customization, you can tell stitch what to do. So you can see I've selected all these images and if I wanted to I can redesign or change something about the UI that I don't like. So it's not like it's set in stone. You still have the capabilities to make updates to this. Then another feature we talked about was Stitch's ability to understand where a user would click on. So if we click on this generation option here, you have variations, regenerate code version, and predictive heat map. So I want to show the predictive heat map first. I'll click on this. And you can see at the bottom here, it's generating a heat map on the right here. Let's click on this heat map. So, what it's showing us is that when a user is actually going to use this app, these are the things where they're going to click on. Obviously, it makes sense that the heat map is showing that when they click on the play section, that's probably the main area as well, like the description and equipment needed section and the workout section with the start workout being the most thing. But if you're a UI designer, you have the ability to test out your UI interface and understand where a user would click on. And if you want to make specific adjustments and improve the heat map for a certain thing, you can do that with the capabilities of Gemini embedded into this. So this is pretty cool. We can also take a specific section and then click on generate again and tell it to come up with the code to actually program this. So let's do that. So it's not taking images from online. It's actually using Nano Banana Pro to generate assets. So which is something important to note and pretty cool at the same time. All right. Looks like Stitch is done generating the code. So what you can see is that it generated all of this and if I click on here I could export the code or also look at the view code. Now you can take all this code and put it into whatever project you're working on. You can also put it into Google AI studio, make further iterations or actually distribute this code. You can go from an image to a prototype very quickly with Stitch. If you enjoyed this video, this

is what we do here. Fast, clear updates on the biggest moves in AI. If you want to stay ahead of everything happening in this space, make sure you're subscribed. And if you want the hands-on side, demos, tools, workflows, and everything developers can actually build, well, check out the World of AI. We also run a simple no noise newsletter that gives you the most important AI tools and updates in just a couple of minutes. Subscribe here. Follow World of AI. Join the newsletter.