Building Premium Websites with Claude Code and Nano Banana 2
Jack Roberts demonstrates how to build professional, responsive websites using AI tools, from brand extraction to SEO optimization and client delivery.
Summary
Jack Roberts, founder of a profitable AI automation business and former tech startup owner, walks through building complete websites using Claude Code and Nano Banana 2. He demonstrates extracting brand assets from existing websites, generating custom 3D animations with AI, building HTML sites from scratch or by replicating existing designs, deploying to live domains via GitHub and Vercel, adding multiple pages with consistent design systems, and running comprehensive SEO audits — all using AI tools with minimal manual coding. The tutorial focuses on creating client-ready websites at scale, positioning this as a service business model.
Key Takeaways
FULL TRANSCRIPT
Introduction to AI Website Building
Jack Roberts: You can now build beautiful and responsive websites in minutes thanks to brand new capabilities in Claude Code and Nano Banana 2, even if you've never coded before. And in this video, I'm going to share exactly how to build premium websites quickly that are mobile responsive, SEO optimized with multiple pages, and look beautiful unlike the AI slop that you see in other places so that you can turn your viewers into buyers or blow your clients away.
And if you don't know who I am, my name is Jack Roberts. I built and sold my last tech startup with over 60,000 customers and now I run a very profitable AI automation business. So, if you haven't already, grab that coffee and let's dive straight in.
We're going to cover techniques that I have never seen discussed anywhere else where you can one-shot websites that look just like this. I'm going to show you how you can get 3D responsive websites with animations that look really beautiful, easier than ever before. That includes things like this with animated backgrounds and also laptops that move up and down. Whatever the image is, we can actually build it and get beautiful animations wherever we want.
Step One: Brand Identity and Purpose
Jack Roberts: We can build all of this across five very simple steps. The first of which is the beating heart of the website, which is the brand identity and its purpose. So, for example, on this one here, you'd have like a manga. But we're going to use an example for a different website. Let's say for instance that we wanted to sell this to a business. So, the brand that we're going to use on this one is a UK brand called Any Van. Random company, no affiliation at all, but they basically move stuff for you.
Let's say that we wanted to build this company a website to sell them. And I've sold websites for thousands and thousands of dollars. And some of the techniques I'm going to show you are going to blow you away.
What we would do is first of all, we'd come over to Firecrawl.dev to do a brand extraction. So, on the left hand side, I want you to come up to scrape and I want you to come over — excuse me, I'm going to clear my throat. That's how important this is. Come down to markdown and then just click on branding.
Now, what this will do is go ahead and grab all the brand assets from that. The cool thing about Firecrawl is they have an API. So we can actually put that into anti-gravity and a Claude Code skill. So basically if we want to do this at scale adding an item, we could physically do that with that information.
It looks like we have scraped Any Van. And if we come down to branding, we can see we have all of the information. So this is going to be important when we actually build out this company's brand new website. We may still do this in anti-gravity, but we just want to get a starting point.
Creating Animated Assets with Nano Banana 2
Jack Roberts: We want to come over here to Nano Banana 2, which is very, very cool, which is the latest, most powerful model. Now, we want to be here, and we want to go for probably, I'd say, 16x9 for the actual website that we're going to do, which is going to be wonderful.
What we need to do is get a couple of things. We need a start image. We need a deconstructed version of that image. And then we want an actual video that combines them together. Now, previously, we'd have to go into different websites. With Claude Code, we no longer have to do any of that. But we don't really want to have something where we have to figure out the prompt because the prompt is the most important part.
Once you understand exactly the brand identity, the colors, and you got the logos, the next thing we need to do is go ahead and grab a skill that will help us create prompts for our image generation. So step one is to come to the resources and download the asset generation skill. It'll be available for you down below in the description.
Click on the left hand side and install Claude. And once we've added the skills in, you will see them appear right here. And then you're going to double click and then summon Claude. And then you want to come down here forward slash and use the skill creator. If you don't have this available, you can install it or just speak to Claude directly and tell it to build a skill with the 3D asset generator on the left.
Once that's done, basically Claude Code will go ahead and test that for you. So you can see it's actually really good. You can go through the whole process and improve it. And it's even come down here with three different examples.
Then once that's complete, come down to forward slash and do a scroll stop prompter. And then you're going to enter in a prompt. We're going to say, "Hey, using the skill, build me a HTML view from a moving company which is full of furniture, and I want the visuals to be the back of a van exploding full of items."
And then it will create a gorgeous HTML interface for us to use and copy the prompts. So, what I'm going to do here is come over and grab and copy this, which is the assembled van, which is the first image you want. So, we come over here. We are going to pop this in. Little hacks 16x9 and 1K.
But what we want to do is get the Any Van logo. So, to do that, we're going to head over to Google and let's grab the Any Van logo. So, this is the wonderful thing now is that we can just throw the logo on so it feels specific. So, let's come and grab one that we think would be decent. I think this one here is probably going to be the best one. Let's copy that as an image. Come over and we should be able to drop that in there.
And then with that in mind, I wonder if we could also grab from the website the actual van that they use. Is there like a van that we can see? There's a video. Probably if we did Any Van, we could probably find one. So, this looks pretty sweet. Should we grab like this one? Let's just go ahead and grab this as an image for example. I just make sure the quality is correct. Although the quality is quite low on that. This is a little bit less quality. I know like the boring part, but I think this is probably really good. We'll just copy this image. Come over to Nano Banana and drop that one in there.
And then we let this go. And we're going to want four iterations. The reason why we want four iterations is because realistically if you're doing an animation, the actual scroll is only as good as the start and finish image. So, I like to spar with it a little bit on this and try some different things out, which I think is really cool. And you want at least 2K. 1K is like, dude, it's like some kid in the garden has had access to PowerPoint or something. It's ridiculous. So, got to be at least 2K. And I like to do four iterations.
One of the cool things we'll do is specify specifically that we want a clean white background. So, in other words, nothing can touch the edges. That's really important because if it is, it's not going to look great on our website.
So, now we have a few options. As you can see, the one from before does not look good. It's paid no attention to the logo. This is fantastic. So, why don't we copy this one here? I like the look of that. And what we're going to do is come down and click on reference. So, we're going to reference that image, which I think is wonderful.
And then what we want to do is come back over here. Come on to exploded load. Those of you with non-PG-13 minds, ignore that. Come back over here and I'm going to paste this one in. And what's cool is now we're referencing the previous image to this one. So, it's going to be that version, but actually exploded. And then we get both images. We can turn it into a video.
You know what's really cool is before we had to break it down into hundreds of frames and do this and do that. Now it's like we're just going to drop it. I'm even hitting the mic. That's how pumped up I'm getting right now. We're just going to drop it in Claude Code and let some magic happen.
Just like that we have all of the images. So we can pick the one that we like. I think this one's probably quite nice all the things. But I guess that's the exploded version. So why don't we come down? The giraffe has disappeared a little bit. So I think that's fine. Maybe he went in for some safekeeping. But I think this kind of represents the breadth of the kind of thing that you'd expect in a van.
So what we do is go ahead and download this one also. And then what we're going to do is come over then to video over here and create a video. And what we're going to do here is pick the start frame, which is the first one, and then the end frame.
Generating the Animation Video
Jack Roberts: And then whilst they're uploading, we then need to get the prompt. So let's come over to the prompt that was created for us by Claude Code. And that is going to be on video transition. And then let's just copy that one. Come straight over to Hixfield. Drop this one in here. And then we're ready to go.
No need for the multi-shot. No need for the enhance. Let's just turn that one off. Cling 3.0 is fine. And 7 seconds is also okay. And then click on generate. I'm not affiliated with Hixel in anyway, by the way. I just want to say you can do all of this with an API key. You don't require this. You don't need this. It's just easier to do. That's all. But if you had the API, like I showed you in my last video on Claude skills, you can do all of this from within anti-gravity and Claude Code.
And then once that's complete, we'll have a video. So let's check this one out. That's what it looks like. We'll have some weird sound effects. I'm just going to mute this. So when that's complete, we'll get a video that looks like this. Let's have a look. We got the luggage coming out, furniture flying out, going different locations.
I'd encourage you to play back and forth with this. Make sure you get the right transitions. Feel free to spar with this. Give it four or five different versions. Make sure you're really happy with the first one and the second one. But I think this is great. We basically got an animated version now for the particular brand. And then when you're ready, come over here and download the video like so. And so now we have the video.
Building the Website with Claude Code
Jack Roberts: The next step is to use Claude Code within anti-gravity and our website builder skill which I've included for you down below to build something that integrates this effortlessly but also actually draws on the design element and beating heart of the initial website.
What we're going to do is head over to the community. I'm actually also going to put this link for you down below so you get all the resources for building out what I'm describing. Now, the cool important thing here is we want to have — if you come over and let's just grab our Claude skills and the one that we're physically looking for is 3D websites.
So, you're going to come down and you're going to have — there's two you want to have. One is asset generation and one is 3D website builder. What you're going to do is come over to these environments. You are going to download the folder for both of these things and then you're going to import them into anti-gravity.
Now within anti-gravity, let's go ahead and create a brand new folder for a wonderful project. So click on open folder. We'll give this one a name like Any Van new website and click on create. And then click on open. So here again, we're going to activate Claude Code.
Now you'll see me use a terminal. Like I said, another option is you can double click. If you don't see this little Claude thing, by the way, all you do on the left hand side is come over to extensions and you can type in Claude here and it will basically pair up and you can install that into your laptop right there by update install whatever you want to if you don't see it there.
So all we're going to do is click on this guy and then he has appeared which is wonderful. So let's click on this so we can see the files and then once you've installed them effectively what you'll do again as always it's forward slash skill creator. If you don't have skill creator again you can install that onto your Claude as well but the one that we're going to do here is going to be I believe it's website prompt builder. Let's see I think it is scroll stop builder.
So this is the skill we've got. Now the wonderful thing about the skill is that it will actually take us through everything and this is what the skill will look like for you. It will look like this with assets, references, scripts, and a skill.md. So, which file would you like me to use for the scroll driven animation? Well, we're gonna say let's go for other and explain. So, we're gonna say, "Hey, there it is the last file that I downloaded on my computer."
And this is the cool thing about Claude. We just say, "Dude, this is what it is. Just go ahead and do it for us, please." So, we submit our answer, which is great. Again, it's taking us through step by step by step. So, it's going to go ahead and grab that. We are going to allow all these things for the website.
Now, the second website I'm going to show you in this video doesn't really have a scroll stopper like that, but it is a very interesting technique and I think you're going to find it very interesting. I've not seen it shared anywhere else and it is gorgeous.
Hack, by the way, if you do scroll shift, it goes through ask before edits, edit automatically in plan mode. We want to go on the edit automatically if you want to save time, unless you want to be really specific on it, but it just means it will run through a lot quicker.
So, now we have the website MVP. Let's take a look at how it flows. We've got the same color scheme, get a free quote, all information. And we scroll down and would you believe we got the van here. Everything's happening and we got the animation popping up. So we want to play around with the smoothness of this, but I think it's pretty cool that it's there and it kind of moves down a little bit. We can scroll down and we've got everything we need. So this is just basically the scroll stopping MVP with a logo transition, which I think is really freaking cool.
Replicating Existing Website Structures
Jack Roberts: So now we've actually created an MVP for a scroll stopping website. The next thing that we want to do is make it way more responsive and actually host it somewhere so it has its own domain online that we can actually send to people.
Now, one of the cool techniques I want to show you here, HTML reference. So, for example, if I come over to the initial website, let's say, for instance, that we like the look of this website or we said, look, we think this is a great structure. Well, one of the things that we can do is grab the website, we can head over to Google. If you type in HTML website extractor, like so, click on this. Open this guy up. We can enter in their website and I'm going to download it as a HTML because every website is essentially just HTML.
So, we've downloaded that. Now, check this out. We'll head back over to anti-gravity. I've just opened up a new Claude window and get a prompt like this. Hey there, dude. I've just downloaded the HTML from the original website. I would like to use that HTML to recreate it with the new copy and the scroll stopping animation included within it, please.
So, put that in there and now we can actually leverage and replicate their entire website. What's really key for me is that you actually grab their logo, you grab their typography so it looks and feels like the original website and we've just added something wonderful in it to kind of give it a little bit of pop.
Deploying to GitHub and Vercel
Jack Roberts: We can do that now. While it's doing that, let's pop anti-gravity and publish the website. So you're going to command and now if you've never touched anti-gravity before, give it this prompt. Hey there, I would like you to do two things for me. I want you to connect to GitHub so that you can create and publish repos. And the second thing I want you to do for me is to connect to Vercel.
Now, Vercel itself, once I pull it up and show you, GitHub is basically the place where we put all the information. And Vercel is a location that will actually host it for us, which is awesome. So, all you're going to do is come into vercel.com/account/settings/tokens. I'm going to grab a token. GitHub is a completely free website to create an account on, as is Vercel, and you can connect them together once you open up this.
Now, what we're going to do is come down and create a token like so. Going to give it a new name, whatever you want to. You can set the scopes and then the expiration that you're happy with. I can put no expression for this and then create the token.
Then once you've done that, you need to come back over to anti-gravity and explain to anti-gravity that your API key is. You're going to say, I would like you to add this to my MCP config. Now, the way you access your MCP config is here. Come down to MCP servers. Come on to manage MCP service and you'll see it appear here on the left hand side, which is awesome.
As you can see, I already have — if I bring it over here and the UI stops misbehaving. I have Vercel activated right here, which is cool. Now, what you'll do is click on view raw config. And then you've got everything in here. So, what we'll do with anti-gravity is come back to the agent.
And what I want you to do at the end of the prompt that I've just lost is you do at and you type in mcp_config. So, you're saying, hey, I want you to, and MCP just stands for model context protocol. It's the way that we allow anti-gravity to connect with everything. And the power of this is it can publish and make any changes immediately once we connect it. And you basically say, I want you to add the Vercel MCP with that API key.
Now, once that's all done, you'll then be able to do some pretty amazing things. And you'll know that it's worked when you come here and you click refresh, and it appears for you automatically. Now, all you're going to say is this. Hey, dude, I want you to go ahead and create me a GitHub repo. I want you to publish it. And then I want you to actually create a brand new website for this on Vercel.
And then when that's complete, we've got two links. We've got the link to the GitHub and we have a link to the website. So, let's open up the GitHub repo. As you can see, there we go. It's live on GitHub now. And then we also have over here a link to the website that we've got on vercel.com which is an app that you could quickly publish and do whatever you want to.
We're going to scroll down. As we can see we've got the Any Van thing popping. Really freaking cool. Come down all the numbers. Very very cool. Ready to rock and roll which I think is a cool come back.
It's action improvements. So I'm going to say hey there dude, cool. Open this up for me in a local host. And this is crazy because effectively what you can do now is get a website as a scaffold and then use that to build whatever you want to. So, if we were trying to pitch this to an existing business, you can leverage their existing scaffolding.
So, there you go. We've got this one open now. And look at this. There you go. This is the new website that we've got on Local Host. Any Van logo there. Going to come down and look at this. Now, I've just added this to their website. How freaking cool is this? This is freaking insane right now. Look at this.
And not only that, but check out how mobile optimized it is. So, I come over here. We're going to bring this one over to the left. And look, bring this up. You can see you still got the whole — look at this. This is so freaking crisp, guys. Oh my gosh, already for mobile optimization.
Then we come back to anti-gravity and then you're going to say something along the lines of dude this is freaking awesome and say hey I want you to push the new version live for me please. So give this one to anti-gravity and he can do that because he's got all the Vercel connections and then we come back over here and we know that's live when you come back to Any Van website and vercel.app it's even got the logo and now it's all pretty much there ready to rock and roll.
I think this is really freaking cool. Obviously if you don't want draft you want something else instead you can do whatever you want to. It is all very very decent.
Domain Setup and Analytics
Jack Roberts: So now to buy a domain, you're going to head over to vercel.com and find the Any Van website. And all you're going to do is click on it like so. And you're going to see domains. You're going to click on domain. You're going to type in the one you want and you just assign it. And then you're effectively ready to rock and roll with the new website.
And you'll see on the left hand side, you can basically start to build anything you want to. So if I want to get analytics, so I want like visibility of how many people are clicking my website. I click on analytics and I click on enable. Obviously, this won't let me do it just because I've actually — well you can click on a hobby plan. It's quite generous on a hobby plan right now. But you can see it's giving you a bit of code.
So all you do is come back here to package and come back over to anti-gravity and then you're going to paste that in and say I would like the analytics on my website in Vercel please. That's all you do. And then what you're also going to do is come back over and then while you're here just copy this as well and then come back over here like so.
And what this will do is add the code to the website. So now when you get visits on your website that will all be visible within Vercel. And then just to show you what that looks like on a website that has it like today for example you can see 658 visitors in the last week. You can see analytics. You can go into it and do various different things. You can even get speed insights to see how fast your site is and do lots of stuff. Kind of think of it like a quasi WordPress in that sense that you get all the data on the left.
Advanced Website Replication Technique
Jack Roberts: Now, here's the crazy thing about this. So, you saw how we recreated this website. We recreated this app from the original. And if I open up the original, you will see some similarities. Mainly that it's pretty much the same scaffold, but with the same kind of content. So, you can see there's a few different differences. But obviously one of the cool things about ours is the fact that we have this wonderful cool animation. It's mobile optimized and it's kicking butt and is beautiful.
Now I did the same thing with this website rocket.net which I think is freaking gorgeous. But I did something different. I did something very interesting. So I got the website. I went over to here to the HTML extractor. I extracted it and I downloaded it and I put that in anti-gravity. But I did something different.
Now you'll notice if you look at this website and then you look at this, you can see that it's the same sort of vibe. But can you see how the images are different? If I scroll up, you see this transition. Look at this. This is gorgeous. Do you know how I achieved this effect? It's basically the same image, but what I've done is I've leveraged Nano Banana 2 to do this.
Likewise, if I come down, for example, you can see how Rocket does it in one sentence in one whole app. On mine, when I come down again, it's got this, which is part of the feature. And you come down to the bottom, you see start building now. Doesn't that look really freaking similar to this? Start building now.
Now, it's not identical. I did it in one shot, which is crazy that I built this kind of thing. But the way that you do this — and you see this here was just a one shot. We hadn't actually built in the animated thing. As you can see on the left, let me just bring it over so you can get a good look. I'll just bring it here so you can get a good look. It's literally found the entire system, replicated all of it. So, if you found something that you thought structurally was awesome, it's the exact same thing.
And so, as you can see, it's pretty amazing the kind of thing you can build just by replicating structure, especially if you're sharing this with clients or building out and getting inspiration.
Adding Multiple Pages and SEO Optimization
Jack Roberts: And so now we've built wonderful, beautifully responsive websites that leverage many capabilities. But next thing we want to do is be able to add out multiple different pages on that website and SEO optimize it so we can rank higher on Google and get more clients.
And so to do this, we're going to head over to anti-gravity and give it this prompt which is I have an existing website as it knows. Look at my current site and understand the existing design language. Ask me which pages I want to create. For each page, match the existing design exactly. Add full SEO optimization. Include structured data. Make it fully responsive and update the navigation across all the pages. After creating all the pages, run a full SEO audit across every page, giving me report. Show me what's optimized and any ranking improvements.
So, we need the SEO optimization skill to do that, which we're going to run through Claude once anti-gravity has created that for us. And so, I want to grab the SEO optimizer skill. So, anti-gravity can get started, but then we want a full SEO optimization system like this Claude protected SEO city. Going to come down and grab this skill and just like before just import it into your basically your folder in anti-gravity.
So give it three random examples. Obviously these could be whatever you want to. So we come back over to anti-gravity is asking which three pages we want. I'm just going to say about page, a testimonial page and also a team page.
Now what that's doing, we want to go ahead over to Claude Code and import our SEO skill. And as you see if I open this up for example, and I'll just remove it just so you're all really familiar how to get it. Again, hit the Claude thing. I can do forward slash SEO and I have my SEO optimization skill ready to rock and roll. If you don't do that, you will just go down to skill creator and then you go through the whole process of creating it once you brought in the file that I have given you.
So whilst anti-gravity is actually going out and building the different pages, we can run the SEO optimization skill ourselves. So once you've installed it, what you're going to do is forward slash SEO strategy like so. And then you'll be able to see all the wonderful things it's going to do. And it's going to ask us a question. One is do you want me to go and do an SEO analysis of the entire page or just the article?
So we're going to go for one, which is just basically the article and page. And then we can give it any URL that we're building. So we're just going to give it the URL to a new website. So there you go. Put it down here. Send it off. Let it go ahead and do its full SEO strategy for us.
And you can see it's full strategy. Fetch the homepage and discover internal pages. Fetch all discovery pages. Fetch robots.txt sitemap. Analyze each page individually. Perform cross page analysis. Score all categories and HTML report. And then save the report and open it up for you in a browser. And we can be specific about the keywords that we want to rank for. Everything that we need to help this SEO strategy bot be as effective as humanly possible.
So, anti-gravity has gone ahead and created for us three separate pages. So, let's go ahead and open up. We've got an about page, testimonials, and team. And here we go. Look at this. Any Van website vercel.app/about.html. There's some stuff on their story, which is pretty cool. About us, what drives us, blah, blah, blah. And guys, it's all in the same things.
Actually, if I click on testimonials, now I'm on a testimonials page. And then now I'm on our team page and I can be homepage. So, it's all basically connected together, which I think is so freaking cool. I just really — I always want to make sure I go through the details on this channel to make sure you can fly and build out anything you want to with the right structures.
So, I come back over now to anti-gravity. And once from there, we can also see that look, we got matching designs. We have full SEO, unique titles, meta description, OG tags, canonical URLs, Twitter. Yeah, we even got Twitter cards. Oh my good, it's gone above and beyond here. JSON LD structured data is responsive. It's cross link navigation and shared CSS design system. Amazing.
Comprehensive SEO Auditing
Jack Roberts: Now, we can use our Claude skill. Again, we could use anti-gravity skills. Of course, we could. But Claude skills are really interesting for the reasons I covered in that video yesterday. I'm going to put a link on screen for you at the end so you can check it out.
But what's really interesting here now is that we can now bolster that SEO with an SEO expert Claude skill. And then once this SEO audit has completed, it will open up a file and you can see it gives you a score out of 100. We didn't score too well, guys. We scored a D for not very good. I don't know what D stands for, but it isn't fantastic.
But if I come over here, this is what it will open up for you. This is all embedded. The code is in the skill that I've given you. But what's really cool is you'll get this breakdown about why is it good, why is it not good. The site is well written content, but proper use of blah blah blah. Gives you an executive summary. Gives you a page breakdown. So basically page by page what's everything that's going on sitewide issues technical content strategy all this sort of stuff.
What is really cool as well I really like on that I built into this is the executive summary if you come over to the keywords as well which is cool. You got the internal linking which is fantastic. So like all the pages linking to the other pages. Then finally we have an action plan which has all the stuff it wants to do. The high impact stuff, the strategic initiatives, full implementation checklist, really really freaking stuff as a lot of technical details and obviously you can build this out and do as many things as you want to.
But essentially, you have now an SEO groundwork that you can use across your website to improve your rankings.
The MONEY Framework for Selling Websites
Jack Roberts: And if this is something that you want to sell, I want to give you a very clear road map of how to do that from zero. We call it the MONEY framework. So M stands for map. Basically finding boring niches that exist. O is obtain. So that's how we actually go ahead and get the leads so we can script them using various different services, enrich them, get the names, get loads of cool stuff. N is nail building the beautiful websites. E is executing where we give these beautiful websites to them completely for free because we can automate that at scale. It's very cool. Then Y is yield in terms of we sell recurring revenue services.
Now, if this is something that you want to do and learn how to do step by step, I create a full comprehensive master class walking you through from beginning to finish, which you can learn by watching this video.