---
title: "Claude Code + Nanobanana 2 — $10K Website in 20 Minutes"
aliases: [nanobanana-website-workflow, ai-website-building, scroll-animation-website]
tags: [claude-code, nanobanana, kling, website-building, ai-agency, lead-capture, mcp]
sources: [raw/Claude Code + Nanobanana 2 = $10K Websites in 20 Minutes.md]
created: 2026-04-15
updated: 2026-04-15
---

## Overview

A 4-step workflow to build a premium scroll-driven animated website with an embedded AI lead-capture agent — entirely without writing code. Target sale price: £3–10K upfront + £500–700/month retainer.

**Tool chain:** Claude Code → Nanobanana 2 (image) → Kling 3.0 (video) → LaunchPath MCP (AI agent)

---

## The 4-Step Workflow

### Step 1 — Build the Website with Claude Code
- Add the `frontend-design` skill (GitHub repo) to the Claude Code project
- Use a detailed prompt: sections (hero, listings, services, testimonials, contact, footer), appearance (dark/premium, luxury), typography + spacing requirements
- Enable **bypass permissions** in VS Code bottom-right to skip approval clicks
- One-shot output is viable; minor tweaks expected on first run
- Run on localhost to preview

### Step 2 — Generate the 3D Background Image (Nanobanana 2)
- Ask Claude for the exact hex background color of the website
- Feed that color + a prompt into **Nanobanana 2** via Google AI Studio (paid API, ~$1)
- The image background must match the site background exactly — otherwise the animation won't blend in

### Step 3 — Animate the Image into a Video (Kling 3.0)
- Upload the generated image as the **start frame** in Kling 3.0
- Settings: no end frame, no sound, **5-second duration**, **Pro mode**
- Cost: under $1 per generation
- Download the resulting `.mp4`

### Step 4 — Integrate Video + Add AI Agent
- Load a `skill.md` (video-to-website skill) into Claude, then drag the video file into the project
- Prompt Claude to use the skill to embed the video as the hero background
- Add AI agent via **LaunchPath MCP server** with a single prompt:
  - Analyze HTML for branding, colors, fonts, tone
  - Create a lead-capture + appointment-booking agent
  - Connect Google Calendar
  - Deploy as website widget

---

## AI Agent Widget Details

- Configured entirely from one prompt via LaunchPath MCP
- Matches site color scheme automatically
- Qualifies leads, collects contact info, books calendar slots
- Runs 24/7 autonomously — no N8N nodes or manual wiring

---

## Pricing Model

| Deliverable | Price |
|---|---|
| Website build (one-time) | £3,000–£10,000 |
| AI agent setup (included) | — |
| Monthly maintenance/management | £500–£700/month |

Total build time: ~15–20 minutes. Cost of AI tools used: under $3–4.

---

## Enhancing the Output

- **Minor fixes:** Screenshot the problem area → paste into Claude with instructions
- **Additional components:** Browse [21st.dev](https://21st.dev), screenshot what you like, ask Claude to integrate it
- Iterate with targeted prompts rather than full rebuilds

---

## Key Takeaways

- A **frontend-design skill** in Claude Code is the difference between "AI slop" and a premium-looking site — never build without it
- Match image/video background color to site background for seamless scroll animation
- The AI agent widget (LaunchPath MCP) is the real upsell: it converts a £200–300 one-time site into a £500–700/month retainer
- All four steps can be done in one prompt each — total cost under $4 in AI credits
- Kling 3.0: 5 seconds, Pro mode, no sound, no end frame is the optimal config for hero background loops

---

## Related Articles

- [[wiki/tech-patterns/frontend-design-skill|Frontend Design Skill for Claude Code]]
- [[wiki/architecture/multi-agent-patterns|Multi-Agent AI Patterns]]

---

## Sources

- YouTube: *Claude Code + Nanobanana 2 = $10K Websites in 20 Minutes* by Varun Mahaan (2026-04-12)
- Raw file: `Claude Code + Nanobanana 2 = $10K Websites in 20 Minutes.md`
