How I built $10K Animated Websites with Claude + Nano Banana 2

0:00If you've been using Claude to build websites, you've probably run into this huge problem. It's boring, generic, and you can tell immediately that it was made by AI. But today I'm going to show you how to build premium websites that looks like it was designed by a professional designer. I'll also show you how to add these smooth 3D animations that look pretty sick, and how to create these moving scrolling animations by just copy and pasting. So, whether you're building the sites for a local business or for your own business, it's going to make you stand out. And yes, you can do this even if you don't

0:29know how to code. I was able to do this with Claude Code in just about 10 minutes. So, I'll walk you through every single step. I'll show you all the prompts that I use, cuz there are some things that you want to avoid if you want to get the best results. And of course, at the end I'll show you how to publish everything live on the internet, and let's dive in. First, let's talk about the tools that we're going to be

0:45using today to create these websites. Now, if you guys have watched my previous video, I made a video about creating websites with Claude Code and Google Stage. But today I'm going to be using just Claude Code, cuz I want to make everything simple, cuz I really want to focus on how to create this 3D animations. And for this we're going to be using Nano Banana 2 and also Kling 3.0 to animate the transformation. All right, so for today's example I'm going to use this local business. This is a home backyard renovation company, ACR Construction. I found this on the internet, and this is just basically a

1:16local business that offers landscaping, pool services, uh basically to renovate the backyard. And here is the redesigned website that I was able to make, which looks really premium. And if I scroll down, you'll see all this scrolling testimonial and all their content down below here. So, this looks a lot cleaner and more premium. And I'm going to show you how to create all this from scratch using Claude Code. Now, I know a lot of people they get intimidated by the word code, but you really don't have to know how to code to be able to pull this off, cuz it will guide you every step of the

1:47way. Now, if you're doing this for the first time, you have to download the desktop app. And if you've done this before, feel free to jump to the next section, cuz I've got timestamps in this video. So, once you download the app and install it, here is the screen that you're going to see, right? So, Claude

1:59has basically three main products. They've actually moved the tabs to the left side here. So, Claude Chat is basically the one that most people use to ask questions and they get an answer, right? But the problem here is that you can't build things with Claude Chat. Now, all the way to the right here, Claude Code is the most powerful version of Claude, and it is designed to help you build things, right? But sometimes

2:19it's quite intimidating for beginners. And to solve that problem, Claude actually created a third option here, which is Co-work, right? So, Co-work is actually it does the same thing as Claude Code, but just wrapped in a very nice friendly layout, right? Now, you can definitely use Claude Co-work for this, but I personally use Claude Code, cuz I think it's a much more powerful tool. And I think that if you are serious about building things in the future, you have to get used to Claude Code. Now, to start building the website, you can actually use Claude Code here in the desktop app, but I personally use it inside of VS Code

2:48here. And the reason why I like this one is because I'm able to see all the files that I'm working on in the left side here, and whatever files that it's creating, I'm able to see that. And I can do my prompting in the middle. It's just a better working environment for me. And it's also free to use. It's a product by Microsoft, and you can use it on either Mac or Windows. And once you install VS Code, you can just go here to extension and search for Claude here in the extensions. And I already have this installed, so once you install it, you can just click on this orange icon here,

3:17and it's going to be able to open a new session for you to start working. And if you're using this for the first time, it's going to ask you to authenticate yourself with Claude Code. You have to use at least a pro plan on Claude to get this to work. Uh you can't be on the free plan, but I think this is well worth it. Now, you might be wondering why we have a file explorer here on the left side. So, the way that Claude Code work is that you have to assign a folder on your computer that you want it to work in. So, whenever you're building

3:40something, I do recommend creating a new folder here, so that all the files that it's creating related to that folder lives here. So, everything is organized, and when it comes time to publishing your website, you can just grab this whole folder and upload it to whatever hosting you use. And again, using VS Code is just nice because you get to see the file explorer here, and you get the prompt it right in the middle. All right, so now we're ready to build the website. Now, for most people when they build a website, they just simply prompt it, you know, "Hey, build me a website for a backyard renovation company. You

4:09know, make it nice, make it premium." Now, if you do that, you'll get a very generic output that is pretty boring and not very appealing, right? It looks like a template, and it just looks like AI made it. And that's because you're not giving it any design direction, and you're not giving it the details of what you want. Cuz think of it like buying a home, right? If you talk to real estate agent and you tell the agent, "Hey, I just want a nice house." That's going to be very subjective. You want to specify the type of house, how many stories you want, the style that you want, etc.,

4:37right? You want to be as specific as possible. And ideally, of course, you want to have a reference of what you like. And this applies to websites as well. You want to find a reference or inspiration, right? A website that you like, and you want Claude to use as a design reference. So, the question becomes, where do you find these

