Transcription
Now, in 2015, I built a real estate website for my real estate business. And today, I'm going to rebuild that exact same website using Claude and Lovable in real time on this video. And by the end, you're going to see the site that I paid for, which was actually through my CRM, spent thousands on. I'm going to rebuild it in under an hour for essentially nothing.
So, if you own a business or if you're a real estate agent or if you've ever been quoted tens of thousands of dollars to build a website and thought that there has to be a better way, this is the better way.
So, just for some quick context so you understand what we're doing. Lovable is an AI platform that builds full websites from a conversation. You tell it what you want, it builds it. It's live. It's real code. Now, Claude is my brain. Claude writes the prompts, plans the site structure, creates the copy, and directs the entire build. So, when you put those two tools together, you get something that didn't exist even a year ago. A single person with no coding experience can build a professional website in the time that it takes to watch a movie.
So, I'm going to pull up my old real estate site now, and you're going to see essentially what I paid for. Then, I'm going to open Claude and Lovable and rebuild it from scratch. All right. So, what you're looking at is my old website. This is 100% pure garbage. Okay.
So, here's what I'm going to do. Now, what you need to do it this way is especially if you already have a website, you're going to need the Claude Chrome plugin. So, you're going to have to use Google Chrome and you're going to have to have that Claude plugin. Okay. So, let me go back to the site. So, I'm going to open up the side panel. Okay. So, when I click and I open up the side panel, it brings up the this panel right here. So, the prompt that I'm putting in says, "I want you to give me the prompt to rebuild my real estate agent website in Lovable, make it modern, and make it better." Okay, so I'm going to go ahead and send that off. So, what this allows Claude to do is to actually see what is on my screen. Okay, so now it's asking, um, if it can do some things. So it says, "Read the current website, extract key information as far as the branding, the services, listings, contact information, and any unique selling points. Identify areas for modernization and improve in design. Generate a comprehensive, ready-to-use, Lovable prompt to rebuild the site with a modern design." All right, so I'm going to click "Approve Plan." And right now, it's analyzing the site. Um, and it's going through everything. It's going to go through. It's going to start taking pictures, um, and give me the prompt, and then I'm going to copy that prompt and then I'm going to switch over to Lovable and then just paste the prompt in, and then we're going to go from there. All right. So, just like that, it's giving me the prompt. Waiting for it to finish, and then I'm going to copy and paste this into Lovable. Okay. So, I'm going to come over to Lovable. Okay. So I have the entire prompt in Lovable. So now I'm going to send it off. [snorts] So let's see what Lovable comes up with. All right. So it's done building. So what I'm going to do, I'm going to come over here to the right-hand side and click this. And it's going to show us the website. Big reveal.
Now, just first glance, uh, I'm not a fan of it, but I'm I'm going to give you all some game on how you can really hype this up. So, like, I don't even know who this is, which I'm It's not a big deal. I can I can change this picture. Um, but it it it did a decent job. Okay. So, you know, it has it pretty it did what it was supposed to do. All right. This is This website is better than the last one, right?
So now there's a website called 21st.dev. 21st21st.dev dev. Now this is the source for you right here. All right. So let me uh move the screen over so that you all can see. Now 21st.dev dev. It has pretty much free websites that are already made, and you could just come here and get the prompt and bring it over in the in the Lovable and make you a better make yourself a better website. So, you know, it's one of those things you got to kind of go through. So, as you can see, they got "Best of the Week," they got "Themes." They got, let me see, let me go to "Themes." So, they have themes that you can have, "Top Authors," meaning people that created these, um, you know, and you can pretty much just click on one. So, I'll click on this one right here. And then, as you can see right here, "Copy Prompt." So, then you bring this into Lovable. So, I'm going to go through these and find one that I think is, you know, better than what Lovable created. Um, now don't get me wrong, it did a it did a a better job than what I had there, but I want I want something that's that's sexier.
Okay, so one thing that I wanted to throw in here, this top section is called "Hero." So when we are on uh 21.dev over here on the right-hand side, and I'll move it so that you all can see where it says "Heroes" right here. That is the top portion of the website. This is considered a hero. Okay, so you can get your heroes or the top portion of the website from here. Um, and I actually selected one. Earlier in the video, as you saw, the hero looks different. Um, at first it had the homes in the background. Um, but I'm still looking for a hero. And again, you know, because these are free, you can essentially just click on them, copy the prompt, and find different ones until you find the one that fits your style. And of course, as you go down, there's images, there's footers, meaning the the base of the website, you know, how you want the base to look. Um, you you can pretty much build the entire thing out just from copying uh these prompts here and then going into Lovable and further customizing them.
Now, there's something else that I want to show you on Lovable. [snorts] So, down here at the bottom left, it says "Visual Edits." Okay, if you click that button, you can actually come into the website. So, for example, this picture that was supposed to be me, I can click on that and then I can right here at this bar as Lovable, right? I can say, "Hey, change that." Or I can click these words right here as Lovable, you know, make these changes. Um, so that's the visual edit tab right there.
Now, the other thing that I want to show you, which is something else that is very important, on the very top up here at the top, when you click this, it shows you what it looks like on an iPad. It shows you what it looks like on the mobile version. So, when you're building it, it's something that you really want to pay attention to just to make sure that your website fits all platforms because you're going to have some people that may be using a television. You're going to have some people that are using a computer, using an iPad, using a cell phone. So, you want to keep that in mind. um you know that you look at these things while you're building it out.
So, I didn't want to make this video too too detailed. I just wanted to show you all how easy and how basic it is to build a website using Claude and Lovable. Now, you don't have to use Claude. You can jump straight into Lovable, but I think that Claude does a good job of getting you a good product fast and then you can tweak it using Lovable and, you know, 21st.dev Dave as an example to then piece it together, piece the hero together, piece the footer, and piece everything in the middle together to come up with a pretty decent product that looks high-end without you having to spend the high-end dollars.
But again, if you found this helpful, make sure you all like, comment, subscribe. Let me know what you think down in the comments. I read every comment. Thanks for watching.