Claude Code + Nano Banana 2 = Apple-Level Websites

Using Claude Code and Nana Banana too, you can now create websites that would usually cost you over ten thousand dollars to have built. No coding skills and no design skills required. And honestly, the results look like something Apple would put on their website. But most people using these tools are doing it completely wrong. They're getting the same generic AI look every single time. So let me show

wrong. They're getting the same generic AI look every single time. So let me show you how to use Claude Code better than ninety-nine percent of people. The

examples in the intro were built entirely by AI. The design, the copywriting, and even the animation. No experience required. Here's the plan. To build a website like this, we need three things. First, brand identity. Every great website starts by knowing the brand. Colors, fonts, spacing, personality. And I will

show you how to extract this from any website in under sixty seconds. Second,

the animation. This is scroll effect you saw in the intro. We're using AI to generate every single frame, and I will give you the exact prompts. Third, the

agent blueprint. This is a claude code setup that takes your brand file and the animation and builds the entire site for you. Research, structure, copy, everything. Let's start with step number one, the brand identity. For this example,

everything. Let's start with step number one, the brand identity. For this example, we'll take Apple. First, we go to firecrawl.dev and go to the dashboard.

Then we navigate to scrape a webpage. Here we type in apple.com, and under format, this is the important part, we select here branding and deselect everything else.

And then we click here, start scraping. This takes a few seconds. And now we have the branding from Apple. We have the logos here. We have the button colors. We have

the secondary colors, accent colors, background colors, fonts, typography, spacing, personality, and so on. Then we click here, copy JSON, open any text editor, and paste it here. Then save this document in the folder. Call it

brand.json. Click here, Use JSON. Step number two to create this beautiful scroll animation is to create an animation first. For this, we have two options. We

can do it manually, or we can do it with the AI agent setup I built. For this

setup, we only need to provide a few product images, and the rest the AI does for us. And the rest is done by AI. So how it usually works is you choose a product

for us. And the rest is done by AI. So how it usually works is you choose a product first. For example, an Apple Watch. Then you go to the website and get a few

first. For example, an Apple Watch. Then you go to the website and get a few images. For this example, I choose these three images. Then you need Nana Banana

images. For this example, I choose these three images. Then you need Nana Banana too. You can access it through Kai, for example, or Higgsfield. The main advantage

too. You can access it through Kai, for example, or Higgsfield. The main advantage of Kai, and that's why I'm using it, is that it's much faster. It only needs thirty-eight seconds compared to Higgsfield, where you wait sometimes five to ten minutes. And since you sometimes need to regenerate this output, I highly recommend to use Kai. So you need to provide the input images here and this

prompt. The prompt needed you can find in the description box below in a Google Docs

prompt. The prompt needed you can find in the description box below in a Google Docs document. So you copy this and paste it here, and then you click Run. Then you

document. So you copy this and paste it here, and then you click Run. Then you

receive an output image like this one. It's a good starting point for the animation that you want to achieve. It's called dolly in. By the way, if you want to know more about different camera angles and shots, you can get the Google Sheets document here, where you see the different shots and examples for them. This way you get full control about what you generate. But for the beginning, you can use my

prompts here. So once you have the first frame for the animation, we need the last

prompts here. So once you have the first frame for the animation, we need the last frame. Here provide the product images and the first frame that we received here,

frame. Here provide the product images and the first frame that we received here, and the prompt that you can find in the Google Docs and paste it here. Then you

click Run and receive this output image. This is exactly what we need to achieve this scroll animation here. So once we have our first and last frame, we just need Kling three point O. And for this we can use again Kai or Higgsfield. Here

again, I recommend to use Kai since it's much faster and it's also pretty cheap. So here we provide the first frame and the last frame and the prompt that you can find in the Google Docs here. We paste it here and click Run. I usually choose for duration six seconds and mode SD, but you can also

click Run. I usually choose for duration six seconds and mode SD, but you can also use Pro if you want higher resolutions. Then we receive this outcome here. Perfect. We are now done with the second

here. Perfect. We are now done with the second step, the animation. And this is what the AI agent would create based on these images here. He would come up by himself with the prompt for the first image, and

images here. He would come up by himself with the prompt for the first image, and here's a quality checklist. So if the generated image is not good for the animation we wanted, he will reprompt it and generate a second image. So in this case, the first image was already fine. Then he does the same for the second image here. And like you can see, here some attempts failed first

here. And like you can see, here some attempts failed first up until he did this image here. After the first and last image was provided, he creates the video generation prompt and creates the video. Let's see the outcome here.

Like you can see, it's a beautiful animation here. And all I needed to do for this is to download the Cloud Code Animator setup that I'm providing in the description box below. Then provide the product images in this folder. Then open

this folder in a text editor with Cloud Code and just say go. From this point, Cloud Code takes care of everything and gives you this outcome here.

Now we are at the step three. We will be using an AI agent blueprint that I provide in the description box below. This agent takes the brand identity and the scroll animation and creates this beautiful website here.

It does research about the brand. It takes this video and takes it apart into frames, and it implements this whole website for us. And this is how it works.

First, we download the app level starter agent setup that you can find in the description box below. Then we unpack it. And inside this folder, there's a folder called Assets. Into this folder, we're copy and pasting the animation, brand, and

called Assets. Into this folder, we're copy and pasting the animation, brand, and first frame.

And then we open this folder with Visual Studio Code. If you don't have Visual Studio Code yet, download it here for free. It has everything what we need. And

we need the Cloud Code subscription Pro or higher to be able to use Cloud Code. So

once, so once this folder with the assets is opened in Visual Studio Code, you can click here the icon for Cloud Code and type in create me the website.

And now you just have to wait. Cloud has detailed instructions in the Cloud MD file how to create the website and how to use these assets. What Cloud Code does first is check the brand assets and do some research about this brand. Then he takes this animation and splits it into frames. Then he takes these frames, then he creates the whole website for us

into frames. Then he takes these frames, then he creates the whole website for us and uses these frames to create the scroll animation. And while we wait for the results, check out my school community. Here you learn AI from scratch, from beginner to pro. We provide here all the tools and templates that you need to get quickly started and achieve amazing results. So if you're serious about

learning this topic, make sure to join my school community. What Cloud Code also does is he verifies his work by taking screenshots and analyzing the screenshots.

All right, Cloud Code finished. It says I have to run this command here. Let's open

a terminal for that and paste in this command here. Now you can copy, now you can copy and paste this inside your browser and this is the results that you will receive. Let's check it out.

will receive. Let's check it out.

And like you can see, it looks already pretty good. What I usually do now is I'm checking what I don't like and just give the feedback to Cloud Code, and he's fixing it. This works pretty good, but it's time-consuming. That's why I

fixing it. This works pretty good, but it's time-consuming. That's why I recommend to leverage pages like twentyfirst.dev, which gives you components created by human. These components are created by real designers with a lot of skills, and they're giving it for you to simply copy and paste it.

Here's a button called Copy Prompt. If you provide this to Cloud, he will build the exact same element. And if you want to know more about this approach, make sure to check out my other video and see you in the next one.