4:53designs? So, I like to go to Dribbble. So, Dribbble has a lot of user-submitted website designs. So, if I type in home interior websites, you're going to see a lot of examples here of just beautiful-looking websites that you can take inspiration from. Or you can also go to Pinterest. Pinterest is something that I go to a lot. So, if I go to search for home interior websites, you'll also see a lot of

5:14nice-looking designs that you can use. Now, I found one that I really like for the home renovation website that we're building. It looks pretty clean and modern, and I do like the font that and colors here. So, I'm going to save this in the folder that Claude Code has access to. All right, so let's start building it. So, I'm going to write the prompt here, "Build a website that is premium for a home backyard renovation company called ACR. I want you to use the design inspiration which is attached here, and use the same color palette, same font, same design cues. I want you to create the main sections like recent

5:44projects, testimonials, portfolio. Make it responsive, run it locally." So, I'm going to right-click on the image here. I'm going to copy path, and I'm just going to paste it here, so it knows where to find that image, and hit generate. Now, once this is running, it's probably going to ask you for permissions, things like this. You can just say yes, then in a couple minutes it's going to build the website for us. And in a few minutes, this is what we get. So, I think this is pretty clean. It maintains all the design elements from that inspiration image, and it even took the initiative to put this image here, cuz if you

6:13notice in VS Code in the folder, I have this image of a house here. And I think this looks pretty premium. I think everything is in place, in the right place. So, all the pages here, and a lot of these elements are carried over from the inspiration. And if I scroll down, it actually took the design cues from the reference image as well. Yeah, I think this is a great baseline to work with, and the next thing that we want to do now is to create the 3D animation, and we're going to do that using Nano Banana 2 and Kling. Now, I'm going to use Kittl AI here to access Nano Banana

6:432 and Kling, and I'll create a new project here, and also going to feed it this image here for reference. Now, before we start prompting, I just want to let you know that to create something like this, this video transformation, what you need is just two images, right? One image is a house that is in bad condition like this. The grass is overgrown, pool is really nasty, and the second image is the same house, but totally cleaned up. Pool is fresh, and

7:06you know, landscaping is done, right? So, we're going to use Nano Banana 2 to create those two before and after images, and then we're going to use Kling to animate the transformation. So, what you want to do is just select that image and hit remix. And then I've got the prompt here for the before image. So, this is the neglected backyard, and I'm just going to copy this whole prompt, and then I'm going to paste it here. So, basically what I'm asking it to do is to grab this house, take this as a reference, and then I want to see the backyard view of this house, and

7:34then make sure that the backyard looks really bad, right? So, that is the prompt here. Now, I'm going to make this prompt available for you guys to download. I'm going to provide the link in the description if you guys want this. And then here I can choose the AI model that I want to use. I want to use Nano Banana 2 here, and also aspect ratio, I do want it to be 16 by 9, cuz we want it to cover the full width of the website, right? I'm going to pick four images as an output, cuz I want to

7:57immediately see four different options. I think that will save you a lot of time, and I think that's the beauty of using a platform like this, cuz you get to actually pick how many images you want as an output instead of just one that you get in uh the Gemini app. All right, so I'm just going to hit generate, and in a couple minutes it will give you four images. By the way, if you like these ideas, you're only seeing the tip of the iceberg, cuz I'm always digging into new business ideas, especially things that you can build using AI that makes money. But honestly, I can't turn every single idea into a

8:24YouTube video, so a lot of the best ideas don't make it to the channel, but they go straight to my newsletter instead. This is where I track and share fresh business ideas, ideas that are already making people money. So, if you want to be the first to know about these before they go mainstream, join my free newsletter. It's completely free, link down below. All right, so our images are here, and we've got four different options. The first one here is not the best, because it is at an angle. I don't like this. I want it to be straight um from the backyard. All right, so the

8:51second one is actually good. So, I like this one a lot, and it is centered uh on the house there. This one's also not bad, but the pool is slightly off to the left. And by the way, if you don't like this, you can just re-prompt it, "Hey, I don't want the garage, change it to a living room or something like that," and it will change it for you. And the fourth one here is not as good. Um it is at an angle. I mean, you could work with this depending on what you're trying to create, but I just personally prefer it to be just straight instead of an angle

9:18here. So, I think out of the four, I really like this one here. So, I'm going to take this, going to zoom out a bit, copy it, and put it down here, right? So, what I want to do next is I want to create the after image. So, I'm just going to go back to my prompt here, and I'm going to click on the second tab, and just grab this copy this prompt, and just going to hit remix again, and then just paste in that new prompt. Now, one thing to note, when you're creating the second image, you want to make sure that this house here is selected, otherwise it's

