Автоматизований дизайн вебсайтів з AI: Claude Code та Google Stitch

Every single one of these websites in front of you was created in around 10 minutes using Google Stitch and Claude Code. And in this video, we're going to be talking about three ways that you can build beautiful websites that actually make you money, like actually help you acquire customers. And by the way, we're not just building a landing page, we're actually building the full-blown freaking website from scratch in like 10 minutes. Now, the reason why I say that we're going to be building websites that actually make money is because I've actually spent on this single ad accounts alone $160,000. And I've created websites that have literally a 20% conversion rate, and we're going to be talking about how you can actually implement all the tactics that help people convert into paying customers in this video. Now, for those of you who do not know me, my name is Jono. I've created two seven-figure businesses, and for better or for worse, I've actually designed like 50-plus websites, which took so freaking long on WordPress. Fortunately, I never have to do that again because of Claude Code and Stitch, and we're going to be building this out together. Let's get into it right away. The first thing is is that Stitch is a free Google product that allows you to design beautiful websites. Now, I'm not talking about just one website page, I'm talking about the entire freaking website. So, you, for example, could upload an image just like this of a beautiful landscaping website, and then it could go to work for you developing all of these pages, like the service page, the contact page, home page, and so on and so forth. Now, when you actually use Stitch, it's going to pull out all of the design elements from that given website. So, with the colors, the font sizes, families, all of that kind of stuff, so that it can literally steal that design and then incorporate it into your particular website. So, there's three ways that we can design websites. The first one is by just stealing your competitor's website. So, let's say that today's the day that you decide to create that wedding photography company. You type into Google Toronto wedding photographer, and you pick a website that looks beautiful. Let's go ahead and choose this one over here. So, I like this. This looks good. We can go ahead and copy the URL. But before we actually paste this into Google Stitch, what I would prefer to do is head over to Claude Code to turn our prompt into a mega prompt. So, I just, you know, put something together in like, I don't know, maybe like 10 seconds here. Uh which is to design a luxury web wedding photography website for a high-end studio called Elegance. I kind of like that name. And it's going to head and has generated this prompt that we can immediately copy and paste into Stitch. So, I'm going to go ahead, copy this. Inside Stitch, we're going to paste this in. And I also want to include that URL up top here as well. So, here we go. I've sent it off. Now, we're going to let Stitch build this out for us. Cool. And so, in a matter of maybe 60 seconds, we've gone ahead and created our entire five-page design over here. And if we compare this to Mango Studio over here, the design is pretty much the exact same. I mean, we're copying the colors, the font family, the layout, the all of that kind of stuff is very, very similar. Now, I'm going to be real with you guys. It's not perfect, obviously. Like, you can take a look at this um and see like awful images that it selected here. Luckily, those are pretty easy to change. But this one in particular is going to help me. I mean, that looks absolutely horrendous for a $10,000 luxury wedding photography company where you have like a >> [laughter] >> like a cartoon graphic on it. Oh my gosh, that would kill the conversion rate. So, we've got to change this kind of stuff. We've got to change this. There's a couple images over there. So, we can go ahead and give this a shot with Stitch. And this time, we're going to use um voice mode. And you could also use this mark tool here if you wanted to, where you can actually select on the website certain areas that you wanted to edit. But for the purposes of this, I'm just going to go ahead and use voice mode. Hey, what are we designing? We have a bunch of cartoon images on this website. Can you please go through them and change all of them? The one on the home page above the fold is a cartoon image that needs to change. The one of the about page um above the fold also needs to change. And then we've got two on the pricing page that we need to swap out as well. Can you please go ahead and change that? Cool. So, in about 20 or 30 seconds, it's gone ahead and changed everything. And so, here's the deal, right? We got home version one and home version two, and uh Stitch did not do a good job of picking up the details and changing things. Also, for the about page, it did it did end up actually working. And the pricing page, not so much either. So, the thing is is like I think Stitch is fantastic at actually going ahead and doing the first round of revision, especially when you give it some uh sample to work off of. But when you're starting to ask it to go into the details and change things, it usually hasn't worked very well for me, and I would rather get this stuff done in Claude Code because instead of going back and forth for 30 minutes trying to fight with an AI, >> [laughter] >> um which I've definitely done in the past, especially with Stitch and especially for preparing for this video, too, I'm just going to go with the Claude Code, which is going to do it like one shot. So, that's the first way that we can build beautiful websites is we can go to Google, and we can search for a website that we love, and then we can go ahead and copy it. The second way that we can do this is we can head over to a site like a Dribbble, which is a design website, and we can type in something like a landscaping uh website over here. And they have a bunch of pre-made templates that we can go ahead and grab. So, for instance, I don't know, this one looks good to me right here. So, we'll use this. You can save this to your computer and then just directly import it straight into Stitch. So, if we came back in here, I could essentially just click the plus button, upload the file, and then we're good to go. It's going to be able to reference that exact image and then build pretty much a replica for us. Again, this is what it looks like. You add in a image, and then it builds out exactly what it is you're looking for, however many pages, and it's going to take the entire um it's going to take the entire like design suite that it's pulled from the site and then apply it to yours. The third way that you can build beautiful websites is by hitting up a GitHub package like this. It's called awesome-design.md. This can be down below in the description for free. But essentially, you can clone your favorite websites. So, if you ever thought to yourself, "Hey, I want my site to look like Airbnb, or I want it to look like Airtable, or I want it to look like BMW, or Ferrari, or Lamborghini, or all of those kind of cool designs," you can come in here, grab the exact replica of it, and build it out. So, here's an example. I want to clone Wise, okay? And they have a package for that down here. And this is the result that I got off the first attempt. So, right away, looks very, very similar. Here's the actual site in action, in case you want to see it. And then we can even clone like the dashboard. So, if you're building a full-blown web application, of course, you can go ahead and use Stitch to be able to build the back end, front end, all of that kind of stuff. Okay, great. So, we've gone ahead and we've built out the graphics. Everything looks good. But now, what we need to do is build the actual website. And so, I'm going to get rid of this old home page and this old about page, and we're just going to continue forward with these five. I'm going to select every single page, hit export, and specifically, we're going to export this as a zip file so that we can import it into Claude Code. Now, if you guys are brand new to Claude Code, let me give you a 10-second crash course on how this works. You're going to first want to download a free software tool like Antigravity or like VS Code. Both of these work, and this is a coding workstation. I have Antigravity open in front of me. This is exactly what it looks like. Claude Code is going to live inside of one of these two tools. How you activate Claude Code is you go to the plugin section over here in extensions, and then you search for Claude Code for VS Code. It's the same plugin name for both. You download it, and now you have access to Claude Code. Okay, perfect. In order for us to build a website, the first thing that we need to do is we need to open a folder, okay? So, every single project inside Claude Code needs to start from within a folder. So, I'm going to create one here. We're going to call this YouTube uh {dash} Stitch, okay? We're going to create this. It's going to be a brand new folder. Open that up. The only thing we have to do to kickstart this project is add a new file, and this is going to be called claude.md. Long story short, all this is is we're telling Claude how to build. It's an instruction manual. Just like you hire an employee, you tell them how to do it job. In this manual, we're just telling it how it can go ahead and build out the website. How we get the information for that claude.md file is in the free school community in the description down below. You can head over to the class like Claude Code plus Google Stitch equals beautiful websites, and then grab this free blueprint down here. And all you need to do is copy this in and then paste it, and that's it. Now, from there, we can open up Claude by hitting the icon right over here, and then we can just type into it. And so, right before building this own, I probably should have done this maybe like 30 or 60 seconds ago, we need to make sure that the um the files that we exported are actually in our Antigravity scenario here or Claude Code scenario here. So, I've downloaded this file, and I'm just going to drag it into Antigravity, add it to the workspace folder, and now we have access to all of our files here. Every single page has two things. It has code, and it has a screenshot. You do not need to know a line of code whatsoever. Uh Claude Code is going to take care of all of that, but the screenshot shows you what the HTML would technically render inside the web. Cool. So, inside Claude now, let's build this out. Can you please build a beautiful website for me that's modeled after the Stitch designs that I've dropped into this project, pixel for pixel, please. So, the website has been fully deployed, and we can actually view it by clicking this localhost:3000 link here. Now, I just want to point out that this is technically not deployed on the internet. Nobody else can see this but me, but um the localhost:3000 is a development server, which is rendering all of these files that Cloud Code has built out for us. Now, the first thing is is that I swear this picture here is going to haunt me uh when I go to bed tonight. This is just like awful. This is the last thing you want to see when you tell Cloud Code and Google Stitch to build an attend $10,000 website This is like a negative 10,000 or a negative $100,000 website. At this point in time, if I was hiring from this company, they'd have to pay me to do my wedding. But anyways, I digress. We're going to fix that in the next prompt. I just wanted to point that out cuz I think it's freaking hilarious. And everything else is literally copied pixel for pixel here. Like if we just look at the design barring this freaking horrific picture here, everything else is is exactly the same. It's It There's pixel for pixel. Everything looks great. We can head over to the about section as well. Again, everything looks clean. Then we got the gallery section as well from past weddings that this fictitious company has done. And then we got the pricing section here. Again, these two pictures would have to be swapped out for something that doesn't look like a freaking cartoon or like a negative $2 wedding photography site. And again, picture like this needs to be swapped out too cuz clearly it's broken. And then we got the contact section over here. So, this is great. Takes about 10 minutes to get to this point in time, but there's a couple revisions that we need to do. Fortunately, we're going to have Cloud Code do it because if you're fighting back and forth with Stitch, I swear this would probably take like an extra hour to do. And so, that's why I'm just using Stitch for the first round of revision. We're finally going to get around to changing that, and we're also going to add in a whole bunch of elements onto the page to increase the conversion rate optimization. Page has been updated. Let's take a look at the results here. So, on the homepage, we've successfully managed to get rid of that absolutely freaking horrendous picture before. This is the photo of a wedding company that would have to pay me like $1,000 to even inquire with them, and this is actually quite beautiful. Only problem here is that of course their faces are cut off, so that's another revision we'd have to go back and forth with the AI to fix. Let's talk about conversion rate optimization and how you can structure a page to actually get results because obviously, beautiful websites well, beautiful, but beautiful websites also make $0. And so, if unless you're like building things as a hobby, you're probably trying to make money off of it. So, let's talk about how you can do that. First of all, there's two ways to make money on a website. First is that you sell something like e-commerce, or the second is that you have people inquire on a form that you later go ahead and call and convert them into a paying customer. Now, in order to set this up properly, we need tons of social proof. First one is if you've worked with brand names before, you should add them to your website. This is going to inspire trust and have more people inquire with you. There should be one row just like this where you say all of the brand names that you've worked with and that people recognize. The second thing is is that you'll want to add in all of your accolades. Now, I just added in three boilerplate ones here. Like we've done a thousand projects, and we have a five-star rating, and we've been in business for 10 years. But again, this is not an exhaustive list, and you can add in as many things as you want. But the more accolades and the more things that sound impressive to customers that you can add in here, generally speaking, the better. Next thing in here, which is the single biggest ROI that I think any business out there can uh make in a short amount of time is adding video testimonials to your landing page. If you are not doing this, you are missing out big time. Let me back that up with a personal story. Before I added video testimonials to a wedding business that I literally just sold last year, funny enough, I actually had a wedding business. But um before I added it, it cost me $200 to acquire a lead. It just wasn't profitable. We added nine video testimonials like this, and it dropped it to $30 per lead. Literally seven X cheaper just by one freaking tweak on my landing page. If you guys don't have this, you should add it. And here is another reason why. Because when people see written testimonials, they probably think it's AI, it's fake, or they just don't trust it. The only way that I would trust written testimonials is number one, if it's backed up with uh video testimonials because the pairing makes it seem way more legit. Number two is that if I didn't reverse search this image and find like literally a million different websites with this exact dude on it in every single time, which always makes me laugh because I'll sometimes look at testimonials that are clearly fake on other sites. Okay, perfect. Other than that, that's social proof. You want to have a call to action on every section of your landing page that drives them to take the action that you want, which is filling in the form so that you can go and call them and convert them into a paying customer. You can think about every web visitor as a dog in heat where at the right time, you need to drive them to the call to action. So, you should be having this at every single stage of your page. And the last thing on this page that I unfortunately didn't get Cloud to add for me, but every single landing page I believe needs is a video sales letter. It's a 30-second video of you selling yourself. You're not selling wedding services or SEO services. You're literally just saying, "I'm a real person. I'm putting a face to the brand. You can trust me and like me." And by me doing this, by the way, that increased my conversion rate by 5% from 10% to 15% with just this one change. It might take you 50 times to film the video to not look awkward or uncomfortable. You can take a look at my first YouTube video. I looked absolutely horrendous the first time I filmed. But you're you may have to go through this a couple times, but once you nail it, it's going to massively improve the uh the amount of people that are actually filling out your contact form. So, all that kind of stuff is going to drive conversions on your site. Now that we have a website that looks beautiful that can make money for us, we need to deploy this online cuz right now, it's currently just on a development server. How we do this is a two-step process. We need to upload our files to GitHub. You can think about GitHub like Google Drive. You just store your files there. And once they're online, then we use a platform called Vercel to deploy our site live so that anyone can view it. Both of these are free. So, how we're going to do this is we're going to head over to GitHub, okay, create a free account, and we're going to open up repositories and create a new one. I'm just going to call this Stitch or whatever. And we want to make sure this is a private repository, meaning that nobody else has access to it. We can create it, okay? And the only thing that we need to do is grab this exact code here by hitting that copy button, and then pasting that directly into Cloud Code. Now, it's going to deploy this project live for us. Then we can head over to Vercel, create an account if you haven't done so already, and add a new project, okay? And we need to connect GitHub and Vercel together. I've already done this, so I can I'm just going to skip this step. And now we can see the Stitch project. We can import this project in and build it live. The only thing is is under application preset, just make sure to choose Next.js here. And we can click deploy, and that's it. It's going to It's It's all done. The website is officially live, and anyone can access it through this link right over here. Now, just one of the thing is if you want to add your own domain to this, you can head over to the domain section. You can link up an existing domain from GoDaddy or from um I don't know, like Namecheap or whatever, or you can buy a domain straight through Vercel if you want to. So, that's it for this video, guys. Thank you so much for watching. All the blueprints are going to be down below for free for you to grab. If you liked this video, make sure to hit that subscribe button and the like button. And in my paid community, there's two transformations I help people out with. The first one is how you can find, close, and fulfill your first AI automation client within 30 days or less. And then obviously, rinse and repeat. And then the second transformation is for those of you who have existing businesses. I'll show you how you can automate up to 80% of an existing business using the exact blueprints that allowed me to scale to seven figures. All you have to do is copy, paste, and deploy it, and you're good to go. And if you don't want to do any of that, you can also reach out to my agency where we can deploy these systems for you. Thanks, guys, for watching, and I'll see you in the next one.