You see a stunning website design and think, "I want that exact look for my project." So, you screenshot it, paste it into cursor or chat GPT, and ask them to recreate it. But what do you get back? A janky mess that looks nothing like the original. The spacing's off, the colors are wrong, and it's missing half the elements. I know exactly why this happens. You're trying to make AI guess at designs instead of giving it the actual data it needs. Today, I'm going to show you three amazing methods that can clone any website. By the end of this video, you'll be able to take any design you love and have it running as your own project in minutes, not hours. So, jumping right in, the first method that I'm about to show you is actually something new that I just found. It's a really unique method of just taking designs that you like from already made websites or even web apps and then recreating them so you can go ahead and implement them on your own. I found this from John over at egghhead.io and he's given a full preview of the method here as well. So let's say we have a site here, Wall Haven, which is a wallpaper site and it has this general structure, right? Now, what if I just wanted to copy the structure and then implement everything or even use my own wallpapers on my own site? Well, first we need to capture the site. The method that John actually showed was that you could just go ahead and take a screenshot of the whole website using the inspect tab. Open it up, then press commandshiftp or on Windows control shiftp. This opens up the command runner. in there you type screenshot and then move to capture full-size screenshot. This will actually capture a screenshot of the whole site and save it to your downloads. So that's another trick. If you don't want to take multiple screenshots, this is how you can capture the whole site at once. After you capture the screenshot, you head over to Gemini and with the canvas feature turned on, you tell it to analyze the image. You can use a prompt like this which essentially tells it to recreate the design exactly as shown in React and it will clone the website design as you see right here. Even the discussions you see over there have been cloned and the wall haven stats have also been cloned right here. The text as well, it's just taken everything from it. In this example, it didn't take the images, but when I show you the comparison with clawed artifacts, you'll see that Gemini did take the image of the interface I gave it. So, that's a plus point. Once it's done generating, you'll see the result here. After that, you head into cursor and ask it to make a next.js app. You're also going to ask it to give you the file structure of the app it just created. It'll give you that file structure. And then you take that structure and paste it into Gemini. Then you paste this prompt, which I'll leave in the description as well. This prompt instructs Gemini to transfer the code into a Nex.js app using markers, which means splitting up the code, then generating a terminal script that reads these markers and inserts the code into your app. So you don't need cursor to break it down. It all happens here in Gemini. Okay. So this is what I gave it. It gave me the bash script. If I open it up, you can see it here. And it also gave me instructions on how to use it. The original code was saved as generated.tsx just like it told me to. Then I copied the script and saved it as integrated.sh. You can see that right here. After that, I ran two commands. One to make it executable and the other to execute it. It integrated the entire app into my source folder while automatically splitting it into components. After that, I ran the server and as always, it's not going to be perfect. There was one module error that I quickly solved, then installed some dependencies, and once those were done, the app was up and running. It's the exact interface from Wall Haven, and I can go ahead and implement my backend on this app if I want to. I found this approach really cool. Instead of just giving cursor screenshots or even getting it generated from Gemini or Claude and dumping the whole code file into cursor, I could actually use the integrate.sh script that automatically chops the code into pieces and integrates it. Obviously, there were some imports across files that needed fixing, but cursor automatically handled that. So, it's much better because Gemini maintains the context and can divide everything up properly rather than just dumping the code into cursor and hoping for the best. Now, if you're wondering whether we really need Gemini for this, let me show you a quick comparison between Gemini and Claude Artifacts. So, this was the image I gave to Gemini. It's the wallpaper page for Wall Haven. Like, when you open up a wallpaper, this is what you get. I gave it the exact prompt, and this is what it came up with. Now, the design is really, really similar. There are some minor color differences, but the interface is super clean. It even grabbed the image and placed it correctly, which is what impressed me the most. And if I go over to Claude, you can see I gave it the same image and the same prompt, but what happened was it came up with this, which has a lot of stuff missing. In my opinion, the Gemini version is much, much better. Oh, and if you're enjoying the content, please hit that subscribe button. We've also launched channel memberships. 93 people have already joined our first tier. Members get priority replies to comments, so if you need feedback or have questions, that's the best way to reach us. We're considering adding more tiers based on the incredible support so far. Now, the first method works great when you need to clone existing websites and implement your own designs. But what if you're given a Figma file like this one here and you want to convert those designs into code exactly as they appear? Well, that's where the second method comes in. The second method is using the Figma MCP. Now, you might think that it's been around for some time, but the author has upgraded it and it was already pretty amazing. But there is one single feature that makes it so much more powerful. Now, it's essentially running on my system as an SSE server that I've connected directly in cursor as you can see it right here. I've also made a detailed video about this MCP server, which I'll link in the description below. That video contains all the installation instructions you'll need. So, definitely check it out if you want to get this up and running. You'll also find all the relevant links there. But let me show you what this tool can do. So here's a trip app design that I found online and I wanted to implement it. After connecting the Figma MCP, I simply told Cursor that I'd like to create a mobile prototype using the tool. Then I provided links to all the pages and it automatically started calling the Figma MCP to fetch data from the entire file and then proceeded to get data from each page one by one. Now, let me show you the feature I'm most excited about, and it's one of the tools of the MCP server. Now, this MCP server only has two tools. Get Figma data and download Figma images. But this second one is so powerful. All the images you see in the design, like this avatar image, are automatically downloaded and placed into your project directory. They're then seamlessly integrated into the app. This is a gamecher because previously when you pasted a screenshot, cursor had to guess at recreating those images which often led to poor results. It simply couldn't recreate complex images accurately. But now with the download Figma images tool, it's become incredibly more reliable. You can actually see the folder structure over there. Avatars, frames, icons, they've all been downloaded and properly organized in the project. And after downloading all the images, since it had already read the file structure, it went ahead and implemented everything. So let's take a look at the results. This is what it managed to create. And honestly, it's quite impressive. If we open it up, we can see the app running. There's a slight formatting issue because of the device I selected. But you can see that everything has been implemented, including the avatars and all the images exactly as they appear in the Figma design. I should mention one limitation. It doesn't automatically implement navigation between screens. For example, I had to manually instruct it to make a card clickable to open a menu. It didn't know to do that on its own. However, when it comes to the actual page designs, it really nails the visual implementation. You can take any Figma template you want and simply provide the links. The tool handles the rest. Again, if you want to understand the complete process, especially the installation steps, please check out the video I mentioned. But the workflow itself is quite straightforward. To clone a design, you simply click on a frame in Figma, then select copy link to selection. Once you have that link, you just provide it to cursor, and it knows exactly what to do with it. What's also great is that you can work at different levels. You can select an entire page or just specific components. For instance, if I only want to clone this button, I can select it, copy the link to that selection, give it to cursor, and it'll recreate just that element exactly as designed. So, that's how the Figma MCP works. It's become an essential tool for anyone who needs to convert Figma designs into actual code efficiently. Now, before we move on to the third method, I want to share another tip that might help you out. You know how GitHub is full of open-source projects with interesting features? Let's say you find a note-taking app. Nothing super unique, but it has elements you'd like to incorporate into your own project. While you could clone and modify the entire repository, there's actually a smarter approach for building an MVP or drawing inspiration from existing projects. Here's the trick. In your browser's address bar, simply type git2doc, which takes you to the git 2d do website. This tool transforms any GitHub repository into documentation that cursor can understand and reference. The process is straightforward. First, copy the repository link from the git to doc site. Then go back to cursor and tell it something like, I want to build an MVP based on this app. You may use the docs for reference. When you add a new doc, paste the link in the input field. You can also name the documentation for easy reference later. Once added, cursor begins indexing the repository's full documentation. After indexing completes, you have access to all the architectural decisions, code patterns, and features of that repository right inside cursor. This means you can draw inspiration from proven implementations, understand how certain features work, or use it as a foundation for your own unique spin on the concept. So, the second method was perfect when you already had fully designed Figma files. But what if you simply want to clone an existing website? For example, let's take the Obsidian website. I think it has a really nice design. Let's say I'm building another note-taking app and want to use the same layout for my landing page. This method addresses that exact use case and it also uses another MCP tool. The third method involves using the Firecrawl MCP with its eight different tools. Firecrawl lets you provide a website link and clone it. Here's how it works. I told cursor that I wanted to clone the obsidian landing page using the firecrawl mcp and then provided the website link. It immediately called the firecrawl scraper tool which scrapes the entire website. The tool pulls all the data from the site including all the metadata behind it. If you were to open the inspect element and look at the div classes and structure, it captures all of that information. Using this data, it was able to map out the complete structure, extract all the text, and even grab the images since they're embedded in the site. Through those image links, it can fetch and download the assets as well. And here's what it managed to create, which I'd say is a remarkably accurate clone. The similarity is impressive. There are a few limitations, though. Some animations aren't fully replicated, and the graph here isn't interactive like the original. So, while there are elements we'd need to implement manually, the core structure is spot-on. It even captured all the images. Though, I should mention that copying images from someone else's website isn't typically useful when you're building your own product, unless you're creating an exact replica for testing or learning purposes. You can see the results here. It's cloned everything beautifully. Even the icons are perfect, and the overall layout matches the original precisely. Now, I should point out that the animations are a bit janky. When I interact with certain elements, they go out of frame. That's partly because I asked Cursor to implement this in plain HTML for simplicity. If we had used Nex.js instead, we'd have proper animations and better optimization overall. Currently, there's also some slight jittering when scrolling. Nothing major, but noticeable. This would have been resolved with a proper framework implementation. As for installation, we've created a separate video covering the Firecrol MCP setup, which I'll link in the description. If you're planning to install it, that video walks through all the necessary steps. One thing to note, Firecrawl is a paid service, but they offer generous free credits to start. You can scrape up to 500 pages before needing to upgrade to their $16 monthly plan. For testing purposes or occasional use, the free tier is actually quite sufficient. For more detailed information about this particular MCP and its capabilities, definitely check out the dedicated video. It's a comprehensive guide to everything Firecrawl can do. That brings us to the end of this video. If you'd like to support the channel and help us keep making videos like this, you can do so by using the super thanks button below. As always, thank you for watching and I'll see you in the next one.