9:48just going to create a totally different house. So, you want to make sure this is clicked, and you can see that image populate here, and then again, Nano Banana 2, 16 by 9, and then four images, and hit generate. All right, so we've got the four new images here. This one's pretty clean, to be honest, but if you notice the house is a bit different, like the roof has different colors here, so that could be an issue. Now, this next one here, it's pretty accurate,

10:12right? The house is very, very similar. It's actually exactly the same, right, with this one. Um so, I really like this one a lot, and you can see all the grass is already redone. The pool looks fresh and clean. Let's move on to the third one. This is a lot better, actually. So, if you compare this to this one, I think this is a lot better because of the lights inside the house, they're on. It just makes everything looks more premium, more luxurious. Even the lights inside the pool is actually on as well. And you can see the color of the sky is also this golden hour color here, so I think

10:43this is a lot nicer. All right, so moving on, I think this is nice as well. I do like the the color of the pool here. It just looks fresh and clean. But, um if I had to pick one, I'll just pick this one cuz it's just has these lights that I think it's pretty special here. All right, so I'm going to pick this for our website. I'm just going to reorganize this a bit, so it's a lot easier to see. So, I'm going to move this here, and I'll just delete the ones that we don't want, right? This. So, we

11:08would just have two images side by side. So, this is the before, and this is the after. And basically, what we're going to do next is we want to create the video's transformation between the before and the after. And to do that, we just select both images here, and click on three more, generate video, and you can see that it automatically pulls in the images that we selected. But then, you want to make sure that the first image is actually the before image here. Now, it's the other way around, so you just want to simply click on this icon, and it will just flip it automatically. And then,

11:36I'm going to go to my prompt here, and click on the third tab, transformation, and simply just copy all this, and then paste it in here. And then, what you'll see here is basically, I'm telling it to transform this image from a filthy backyard to a clean backyard. And you can see all the transitions here that I want. And feel free to change this according to the image that you're working with, but this

11:59is kind of the baseline of what I have. Now, for the image model, I'm going to pick Kling 3.0 here. So, you click on this one, and then again, you want to make sure that the aspect ratio stays the same. Now, for the duration, you want to make sure it's at 6 seconds. So, I don't like to do it at 12 seconds, cuz it's just too long to animate. Cuz when you scroll down the page, you want it to immediately animate. So, 6 seconds, I I think is the sweet spot, and let's hit generate. All right, so we got the video

12:23ready, and I'm going to play this. Wow, I think that looks pretty sick. So, I if you don't like this for any reason, any elements that you don't want it to be in the video, or you want to edit something, you can just change the prompt, and try to edit, and just tell it what you want to change until you get the result that you want, right? I think the secret to great design here is just iterations, cuz you're probably not

12:46going to get it right in the first try. So, don't be afraid to do a couple of edits. All right, so if you're happy with this one, you can just hit this button here for quick export, and I'm just going to export it as MP4, and just save that in the folder that we're working in. So, if I go back to VS Code, you'll see that the video is saved here under assets. If I click on this, you'll see that this is the video that we created in Kittl. All right, now I'm going to take this video, and I'm going to ask Claude to actually replace this

13:11hero section of the website with that video, and I want it to animate, transform the house as I scroll down the website. So, let's go back to Claude. I want to replace the hero section with this video, and I want the house to transform as I scroll down the page. Keep the logo and the header as an overlay on top of the video. Use the best design principles to achieve this, and make sure that it is smooth. And what I'll do is I'll just right-click on the video, copy path, and just paste it

13:36here. And then, hit enter. All right, so it's going to get to work. Now, if you're doing this for the first time, Claude Code is actually going to probably ask you to download and install plugin called FFmpeg. So, this is plugin that actually allows Claude Code to open video files, and extract the frames from that video. And if it's asking you to do that, just hit yes, and it's going to install that plugin by itself. You don't even need to know how to install it, it's going to do it by itself. You just need to approve it, basically. All right, so it looks like it's done. So,

14:02I'm going to click on this link here, and you'll see that the video is here. So, if I scroll down, you'll see that we've got this smooth animation as I scroll down, and it kept all the logo and all the links here as well, and kept everything in place. So, if I scroll down a bit more, and we'll go to the next section, which is perfect. Didn't

14:22touch any of these content down here. So, perfect. Now, if you're building this for a real client, you probably need to migrate over their content, you know, from the old website to to the new website, and you can easily ask Claude to do that as well. You can just prompt it, "Hey, please take this content from this website," and give it the URL, and I want it to move all the content to our website. So, it's going to do that automatically. Now, what if you want to take this to the next level? Let's say you want to add more animations, change how certain buttons look, or you want to maybe you want to animate

14:51some of these things here, or maybe you want to improve this testimonial section, right? Cuz this is pretty boring. It is static, and it's not that exciting, right? And I also want to move this testimonial up top here, cuz I think reviews, testimonials is really important to highlight, especially for a website like this. So, to get ideas on how to improve this section here, I like

