<aside> 💡

The full setup from the reel, laid out so you can actually build it. You don't need to code, and you don't need to pay a designer thousands for a custom site.

</aside>

What you'll need

Grab these before you start so you're not stopping halfway:

• Claude Code — the build engine that writes and ships the site
• Nano Banana 2 — for generating your hero visuals
• Firecrawl — to pull the brand off an existing site
• GitHub — where the project lives
• Vercel — to push it live (the free tier is enough)

The workflow

Step 1 — Pull the brand

Point Firecrawl at the company's existing site and let it scrape the brand for you, so everything you build stays consistent with the logo and color palette they already use instead of you guessing at it.

Step 2 — Generate your site visuals in Claude Code

Go into Claude Code and run an asset generation skill. Describe the visuals you want for the site and let it write the image prompt for you, which means the look is dialled in before you ever open an image tool.

Step 3 — Generate two images in Nano Banana 2

Take that prompt into Nano Banana 2 and generate two versions of your hero image: one clean shot, and one exploded version where the elements are pulled apart. You'll use both in the next step to create movement.

Step 4 — Turn the two images into a video transition

Animate between the clean image and the exploded one to get a short hero transition. This is the bit that makes a site feel premium, and it takes a couple of minutes instead of a video editor and a day of work.

Step 5 — Build the site in Claude Code

Bring that video back into Claude Code and run it through a website builder workflow. This is where the actual site gets built around your branding, with the layout and sections handled and full mobile responsiveness baked in.

Pro move — rebuild an existing site, better