Google Stitch 2.0 Tutorial: From Sketch to Code with Gemini 3.0

What if you could take an idea stuck in your head or even scribbled on a napkin and turn it into a professional layer design and productionready code in under 60 seconds? Today, I'm going to walk you through Google Stitch 2. 0. Google just dropped a massive update to their AI design agent. It's now powered by Gemini 3. 0 Pro, which means it can actually think through complex layouts. It can predict where users will look with heat maps. And it can finally stitch together screens and clickable prototypes. And the best part, it outputs real code, React, Tailwind, HTML. So you're not just making pretty pictures, you're building actual software. I'm Jamie and welcome to Teachers Tech. Let's get started. Before

we jump in, you might be asking, who is this actually for? Number one, the developer who hates CSS. If you love backend logic but hate centering divs, this builds your front end in seconds. Number two, the startup founder. You can build a polished MVP for investors without hiring a designer. Number three, the designer. This cures the blank page syndrome. You can generate five layout ideas instantly, get inspired, and then export to Figma. And number four, students and teachers. It's an incredible learning tool to see exactly how design translates into real code.

Head over to stitch. withgoogle. com. I'll put a link to this down below in the description. And let's take a look over to the right here. Now, I want to point out this is crucial in 2. 0. You have a model toggle. So, you can switch this to thinking mode. And you can see I'm already in this. It takes a few seconds longer to use this, but follows a complex instructions way better than fast mode. But let's just jump in. We're going to build a mobile dashboard. Now, the trick is to be specific. Don't just say finance app. Use a prompt like this. A mobile dashboard for a crypto tracking app. Dark mode aesthetics with neon purple and green accents. Top section shows total portfolio value. Below that, a graph showing a 7-day trend. I'm going to go ahead and generate and look at the result. Starting from this prompt is what we gave it right here. And we have this being popped out in under a minute giving us exactly what we want for design. But doesn't mean we have to stop there. We can do many other things. If we look on the left, we can continue. It's even suggesting add a buy sell button for quick trades or I can make other suggestions. Let's go ahead and just try this one. Let's take a look. I'm just going to move down. It's right below. And there we have buy, sell, add it. I want to point out a few things just about movement on this canvas here. You'll notice that it's set to this gray color. What I can change to anything. We can zoom in, zoom out. So, if I was going to zoom out, you can see how you can manipulate. If I wanted to pan around, I can grab and drag things around. I can position these also differently. So, maybe if I go back to select, I can move this up and then I can compare it a little bit easier this way. So, I could go back to uh fit in screen and then I can look at them more side by side. Couple other things I just want to point out with the prompt. You can upload here. So from a website URL or upload images. I'm going to show an example of uploading in a bit here. Uh we can also uh look at this. We can generate variations. And I'm going to show you a different way we can generate variations as well. I'm going to make sure I have my select tool on and just

move down a little bit and select this. And then you'll notice I have different options across the top. We have edit generate. If I go to edit theme, I can drop down and choose this in the right panel opens up. And then I can start making some changes about color or corner radius. And I can go ahead and apply them. And you can see how it made the quick change. Now, a different way you can make different variations rather than just going up to edit would be to go to generate and variations. So notice that we have some different options that we can choose here. So how many options do you want? I'm just going to leave this one at three right now. Notice we have creative range. Well, refine is for small tweaks and right now it's defaults to medium. This is just standard. And we have yolo. And this stands for you only look once. And you select this if you want the AI to get wild and creative. And we can also give it some custom instructions. What I like is you can uh click what the aspects you want to vary. So, if I wanted to go maybe YOLO and we're going to go with color schemes uh let's go with images here. We're going to generate uh variations of this. There'll be three variations that come out and I just zoomed out so you could see everything. This was what we started with and these were the three different variations and we told it to vary the colors. Not a lot of variation here, but you can definitely see it with this one at the end. And the image here on each of these was also altered uh versus this one where it was more similar, but you can see the changes that it made. So, that's how you can use variations to kind of get creative and get different ideas of what you might want. Just a few quick tips for you. I've been showing you up top how you can make these different edits. But if you just rightclick on any of these, you get quick access to all the same features. And then you'll also notice the shortcuts available to you uh if you want to get faster doing it that way. I do want to point out under the