15:10to go to this website called 21st Dev. So, this is a free website, by the way. It's So, if I'm looking for testimonial section, I can just probably go to this filter, and click on testimonials here, and you get a bunch of options here, and you know, most of these are they look really good, and a lot of these are animated, like this one here. It's going

15:27to be very hard to animate it yourself. But the idea here is just to grab what you like from here, and ask Claude Code to copy it, and apply it to your website. So, I actually went through these earlier, and I like this particular one. If I click on this, you're going to see that it has this scrolling effect of all the testimonials. And let's say I like this one, and I want to grab it for my own website. So, what I can simply do is just copy prompt here, and I'll just go back to Claude, and I'll say, "Reformat the testimonial section using the design

15:58below. Make sure the fonts and the content is adjusted to fit my website. Also, move the testimonial section above the our services section. So, rather than putting it down below, I'm going to move it up right below the hero section, but above the our services section. And I'll simply paste the prompt that I just took from 21st Dev over here, and I'll just hit

16:26generate. And in a few minutes, it's done. And reload the page, and just scroll down, and you'll find that it actually applied the exact style that I want. And what's really cool is that it actually changed all this text to fit the local business, right? So, this is a home renovation company. It went ahead and edited all the text according to the business, right? And and even the content for the testimonials as well. It's adjusted to the business, right? Obviously, you want this to be the real testimonials, but it's just amazing what Claude Code can do with just a small prompt. Now, once you're happy with how your website

16:59looks, it's time to get it live on the internet. Now, if you notice now, if you look up here at the URL, your website is actually sitting on your computer, so nobody can actually see the website except for you, unless you push it live on the internet. And in order to do that, you're going to need an account with GitHub, and you're going to need an account with Vercel, right? Now, let's start with this one first. So, GitHub, for those of you who are new, it is basically a place for you to store your website files. So, think of this like a Google Drive, where if you want

17:27to share something with a colleague or or friend, if the file's sitting on your computer, nobody can see it, right? So, you want to just upload that into a Google Drive, where you can share with people. Now, same concept applies here, but for websites, you want to use GitHub. And and the reason why we use Vercel as well because these apps connect to each other seamlessly. So, it's really easy to get your website live, and if you make any changes, it's just one click of a button, and the changes are applied immediately. So, what you want to do is you want to create a new account on GitHub. And once

17:55you do that, you want to create a new repository. So, repository, or what a lot of people call repo, is just a fancy name for a folder, right? So, think about a folder that you create on Google Drive, but this is on GitHub. So, you can go ahead and click new, and then I'm just going to call this folder, or repo,

18:13ACR. And it's available, so I'm going to go down here. I don't have to put a description, and just make it public for now. If If you do have API keys, you want to make sure it's private, but for now, it is just a basic website, so I'm just going to click public, and then

18:27create repository. Now, once that's done, you can ignore everything else, and just want to focus on this URL here. Basically, where your repo lives. So, you can copy this link here, and you want to ask Claude to upload, or what they call push, the files to this repo. And of course, you can do this manually, but I want to show you how easy it is to get Claude to do it for you. So, I'm going to go back to Claude, and I'm going to say, "I want to publish this website. Please push to this Git repo

18:55URL I just copied," and hit enter. And it is actually going to upload everything to GitHub, and then I'm just going to hit yes here, and I'm going to hit yes again. Now, if you're doing this for the first time, it's going to probably ask you for some authentication, right? Just to make sure that you actually own that GitHub account. Just ask it for it to guide you through the process. It's probably going to ask you for your API key, so just follow the instructions, and it's actually a very easy process. So, we're going to hit yes again here. All right, it looks like it's done. So, I'm going

19:23to go back to GitHub, and refresh the page, and it's all here. And now we're ready to publish the website. Now, to do that, we're going to go to Vercel. So, again, same thing, create an account, it's free. And once you're on the dashboard here, you want to click on all projects. You can create new project. And once you're on this page, you just paste in the Git URL here, and hit deploy. And I'll just rename this to ACR site, and then just hit create. And this just takes a couple of seconds, and we are live. So, click on this website and our website is live on the internet

19:55where anybody can access and you will see all the content is still here. Yep, it's all there. And then, this is basically the temporary domain that you get with Vercel and you can already share this with anyone. And obviously, if you're doing this for a local business, you can go back and connect the domain to this website. So, you can do that by going down here and there's an option to add a domain. So, this is how you create beautiful websites, you build something premium, something that you can charge a lot of money for. And this wouldn't be possible just a couple years ago before AI. All right, so now that you know how

20:26to build beautiful websites with Claude, the next question is can we use Claude to build an actual app? And the answer is absolutely. In fact, I just used Claude to clone an app that makes $120,000 a year in just about 10 minutes. So, if you want to watch that, click here and I will see you there.