00:00As AI continues to reshape web development,
00:02cloning websites today has never been easier.
00:04In this video, I'll demonstrate how to use AI tools
00:06to replicate a website's design and structure
00:08so you can rapidly prototype, study layouts,
00:11or even build client-ready pages in a few seconds.
00:14But what happens if you wanted to clone a function
00:16inside of a website?
00:17Can you do that?
00:18Well, the answer is yes.
00:20So let me walk you through how to clone a website using AI.
00:22Okay, and this is lovable.dev,
00:24and this is the AI tool that we can use
00:26to pretty much clone any website
00:27that we come across on the internet.
00:29So let's do it.
00:29Let's start cloning some websites.
00:31Now, I have two demo websites
00:33that I've chosen for this video.
00:34We have Wanderlust, and we also have DocCare.
00:37These are essentially elementary templates
00:39that I sell on my websites.
00:41So I actually wanna go ahead and see
00:42if I can clone these using AI.
00:44So let's go back over here to lovable.
00:46Now, if you guys do not have lovable,
00:48you guys can sign up for free.
00:49There is a link to lovable in the video description,
00:51and you can use that to sign up for free
00:53and use some free credits.
00:55Okay, so let's do this.
00:56Now, there's a few ways on how to do this, right?
00:58The first thing that we're gonna do
00:59is go to our URL right here,
01:01and I first wanna get rid of all this weird text, right?
01:04There we go, all right?
01:05And I'm gonna take this, and I'm gonna copy it.
01:07There's my little pop-up, right?
01:09I know great design, looks good.
01:10And we're gonna go to lovable,
01:11and we're gonna ask it to clone it.
01:13So here we go.
01:14Can you please clone?
01:17And then all you gotta do is just hit enter twice,
01:19and then go ahead and paste in the link,
01:20and that is it.
01:21And then we're gonna see
01:22if this can actually generate us this website.
01:25So here, I'll go ahead and generate these websites,
01:27and then we're just gonna wait
01:28maybe like one to three minutes.
01:30And voila, here is our cloned AI-generated websites.
01:34And I gotta be honest, it doesn't look bad at all.
01:36Now, in order to get a better preview of the website,
01:39you need to view it from a new tab.
01:41This right here, it creates like a small distorted version.
01:43So let's go ahead and preview this in a new tab
01:45and compare it to the original design.
01:47Okay, so I'm gonna show you
01:48what this looks like versus the original,
01:49and then I'll give you a side-by-side comparison
01:51and let you be the judge on how accurate this was.
01:55So here's our landing page, right?
01:56We have the two buttons.
01:57We have these social icons here on the right side,
02:00very similar to the original design.
02:02Now, the only difference here
02:03is that we just have padding issues, right?
02:05If we put this here to the left side,
02:07and if we just made these social icons horizontal,
02:10I mean, it would be very close to the original design.
02:12So let's take a look at the next section and compare it.
02:15And then, like I said,
02:15I'll give you all a side-by-side comparison
02:17of both websites.
02:18So scrolling down here, we have this section,
02:21and under Wunderlust, if we scroll down,
02:23we have this section.
02:24Very similar, you know, to the original design.
02:27They did sort of, like,
02:28add in their own touch and feel to it,
02:30but you get the gist, right?
02:32They added in, like, three different sections, right?
02:35Scrolling down, we have this section here
02:37with this guy with the camera.
02:38I love this little design they gave to it, right?
02:39It looks cute, right?
02:41It looks good.
02:42Let's go ahead and scroll down here,
02:43and if we look at these side-by-side,
02:45you can see that it is very similar.
02:47It's not 100% identical, but that's okay.
02:50And the only difference here, really,
02:52is that there's two images here,
02:53and on our cloned website, there is only one,
02:56but they do have the three little sections,
02:59and then the button there at the bottom.
03:01Or, no, the button's at the top, right?
03:03So, yeah, they did kind of readjust it a little bit,
03:05no problem.
03:06And then the last section,
03:07we'll go ahead and take a look at the FAQs,
03:09and then below that, we also have the FAQs.
03:12Now, if you ever want to make changes
03:14to something on your website,
03:15you can instruct the AI,
03:16and you can even pick specific areas.
03:18For example, you're going to click on this edit button,
03:21and what's really cool is you see these icons right here?
03:24I'm going to click on this, right?
03:26And I'm going to instruct the AI to make this horizontal.
03:30Can you make these icons horizontal,
03:35like the demo website?
03:38Okay.
03:39Let's go ahead and run this prompt.
03:41And bam, there we go.
03:42It's horizontal.
03:43So, what's great about the AI here
03:45is that you can actually go pick specific things
03:47throughout your website
03:48and just say,
03:48hey, you messed up here,
03:50or I want you to fix this,
03:51or I want you to change that.
03:52And you can actually edit the AI website
03:54with specific sections.
03:56Now, a long time ago,
03:57this actually was more difficult
03:59because you'd have to run prompts
04:00and generate the entire website all over again.
04:03But now with Lovable,
04:04you can actually kind of use it
04:05like a page builder almost.
04:07You can pick specific areas
04:08and just say,
04:09hey, I want you to fix this area.
04:10I want you to adjust this area and so on.
04:12So, another thing right here
04:14is I'll go ahead and click on edits.
04:16And I'm going to say,
04:16you know what?
04:17Put this button.
04:18So, I'm going to put,
04:18move this button above the three columns right here.
04:21So, I'm going to go ahead
04:21and instruct the AI to move this button.
04:23And look at that.
04:24Now, we have this like AI page builder almost.
04:26Like this is getting good, right?
04:28I want to clone a doctor's website.
04:30So, I'm going to try this one more time
04:32and I'm going to run this through the AI generator, right?
04:34So, I'm going to go ahead and copy this.
04:36Now, if you do want to clone a website again,
04:38I highly recommend to completely close the editor
04:41and start from scratch.
04:42The reason why is because I've noticed
04:43when you actually try to work off of a section
04:47that you're already building,
04:48the AI tends to take stuff from that previous design
04:51and drag it onto your new one.
04:53And you don't want that.
04:53So, you got to start from scratch.
04:55So, I'll go ahead and open this in a new tab.
04:57And then I'm going to ask it to clone this website now, right?
05:00Okay.
05:01Go ahead and press enter.
05:02Now, you can also do this an alternative way.
05:05So, if for whatever reason this isn't working out for you,
05:07here at the bottom, you have this plus.
05:09You can actually attach an image
05:10and make a screenshot of a website
05:12and ask the AI to actually clone the website as well.
05:15I've actually seen that it produces similar results.
05:18Like they're virtually the same.
05:19I think the link is just easier, right?
05:21But if you do want to, you know,
05:23add an attachment and add an image of the website,
05:26you can go that route as well.
05:27Okay.
05:27So, here's our design, right?
05:29And here is the original design.
05:30You'll see that it's not exactly the same.
05:33And I think the reason why is because
05:34there's a lot going on here, right?
05:35We have this box in the middle.
05:37We have these two boxes on the right side.
05:38And it might confuse the AI a little bit,
05:41but it did bring those boxes.
05:42But it just kind of put them like, you know,
05:44throughout the website.
05:45And here is our About Us section.
05:47And here we have this About Us.
05:48We have some text, an image here on the left side.
05:51And then we have four squares below that.
05:53Going to our demo website, we have a similar design.
05:56You know, they put the image here on the right side
05:58instead of the left side.
06:00That's okay.
06:00And for our next section here, we have the R Impact.
06:03And here we have these numbers on the right side
06:05with a call to action on the left side.
06:07The AI looks like it didn't make it exactly
06:09the way it was supposed to look.
06:11So, they put the numbers below that.
06:13Now, a quick fix here would just be to tell the AI,
06:15hey, look at the design again.
06:17Put this here on the left side
06:18and the numbers on the right side.
06:19I'll tell you what, let's try it out.
06:21Okay.
06:21So, I'm asking the AI now to redo this section
06:24and make it look closer to the original design.
06:26So, now you'll see that it's more closer
06:27to the original design, right?
06:29We have the call to action on the left side
06:31and we have the numbers with bullet points
06:32on the right side.
06:33So, here's a general side-by-side comparison
06:35of both websites.
06:37I'll let you be the judge,
06:38but I do think that the AI did a really good job
06:41at getting as close as possible
06:42to cloning this website.
06:46Now, cloning websites sounds great and everything, right?
06:48You can clone websites, get the design
06:50and work from there.
06:51But what happens if you wanted to clone a function
06:53inside of a website?
06:54Can you do that?
06:55Well, the answer is yes.
06:57So, let me walk you through this.
06:58So, me and my team, we wanted to build
06:59an AI directory website that virtually listed AI tools.
07:03Now, here are a few websites that actually do this.
07:05So, there's one right here.
07:07And if you click on it, it creates this pop-up.
07:09I personally think this is a very cluttered,
07:11messy website, right?
07:12But this just gives you like a general idea
07:14of what these sites look like.
07:15So, they have the list of the AI tool
07:17and then you can go visit the tool, right?
07:19Now, I want to make my own.
07:20So, what we did here was we actually built
07:22our own AI directory websites.
07:25So, this was actually built with WordPress
07:26and here we have this filterable gallery.
07:29We have these tags, price.
07:32And then below that, if I actually go ahead
07:34and click on this right here,
07:35it makes this pop-up where we can actually
07:37view the actual app, right?
07:39So, there it is.
07:40Or I can just click on get this AI tool.
07:43Now, what we can do here is you can find
07:44a directory website and you can actually ask the AI
07:47to clone the website and its features.
07:49So, here's my cloned website and here is the original.
07:52So, I'll give you all a side-by-side comparison
07:54of both websites right here.
07:56They do look pretty similar as you can tell.
07:58So, the thing is here, we have this cloned website,
08:00but how do we add the features inside
08:02of this cloned website?
08:03So, if I actually scroll down,
08:05it's like we have all this demo content.
08:06This ain't gonna work for us, right?
08:08And if I click on this image, nothing happens.
08:10However, if I go to my website and I click on it,
08:13we have this pop-up.
08:14So, how do we get this done, right?
08:15Well, what we can do is we can go over to the AI
08:18and I'm gonna instruct it now to create a pop-up module
08:21with more information when someone clicks on the image.
08:25So, what we can do here now with AI
08:26is we can clone the website
08:28and then we can start adding in features and functions
08:30inside of these AI-generated websites.
08:33So, here I'll go ahead and run this prompt.
08:35Okay, so went ahead and integrated a pop-up module feature.
08:38So, if I click on this now,
08:39you will now see that it creates this pop-up module
08:41with more description, key features, the pricing,
08:45and then here we can visit the actual websites.
08:47Now, you can also instruct it
08:49to add affiliate links inside of here as well.
08:51So, if you do wanna promote something
08:52and you want your commissions,
08:54you can say, put my affiliate link for this one,
08:56give them the link and they'll do it.
08:58So, I hope you all enjoyed this video.
08:59Cloning websites today is getting easier and easier.
09:01Now, from what I've showed you all today,
09:03you know, a year ago, that was not possible.
09:06A year later, this is possible.
09:07So, two years from now, I'm very curious
09:10to see what these AI tools are gonna do
09:12because every year, these AI tools,
09:14they evolve at a rapid rate
09:16compared to other CMS platforms, unfortunately.
09:18So, we're gonna have to see what the future holds
09:19with all these AI tools.
09:21I hope you guys enjoyed this video.
09:22If you have any questions for me about AI or anything else,
09:24let me know in the comments below
09:25and I'll do my best to get to all of your comments.
09:27My name is Daryl Wilson
09:28and I will see all of you party people later.
Comments