more here. So this is where you can view the code and you can copy the code out uh from here. Uh the other thing you can do is you can export it or download it. So you'll look at the different options where you can export it even to AI studio, Google AI studio, jewels, zip or code to clipboard. Uh the other thing I just want to point out and I'll just do this quickly as a download. So if we go ahead and download it. I just have it up here. It downloads as a zip. So if I bring this over, I'm just going to open up this right here. And it gives you an idea here is the files that I've downloaded locally that you can kind of see it with the animation on it here. But I'll show you prototypes a little bit later on as well how you can do that inside of uh Stitch. Let's head back to all projects. Now, this is going to get saved automatically. You can see this is the name of it right here, but I can go ahead and rename the project. If you do want more room, you can collapse this and open it. But I'm going to go to all projects. You can delete the project here as well as the other options that you see. But let's go back to all projects. This time I want to build

something else. You can see what I created over here today where I can quickly go back. We're going to do a website now. So before we start, I'm going to go and toggle over to web. This is going to tell Stitch we want a wide horizontal layout. So let's create a modern landing page for a new SAS product. This is the prompt I'm going to give it. A modern clean landing page for a SAS productivity tool called flow state. Wide hero section with a headline focus faster subtext and primary blueed CTA button below a three column feature grid with icons, minimalist aesthetics with lots of white space. And I'm going to go and generate. And there it is, a complete desktop layout. It understands the website needs as a wide navigation bar, a large hero section, and horizontally stacked feature columns. The AI is smart enough to know standard web patterns. It just didn't stretch a mobile app. It composed a proper landing page. And all of the other features that I showed you work with these websites as well. So if you wanted to go generate variations or make any edits or do the downloads. So, here's an example of this one that I just did here. We'll open this up and you can see kind of what it looks like on a browser and the interactivity of it. Now, I went a little bit further with this website. I asked it design a second page for pricing. Notice I didn't put any details in and it came back and I'll move down. This is what it created. Notice that it stayed as flow state the color scheme. It just picked everything from the first prompt that I gave it and quickly designed that second page that I needed. So now for a magic trick. Let's

say we have this messy wireframe on a piece of paper and we want to turn this into a real app. I'm going to go ahead and upload this photo and give it this prompt. Turn this wireframe into a highfidelity iOS login screen. Clean white background. Make sure I'm under app for this one. And we'll send it away. And boom. It turned my scribbles into input fields and a button. Now

let's take a look at some of these pro features with heat maps and prototypes. I've reopened my crypto portfolio dashboard that we made at the beginning and I'm just going to use one of these as an example to show you heat map. And we'll choose this one right here. So, if we go under generate, if I have this selected and go under generate, you can see that we have predicted heat map. And here it is. So, this is an attention audit. It predicts where the user's eyes will look first. If your buy button, like what I have right here, isn't glowing, you know, you need to fix the design before you code it. For prototyping, I'm going to move back to the website design that we created. Now, you need to select at least two different of the designs here. So, I'm going to go to my select and I'm just going to select both. And once two or more are selected, you will see that we have the prototype feature. So, if I select this, this is going to go and create a prototype and then we'll test it out. Here we have our prototype done. We're going to go and zoom in on this a bit. Let's go ahead and move this over. And if we click on it, we will see that we can go ahead and interact. And if we go ahead and test this out, I click pricing. You can see how it brings it here. Let's see if they have it a hot spot here under flow state. Brings me back to the front page. Uh features. I shouldn't have any features yet because I didn't create those pages. But you can see if you wanted to go ahead and create more pages, you get this in an interactive state. If I hit restart, uh it will just go back to the very beginning where I can test out other things. So I could go and add more features and test them out to see how everything is functioning, how the design will look when it goes from page to page. Stitch isn't just a toy anymore. It's a force multiplier. Whether you're a developer trying to move faster or a teacher showing students how UI works, this is worth checking out while it's still free. I'll put the link in the description. Like I mentioned before, let me know in the comments, are you going to use the YOLO mode or stick to refine? Thanks for watching and I'll see you in the next tutorial.