WEBVTT 00:00:00.000 --> 00:00:36.010 As AI continues to reshape web development, cloning websites today has never been easier. In this video, I'll demonstrate how to use AI tools to replicate a website's design and structure so you can rapidly prototype, study layouts, or even build client ready pages in a few seconds. But what happens if you wanted to clone a function inside of a website? Can you do that? Well, the answer is yes. So let me walk you through how to clone a website using AI. Okay. And this is lovable. Dev, and this is the AI tool that we can use to pretty much clone any website that we come across on the Internet. So let's do it. Let's start cloning some websites. Now, I have two demo websites that I've chosen for this video. We have Wunderlust, 00:00:36.010 --> 00:00:37.850 and we also have DocCare. 00:00:37.850 --> 00:00:44.795 These are essentially Elementor templates that I sell on my websites. So I actually wanna go ahead and see if I can clone these using AI. 00:00:44.875 --> 00:01:16.895 So let's go back over here to Lovable. Now if you guys do not have Lovable, you guys can sign up for free. There is a link to Lovable in the video description, and you can use that to sign up for free and use some free credits. Okay. So let's do this. Now there's a few ways on how to do this. Right? The first thing that we're gonna do is go to our URL right here, and I first wanna get rid of all this weird text. Right? There we go. Alright? And I'm gonna take this, and I'm gonna copy it. There's my little pop up. Right? I know great design looks good. And we're gonna go to Lovable, and we're gonna ask it to clone it. So here we go. Can you please clone? 00:01:16.975 --> 00:01:27.990 And then all you gotta do is just hit enter twice, and then go ahead and paste in the link, and that is it. And then we're gonna see if this can actually, uh, generate us this website. So here, I'll go ahead and generate these websites. 00:01:27.990 --> 00:01:57.470 And then we're just gonna wait maybe, like, one to three minutes. And voila. Here is our cloned AI generated website. And I gotta be honest. It doesn't look bad at all. Now in order to get a better preview of the website, you need to view it from a new tab. This right here, it creates like a small distorted version. So let's go ahead and preview this in a new tab and compare it to the original design. Okay. So I'm gonna show you what this looks like versus the original, and then I'll give you a side by side comparison and let you be the judge on how accurate this was. So here's our landing page. Right? We have the two buttons. 00:01:57.550 --> 00:02:10.375 We have these social icons here on the right side, very similar to the original design. Now, the only difference here is that we just have padding issues. Right? If we put this here to the left side, and if we just made these social icons horizontal, 00:02:10.375 --> 00:02:18.615 I mean, it would be very close to the original design. So let's take a look at the next section and compare it. And then like I said, I'll give you all a side by side comparison of both websites. 00:02:18.775 --> 00:02:21.095 So scrolling down here, we have this section. 00:02:21.415 --> 00:02:24.590 And under Wunderlust, if we scroll down, we have this section. 00:02:24.830 --> 00:02:43.565 Very similar, you know, to the original design. They did sort of like add in their own touch and feel to it, but, uh, you get the gist. Right? They added in like three different sections. Right? Scrolling down, we have this section here with the sky with the camera. I love this little design they gave to it. Right? It looks looks looks cute. Right? It looks good. Let's go ahead and scroll down here. 00:02:43.885 --> 00:02:50.470 And if we look at these side by side, you can see that it is very similar. It's not 100% identical, but that's okay. 00:02:50.710 --> 00:03:09.335 And the only difference here really is that there's two images here, and on our cloned website, there is only one. But they do have the three little sections and then the button there at the bottom. Or I know the the button at the top. Right? So, yeah, they did kind of readjust it a little bit. No problem. And then the last section, we'll go ahead and take a look at the FAQs. 00:03:09.335 --> 00:03:12.535 And then below that, we also have the FAQs. 00:03:12.615 --> 00:03:18.670 Now, if you ever wanna make changes to something on your websites, you can instruct the AI, and you can even pick specific areas. 00:03:18.910 --> 00:03:19.790 For example, 00:03:20.030 --> 00:03:29.710 you'll click on this edit button, and what's really cool is you see these icons right here? I'm gonna click on this. Right? And I'm gonna instruct the AI to make this horizontal. 00:03:30.030 --> 00:03:32.670 Can you make these icons 00:03:33.845 --> 00:03:34.805 horizontal 00:03:36.165 --> 00:03:38.005 like the demo website? 00:03:38.405 --> 00:03:41.285 Okay. Let's go ahead and run this prompt. 00:03:41.605 --> 00:03:56.130 And bam. There we go. It's horizontal. So what's great about the AI here is that you can actually go pick specific things throughout your website and just say, hey. You messed up here, or I want you to fix this, or I want you to change that. And you can actually edit the AI website with specific sections. 00:03:56.370 --> 00:04:38.755 Now a long time ago, this actually was more difficult because you'd have to run prompts and generate the entire website all over again. But now with Lovable, you can actually kind of use it like a page builder almost. You can pick specific areas and just say, hey, I want you to fix this area. I want you to adjust this area and so on. So another thing right here is I'll go ahead and click on edits. And I'm gonna say, you know what? Put this button. So I'm gonna put move this button above the three columns right here. So I'm gonna go ahead and instruct the AI to move this button. And look at that. Now we have this, like, AI pays blur almost. Like, this is this is getting good. Right? I wanna clone a doctor's website. So I'm gonna try this one more time, and I'm gonna run this through the AI generator. Right? So I'm gonna go ahead and copy this. Now, if you do wanna clone a website again, 00:04:38.995 --> 00:05:00.015 I highly recommend to completely close the editor and start from scratch. The reason why is because I've noticed when you actually try to work off of a section that you're already building, the AI tends to take stuff from that previous design and drag it on to your new one, and you don't want that. So you gotta start from scratch. So I'll go ahead and open this in a new tab. And then I'm gonna ask it to clone this website now. Right? 00:05:00.495 --> 00:05:45.610 Okay. Go ahead and press enter. Now you can also do this an alternative way. So if for whatever reason this isn't working out for you, here at the bottom, you have this plus. You can actually attach an image and make a screenshot of a website and ask the AI to actually clone the website as well. I've actually seen that it produces similar results. Like, they're virtually the same. I think the link is just easier. Right? But if you do want to, you know, add an attachment and add an image of the website, you can go that route as well. Okay. So here's our design. Right? And here is the original design. You'll see that it's not, uh, exactly the same. And I think the reason why is because there's a lot going on here. Right? We have this box in the middle. We have these two boxes on the right side, and it might confuse the AI a little bit, but it did bring those boxes, but it just kinda put them, like, you know, throughout the website. 00:05:45.690 --> 00:05:52.355 And here is our about us section, and here we have this about us. We have some text, an image here on the left side, and then we have four 00:05:52.595 --> 00:06:37.060 squares below that. Going to our demo website, we have a similar design. You know, they put the image here on the right side instead of the left side. That's okay. And for our next section here, have the r impact. And here we have these numbers on the right side with a call to action on the left side. The AI looks like it didn't make it exactly the way it was supposed to look. So they put the numbers below that. Now a quick fix here would just be to tell the AI, hey, look at the design again. Uh, put this here on the left side and the numbers on the right side. I'll tell you what, let's try it out. Okay. So I'm asking the AI now to redo this section and make it look closer to the original design. So now you'll see that it's more closer to the original design. Right? We have the call to action on the left side and we have the numbers with bullet points on the right side. So here is a general side by side comparison of both websites. 00:06:37.380 --> 00:06:43.460 I'll let you be the judge, but I do think that the AI did a really good job at getting as close as possible to cloning this websites. 00:06:46.275 --> 00:07:25.255 Now, cloning websites sounds great and everything. Right? You can clone websites, get the design, and work from there. But what happens if you wanted to clone a function inside of a websites? Can you do that? Well, the answer is yes. So let me walk you through this. So me and my team, we wanted to build an AI directory website that virtually listed AI tools. Now, here are a few websites that actually do this. So there's one right here, and if you click on it, it creates this pop up. I personally think this is a very cluttered messy website. Right? But this just gives you like a general idea of what these sites look like. So they have the list of the AI tool, and then you can go visit the tool. Right? Now, I wanna make my own. So what we did here was we actually built our own AI directory websites. 00:07:25.335 --> 00:07:29.335 So this was actually built with WordPress. And here, we have this filterable gallery. 00:07:29.495 --> 00:07:30.535 We have these tags, 00:07:31.120 --> 00:07:32.160 price. 00:07:32.160 --> 00:08:32.730 And then below that, I actually, uh, go ahead and click on this right here, it makes this pop up where we can actually view the actual app. Right? So there it is. Or I can just click on get this AI tool. Now, what we can do here is you can find a directory website, and you can actually ask the AI to clone the website and its features. So here's my clone websites, and here is the original. So I'll give you all a side by side comparison of both websites right here. They do look pretty similar as you can tell. So the thing is here, we have this clone web but how do we add the features inside of this cloned websites? So if I actually scroll down, it's like we have all this demo content. This ain't gonna work for us. Right? And if I click on this image, nothing happens. However, if I go to my website and I click on it, we have this pop up. So how do we get this done? Right? Well, what we can do is we can go over to the AI, and I'm gonna instruct it now to create a pop up module with more information when someone clicks on the image. So what we can do here now with AI is we can clone the websites, and then we can start adding in features and functions inside of these AI generated websites. 00:08:32.810 --> 00:09:09.330 So here, I'll go ahead and run this prompt. Okay. So I went ahead and integrated a pop up module feature. So if I click on this now, you will now see that it creates this pop up module with more description, key features, the pricing, and then here we can visit the actual websites. Now, you can also instruct it to add affiliate links inside of here as well. So if you do wanna promote something and you want your, you know, commissions, you can say, put my affiliate link for this one, give them the link and they'll do it. So I hope you all enjoyed this video. Cloning websites today is getting easier and easier. Now, from what I've showed you all today, you know, a year ago, that was not possible. A year later, this is possible. So two years from now, 00:09:09.650 --> 00:09:30.145 uh, I'm very curious to see what these AI tools are gonna do. Because every year, these AI tools, they evolve at a rapid rates compared to other CMS platforms, unfortunately. So we're gonna have to see what the future holds with all these AI tools. I hope you guys enjoyed this video. If have any questions for me about AI or anything else, let me know in the comments below, and I'll do my best to get to all of your comments. My name is Daryl Wilson, and I will see all of you party people later.