Video summary

Claude Code + Nano Banana 2 = Insane $10,000 Websites

Main summary

Key takeaways

Technology

What the video is about (tech/product promise)

The creator demonstrates a workflow using Claude Code, Firecrawl, and “Nanobanner 2” (Nano Banana 2) to generate premium, mobile-responsive, SEO-optimized websites quickly—aiming to avoid generic “AI slop.”

The output includes:

  • Multi-page sites
  • Structured data
  • Scroll-based/animated visuals

It also includes options to:

  • Publish live via Vercel
  • Connect analytics

Core tutorial/workflow: build a scroll-stopping animated website in 5 steps

1) Extract brand identity assets (Firecrawl)

  • Go to firecrawl.dev
  • Scrape/brand extraction to output brand assets (e.g., logos, colors, etc.)
  • Notes:
    • Firecrawl has an API, enabling scaling brand extraction
    • Feed extraction results into Claude Code workflows

2) Generate brand-specific 3D-style assets + prompts (Nano Banana 2 + Claude Code skills)

  • Choose a 16:9 canvas (example settings mention 1K/2K and “clean white background”)
  • Needs:
    • a start image
    • a deconstructed/exploded version
    • a combined video made from start/end frames
  • Uses:
    • Claude Code “skill creator” for a 3D asset generator
    • a prompt-builder approach so prompts are guided and reusable
  • Includes:
    • Logo injection by downloading the logo as an image (e.g., from Google) to personalize the visuals
  • Performs multiple iterations (example: 4 iterations) because animation quality depends on the start and end images

3) Turn images into a transition video (video editor + optional API automation)

  • After generating start/end frames, create a video using a video transition prompt
  • Example tool: HitFilm to composite/generate the final clip
  • Suggestions:
    • iterate transitions
    • verify playback (loop forward/back) to choose the best result
  • Download the resulting video and use it in the site

4) Build the site + integrate the animation (Claude Code + Anti-Gravity + 3D website skills)

  • Download/import two skill folders into Anti-Gravity:
    • asset generation
    • 3D website builder
  • Use Claude Code with a “scroll stop / scroll-driven animation builder” style skill
  • Demo result: an MVP with:
    • scroll-stopping behavior (“scroll stopper MVP”)
    • embedded logo transition
    • the generated van/exploded-item animation appearing during scroll

5) Publish and host (GitHub + Vercel + MCP / API keys)

  • Connect:
    • GitHub (repo creation)
    • Vercel (hosting)
  • Uses MCP (Model Context Protocol) in Anti-Gravity to connect integrations
  • Anti-Gravity can:
    • create a GitHub repo
    • publish to Vercel
    • refresh and verify the live deployment
  • Optional:
    • buy a custom domain in Vercel

HTML extraction + replication technique (structure reuse)

The video also shows how to replicate an existing website’s structure:

  • Use an “HTML website extractor” to download a site as HTML
  • Feed the HTML into Anti-Gravity with a prompt like:
    • “Recreate using the new copy + include the scroll-stopping animation”

Key benefit described:

  • Extract and reuse elements like logo/typography and layout structure
  • Add new animation polish

Demonstrated on:

  • At least two examples (including a “rocket.new” style example), using the same overall “vibe” but different generated imagery/animations from Nano Banana 2

Multi-page website creation + SEO optimization (skills + reporting)

Multi-page generation

  • Prompt Anti-Gravity to:
    • infer/design language from the current site
    • decide which pages to create (example: About, Testimonials, Team)
    • match design across pages
    • add full SEO optimization, including:
      • responsive layout
      • navigation updates across pages
      • structured data (JSON-LD)

SEO audit across every page

  • After pages are created, an SEO audit runs on all pages

Claude Code / “SEO optimizer” skill capabilities (as shown):

  • “SEO strategy” mode can:
    • fetch the home page and discover internal pages
    • fetch robots.txt and sitemap
    • analyze each page individually + cross-page analysis
    • generate an HTML report
    • optionally focus on specific URLs/pages
  • Outputs:
    • page-by-page findings
    • executive summary
    • issues/strengths breakdown
    • keyword/internal linking guidance
    • an action plan + implementation checklist
  • Demo notes include:
    • a numeric score example (e.g., “D score / score out of 100”)
    • details like content size analysis and keyword usage with technical/strategic recommendations

Analytics integration (Vercel)

After publishing, the workflow can inject Vercel analytics code via Anti-Gravity, with metrics like:

  • visitor counts
  • speed insights

Main speakers / sources

Speaker

  • Jack Roberts (identified in subtitles: “my name is Jack Roberts…”)

Tools/sources referenced

  • Firecrawl (firecrawl.dev) — branding extraction; API mention
  • Claude Code / Claude skills
    • skill creator, prompt/asset generation
    • scroll animation builder
    • SEO optimizer
  • Nano Banana 2 — image/3D-style asset + exploded animation video generation
  • Anti-Gravity — website builder and publishing agent
  • HitFilm — video generation/editing step in the demo
  • Vercel and GitHub — hosting and repo publishing
  • HTML website extractor — replicating site structure
  • MCP (Model Context Protocol) — integration mechanism in Anti-Gravity

Original video