[0:00]All right, this one is going to be a very, very cool one. I can't wait to show you guys kind of what we're going to be able to build in this new version of Google Stitch. If you have never used this before, um I'm going to basically walk you through step-by-step how to use Google Stitch because it was recently updated, and it's way, way better now in terms of the user interfaces that it generates. And then what I'm going to do is I'm going to show you how to take something like this, for example, which is a fake landing page that I made for my business. And then I'm going to show you how to take this and hook this up to something like Glod code, for example, uh which you can see in my terminal. I basically am going to take the code from this existing landing page, put it in a Glod code, and we will have a functioning, working website that we can start using for our business in like literally a couple of minutes. So, without further ado, let's show you guys how to build beautiful looking landing pages just like this one. I'll make it a little bigger so you guys can actually see what we're looking at here. Um it has a little kind of animations to it, and in general, I think that this looks like it was designed by a professional user interface, uh artist or designer. Instead of kind of the traditional boiler plate, kind of template looking user interfaces that sometimes Glod code has a hard time generating. That's basically what this is for. So, we're going to go step-by-step here. I'm going to show you how to do all of this, and we'll go through basically how you can make like just insane looking landing pages. Uh for pretty much anything you can think of, your business, and offer you, uh or even your personal website, um this is going to be a really cool tool to use. So, first things first, let's kind of cover what we're actually looking at here before we kind of start over, and I go step-by-step through the whole process. So, the first thing that you'll see is these two images right here. And realistically, we only really need one image, but I'm going to go ahead and zoom in a bit. And as you can see, this is kind of like a user interface mock-up. I wish I had the original person who designed this. I believe I found this on Pinterest. Um which speaking of which, um if you are looking to make a landing page that has kind of a certain aesthetic or a certain like vibe to it. one of the easiest ways to find inspiration is to go to different websites like Dribble, for example, or Pinterest. Um just because you're going to have a ton of different examples of landing pages that people have created, that look really, really good. And then what you can do is when you have that inspiration, you can upload that inspiration into Google Stitch. And then using that inspiration, you can build a new landing page with kind of the not the same exact look, but similar kind of vibes and aesthetics. Um in this case, that's basically what this one was able to do. And this isn't even the most like impressive use case here. I don't even think this looks that like amazing. It looks like a very functioning and like good-looking user interface. Um but there there are better ones out there that I'm going to show you how to build in just a second. But anyways, going back to the original thing, you'll upload something like this, which is basically an example image, and then you'll scroll down here, and the second thing that it will create for you is basically this. This is like your design system, if you will. And essentially, inside of your design system, you're going to have a bunch of different things that are going to dictate what your user interface actually ends up looking like. And a couple of the most important parts are here are like things like the color palette, for example. Um, fonts and kind of what type of fonts you're going to be using, labels and buttons and search bars, and just different kind of components that can be expected to be used in your user interface. Which in this case, that was kind of the whole design system that was basically kind of translated over to this specific design that it made right here. But let's go ahead and show you guys how to do this completely over from complete scratch, uh without having an existing thing that way we can go step-by-step through this. So, the first thing you're going to need to do is you're going to head over to Google Stitch. Uh you can either simply Google it or I'll have a link to it down in the description. Uh let's go ahead and go back to all my projects here, and then I have a couple of other ones that I was actually working on. Not long, but the Stitch did get an update, so that's kind of cool.
[6:05]But this is basically the page that you should see when you first initially start using Google Stitch. And so, we have a couple of things we can do here. We can either switch it to an application if you want to make a mobile application, or we could switch it to a web application, which in this case for this video, that's what we're going to be doing. And then once we go ahead and decide that we're going to do our web application here, we want to make sure that we're using one of the new AI models that is currently available, which in Gemini's case is going to be 3.1 Pro. Um there's a bunch of other options here, but I'm just sticking with 3.1 Pro, just because that's going to be kind of the the easiest way to show you what we're going to do next. Okay, now what we need is our inspiration. We need uh some kind of inspo source to build off of. So, what we're going to do is I'm going to head back over to Dribble, um or Pinterest. We can do either of these really. Uh let's just take a quick little look here and kind of see what these look like. Also, you don't need necessarily an image, uh to upload as a inspo file. You can upload a URL as well, which is kind of cool, meaning that, you know, we can create something literally just based off of a basic URL. And in the, you know, in the spirit of experimenting with that, let's go to my school community. I'm going to go ahead and take that URL from my school community. And then I'm going to upload this URL. Then what I'm going to say is create, oops, create a landing page for my school community. And then I'm going to hit the enter button. And let's see what it ends up coming up with. Now, this specific way of doing this is going to be a little different than it would be if you just uploaded an image. Um if you uploaded an image, it would take that image and then essentially it would use kind of like elements of that image, but it won't like copy it like for Bm, obviously, to avoid things like plagiarism and just being lazy. Like obviously, it's important that you create things that are substantially new and different, um and that's kind of the whole point of this in specific. And then as you can see, over in the left-hand side here, it is working. So, what I'm going to do is I'll come right back and show you guys what it ends up building in terms of the first part of this, which is going to be the design system, which is going to be really important. It looks like it just finished up here. So, I'm going to zoom in and show you guys some of the stuff that it built. The first thing that it built here is this design system, like we talked about earlier, where we had the color palette, the different fonts and kind of just the other details that we can come to expect or the final version of the user interface. Which in this case, it also was able to generate right here. And I think this looks pretty good. Now, this definitely is going to need some editing. Specifically, when you use URLs like this, there's going to be a little bit of an issue in terms of like just giving it a URL and saying something like make me a landing page. Sometimes you need to give it way more details to make sure that everything is accurate, like it says here at the very bottom, which I do like this uh little pricing page here, but um I don't have $149 a month uh option. That's not one of the pricing options that I have. And then it's like making up some of these things too. So, you just need to make sure that you kind of add a good amount of details when you initially generate stuff like this. Also, too, if you don't like anything here, it is really easy to make any of those changes. We'll go up to generate up here, and you'll see that we can do a bunch of different things here. We can create a variation of this. We can completely regenerate it, and we can even see what this would look like on the mobile app version, which is kind of cool too. That gives you kind of an idea basically of what, you know, users will see when they're using their iPhone. Now, while I was waiting for this to finish up generating, what I went ahead and did is I actually got a new URL Inspo, and this is just for a singular, you know, singular page here. uh for a landing page, but what I want to do is I'm going to take this specific landing page. I'm going to put it on my desktop really quickly here. And then what we're going to do is I'm going to show you one more time, just maybe potentially a better-looking landing page. uh that it could generate simply by using this example that we pulled uh for this landing page in specific. So, I'm going to open this one up, and I'm going to say, uh please create a landing page for an agency called Herp Agency. Like my last name. Uh and then we will go ahead and hit the enter button. Also, if you don't want to have to type out problems, they also added a new voice feature where you basically can speak with a voice agent down here, uh which is also called live mode, which basically means that you can kind of have a live conversation. And the AI agent will do work for you while you kind of have these like, you know, very natural, kind of human-like conversations with it, which is pretty cool. And then here we are. This was the little design system that it ended up cooking for us, and then here is our landing page. And I think this looks pretty good, right? It has a little bit more of kind of a human natural-looking user interface that I don't think that a whole lot of the Glod code interfaces really do a whole kind of good job of, if you will. Okay, but speaking of Glod code, let's actually show you guys how to get this into Glod code and have it start building out a complete website for us, so that way we can ship this and start using it as a real landing page that people can actually go to. The first thing you're going to need to do is if you go ahead and click into this landing page design window right here, and then you go up to the top and you click on more. You'll see you have a few different options here. We can either view the code, copy this to Figma, or we can export it. I'm going to go ahead and click on the export button. And then once I click on the export button, I can basically export this as a bunch of different options. We specifically want to do the code to clipboard option, and then I'm going to go ahead and say yes. And then once we've basically have that currently in our clipboard, meaning that we can paste it now, I'm going to go ahead and open up a terminal session. I'm going to pull up Glod code, and that's as easy as literally just typing out Glod. And then I'm going to paste in the code that we just got. And there you go. Hit the, or well, first, actually, let me tell it what we need to do. Uh please make this a functioning website page, and then run the dev server. Hit the enter button, and then this this part might take a little bit, and you might have to hit the accept button a bunch of times as it starts running through the commands and everything. But essentially, this is going to build the same exact website that we're looking at here because we're able to just pull the existing code that it used to build this, directly from Google Stitch and then put it directly into this Glod code instance, just like this. All right, I'm going to go ahead and come right back once this has finished coding, and you should see a fully functioning website that we can start using and put it on Versel or deploy it or basically do anything we want with it. And here we go. That took about three or four minutes to kind of get fully developed and realized. I'm going to hit the refresh button. You can see a nice little kind of animation where everything kind of comes into place. And you'll see that basically everything on this portfolio completely works. Now, I can click on different buttons. It will take me to different parts of the website. There's still probably a little bit of optimization that can be done in terms of like load speeds and kind of some lower like renderings in terms of like like this. That doesn't really look that good. Probably could change that in the long term, but for the most part, this thing is ready to go. I mean, I think this looks pretty damn good for pretty much doing this in less than whatever it's been, like 10 minutes now or so. But that was pretty much it. And if you guys have any questions about this process, please let me know, and I'll see you guys in a future video.
