Visually Clone Websites with Gemini 2.5 Canvas for Cursor
Recreating web UIs manually can be time-consuming. This lesson demonstrates using Google Gemini's multimodal features to generate UI code directly from screenshots. See how to capture a webpage, provide the image to Gemini, and prompt it to generate a...
Access
Free
Transcript
Available
Recreating web UIs manually can be time-consuming. This lesson demonstrates using Google Gemini's multimodal features to generate UI code directly from screenshots. See how to capture a webpage, provide the image to Gemini, and prompt it to generate a React/Next.js and Tailwind CSS representation. The lesson also covers refining the AI's output using annotated screenshots for corrections and integrating the generated code into a local development project, speeding up the initial UI scaffolding process.
Workflow demonstrated in this lesson:
Use browser dev tools to capture full-page screenshots of a target website.
Upload screenshots to Google Gemini and prompt it to generate UI code (React/Next.js/Tailwind).
Refine AI output using additional annotated screenshots for feedback and corrections.
Set up a basic Next.js project locally.
Use an AI-generated bash script to parse the generated code, split it into components, and integrate it into the local project structure.
Install necessary dependencies (like icon libraries) identified during the process.
Debug issues in the integrated code, potentially using in-editor AI assistance.
Run the local development server to view the AI-assisted UI clone.
Key benefits:
Reduces the time needed to create initial UI structures based on existing designs.
Utilizes AI's image understanding to translate visual layouts into code.
Shows a workflow for refinement using visual feedback (annotated screenshots).
Provides an example of integrating AI-generated code into a development project.
In the site you want to clone, open the DevTools, press Command-Shift-P and say screenshot and we'll capture a full-size screenshot. Hit enter and then you'll see it downloaded it. From there we'll open Gemini and with canvas enabled we'll grab our screenshot, drag it in, and then ask Gemini, please recreate this entire page in React. Paste that in, hit enter, and then just give it time. Once it's done it'll switch over to preview mode and you can see a pretty dang good representation of the site that you asked for.
If you need to call out any specific changes that it missed, for example, I'll go back here, close the DevTools, and I'm going to use CleanShot, which is my screenshot tool. Highlight this section, open the Annotate tool, draw a red arrow, then drag it over to this tab, paste it in, then tell it you forgot to add the year selector from the sidebar. Can you please make sure to add that in? Hit enter, then let it continue working. Now this does take a while so you'll just have to go do something else, watch a YouTube video or whatever, and you don't get a total time spent like you do in AI Studio.
So we'll see if they eventually bring a canvas to AI Studio, which might provide a better experience, or if they add more features to Gemini. Alright, looks like it's done here. We'll scroll down and we can see a year selector and I'm gonna make one last request here by selecting the contribution graph, going back to this tab, just dragging it in. Please add some mock data for the contribution graph. Just set it up in a way where I can eventually hook up a data source to it.
But I'd like the months and the little green squares all set up and ready to go. And just let it work on that. So that didn't work. We can check the console to see if anything happened, but nothing happened. So we can definitely take a screenshot here and bring this in.
And we'll do one last, I don't see any of the mock data represented in the contribution graph. Please double check your work. All right, looks like we got some decent contributions here. So let's go ahead and take this into a project. Obviously, none of this UI is really going to work and if you think you're going to use an AI to vibe code GitHub, you're just kidding yourself.
So now this is close enough, we have some green squares and we have a lot of the UI and icons and colors and everything that look great. So the next step is to bring it into our project. So I'm going to swap over to this Gemini demo empty project, open the terminal with control backtick, press command K and say, please generate a Next.js project in the current directory, make sure it's on latest and it's using TypeScript and Tailwind. Paste that in, hit submit, then that'll be generated. I'll hit command-enter to run this, select some of the defaults, and with this setup we can run pnpm dev and then on port 3000 you'll see our Next.js project.
So what we're going to do is go back, I'm going to Ctrl-C to stop this, I'm going to use my FileForge tool, FFG, which I've mentioned before but I'll call it out here on npm. So with this installed globally I can use FileForge to grab the source directory and I'm going to copy this to the clipboard with dash y. Then go back to Gemini over on this tab. I'm going to paste this in and I typically like to add three dashes as like a horizontal rule or page break. I honestly don't know if it impacts anything but I like the idea of having a break between stuff I've pasted in and then things that I want to say.
So I'm going to say here's my current project. My goal is to take the code that you've generated and integrate it into my current project as the home page. My idea is to save the code you've generated as a file named generated.tsx at the root of my project and I'm asking you to write a bash script which will take the generated.tsx file, split it up into components into my project so that this is all done programmatically from what currently exists. Feel free to add markers to the code in the form of comments or anything to help split that code up so that the bash script can easily chop up the file you generated and then end with writing the bash script which can parse the generated.tsx and essentially apply it to my current project. We'll paste that in, hit enter, and just wait.
Alright looks like it's all done. I imagine our code isn't rendering due to some of the markup it added or it looks like it's exporting default multiple times maybe. So I'll just go ahead and give this a shot. I'll click copy here, back my project, create a file called generated.tsx, paste everything in, swap back over, we need to grab the script it made. Looks like we need to open it.
And based on how this worked when I clicked open, it definitely looks like we're going to have a file tree or something here eventually where it supports multiple files. Because this completely replaced the code from above, I'd have to scroll all the way back up here and click on open to get back to the code. But let's go back down, open the bash script, we'll copy this, and it wants us to name it integrate script. Give this a try, integrate underscore script dot sh, then paste in the content. And then like it says in the steps we do need to make this executable.
If you've never done this before, chmod plus X will make a script executable. So we'll just paste this in, run that. I'll clear this out with command Z. And now if we type .slash, so run this from the current directory, integrate script, hit enter, this might work. Let's check our source directory, we have app, here's our new page, and here's our components, activity item, contribution graph, etc.
We need to make sure that We install the dependencies, so install Lucid React. So swap back, pnpm install Lucid React. And then let's try pnpm dev. And if we're lucky enough, this will look something like our generated code. I'll come here, hit refresh.
It looks like we do need to fix some Next.js errors. I'll just click this to copy, swap back over. I'll just hop into the agent, click paste, hit enter. This is definitely a battle for me where this is super lazy where I'm just supposed to type use client at the top of a file, but the agent can do it too. So swap back over and we have a similar error for our app.
So we'll copy this, paste it in, hit enter, because development is all about copy and paste. Swap back. Looks like something in our helper has got messed up with Gemini. So we'll just copy this and let our agent fix this as well. All right, it says it's fixed.
Clearing up another error, copy and paste, hit enter. And that's done, so we'll check on it. And I'll just continue this cycle until everything is cleared up. Now it's debatable whether copy and pasting the entire file from Gemini and then asking the agent to split it into pieces would have worked better than this approach of trying to write a script to split it into pieces. My reasoning for using a script to do it programmatically is because there are a lot of class names and colors and icons and if one of those broke it would have been very difficult to, well very difficult relatively to just asking an agent to fix these code issues.
Very difficult to hunt down the exact style and exact line that would have that maybe got messed up. So let's check on this And here's our Create Next app. So we have everything implemented. We can compare side by side. Let's pull this out.
And then I just brought this into another space. And you can definitely see while this is far from perfect on our end, there are a lot of little things like bold fonts over here. It's missing this drop down over here, there's too much space on this side, but for a few minutes of work I think it did an absolutely fantastic job. So kudos to the Gemini team for being able to pull off something this high quality.