Claude Code + Nano Banana Just Changed Web Design

Study Guide

Overview

This video presents a practical workflow for building animated landing pages that stand apart from the flood of generic AI-generated websites. The core technique combines AI image generation (Nano Banana Pro), AI video generation (Kling or Veo), and Claude Code to produce animated hero sections with minimal manual coding. The result is a polished, deployable website with a "wow factor" that most AI-built pages lack.

The Core Problem: AI Slop in Web Design

As AI website builders have become mainstream, the web is filling up with pages that all look and feel the same. These generic outputs lack personality, movement, and visual distinction. Adding subtle animation to a hero section is one of the simplest ways to immediately differentiate your site from the competition.

The Four-Step Workflow

Step 1: Image Generation with Nano Banana Pro

The process starts with creating a high-quality starting image inside Nano Banana Pro. Two things matter here: the prompt itself and the reference inspiration you feed the model.

  • Prompt engineering: Use a structured prompt template that breaks your idea into camera type, description, atmosphere, and other components. Feed your rough idea into an AI system to transform it into a well-formatted prompt.
  • Reference images: Pull visual inspiration from Midjourney's search, Pinterest, or other sources. Paste these into Nano Banana Pro as style references alongside your text prompt.
  • Landing page context: Before generating the image, think about how it will sit on the final page. Consider composition, dead space for text overlays, and overall layout. Use Dribbble or godly.website for landing page inspiration.
  • Iteration is expected: Getting the perfect image on the first try is unlikely. Plan for multiple rounds of generation and refinement.

Step 2: Video Creation from the Starting Image

Once you have a strong image, you convert it into a short video using a model that accepts a starting frame, such as Kling 3.0 or Veo 3.1.

  • Keep motion minimal: The prompt should emphasize static composition with extremely slow, subtle motion. Overly dramatic animation looks tacky on a landing page. The animation should accentuate the content, not steal the show.
  • Use "hands off" mode: Stay in full control of the prompt rather than letting the model auto-generate motion.

Video Length: 15 Seconds vs. 5-Second Loop

You have two approaches to the hero video:

  • 15-second video (recommended): Simpler to implement and gives more creative freedom. The tradeoff is a slight stutter when the video loops back to the beginning. In practice, most visitors will not sit on the hero for 15 full seconds before scrolling.
  • 5-second loop: You can create a seamless loop by copying the video, reversing the second half, and stitching them together (Claude Code can handle this with ffmpeg). However, this constrains your creative options because directional motion will look janky when reversed.

Step 3: Building the Landing Page with Claude Code

Create a new project directory, drop in both the image and the video file, and open Claude Code. The minimum prompt should include:

  • What the landing page is for
  • Instructions to use the MP4 for the animated hero section
  • Instructions to use the still image as a mobile fallback (do not load video on phones)
  • A request to use a front-end design skill or tool

Enhancing Design Quality

  • Claude Code skills: The "Front-End Design Tool" skill and the "UI/UX Pro Max" skill both help Claude Code produce more polished designs. The UI/UX Pro Max skill includes industry-specific design patterns and can be installed from its GitHub repo with two commands.
  • Reference screenshots: Feed Claude Code screenshots of websites you admire. More context upfront means less iteration later and less generic output.
  • 21st.dev components: This site offers pre-built UI components with copy-paste prompts for Claude Code. Instead of describing button styles from scratch, find a design you like, copy the prompt, and paste it directly into Claude Code.
  • Dev server: Add "spin up a dev server when finished" to your prompt so you can preview the result on localhost immediately.

Step 4: Deployment via GitHub and Vercel

The deployment path is straightforward and free:

  1. Push to GitHub: Create a new repository on GitHub (free). Copy the repo URL, then tell Claude Code to "commit and push our code to this new repo." If this is your first time, Claude Code will walk you through GitHub authentication.
  2. Deploy on Vercel: Sign up for Vercel using your GitHub credentials (free tier). Go to your dashboard, click "Add New Project," import your repo, and deploy. Your site goes live with a Vercel URL that you can later map to a custom domain.

Key Takeaways

  • Animated hero sections are a simple, high-leverage technique to differentiate AI-built websites from the generic crowd.
  • The full pipeline (image, video, Claude Code, deployment) requires no traditional coding experience.
  • Less is more with hero animation. Subtle, slow motion outperforms flashy effects on a landing page.
  • Front-loading context and references into Claude Code dramatically reduces iteration cycles and improves output quality.
  • The entire workflow, from image generation to a live deployed site, can be done using free tools (Nano Banana Pro, GitHub, Vercel).
YouTube