diff --git a/raw/_processed/Claude Code + Nanobanana 2 = $10K Websites in 20 Minutes.md b/raw/_processed/Claude Code + Nanobanana 2 = $10K Websites in 20 Minutes.md new file mode 100644 index 0000000..9c470af --- /dev/null +++ b/raw/_processed/Claude Code + Nanobanana 2 = $10K Websites in 20 Minutes.md @@ -0,0 +1,122 @@ +--- +title: "Claude Code + Nanobanana 2 = $10K Websites in 20 Minutes" +source: "https://www.youtube.com/watch?v=dBctbwlYLUY" +author: + - "[[Varun Mahaan]]" +published: 2026-04-12 +created: 2026-04-15 +description: "🚀 Try LaunchPath (build + deploy AI agents) → https://www.trylaunchpath.com 📚 Join The AI Blueprint (learn to build + sell AI) → https://www.skool.com/theaiblueprint 📋 Prompt library + all resour" +tags: + - "clippings" +--- +![](https://www.youtube.com/watch?v=dBctbwlYLUY) + +🚀 Try LaunchPath (build + deploy AI agents) → https://www.trylaunchpath.com +📚 Join The AI Blueprint (learn to build + sell AI) → https://www.skool.com/theaiblueprint +📋 Prompt library + all resources from this video → https://www.skool.com/theaiblueprint + +I built a 3D animated website with scroll-driven animations using Claude Code + Nano Banana, then embedded a live AI agent widget straight into it — without having to code. No Figma, no templates, no drag-and-drop builders. + +Then I showed you how to add Launchpath's website widget so your AI agent is live and talking to visitors the moment the site goes up. + +## Transcript + +**0:00** · Nano Banana 2 plus Claude Code just changed website building forever. You can now build scroll driven animated websites worth 10k even if you've never seen a line of code before. Plus, I'll show you how to add an AI agent to the website that captures leads and books appointments. That's what takes the website from being around 200-300 pound expense to getting 500-600 even a thousand pounds per month worth of recurring revenue. But obviously, I'm sure most of you guys know, if you don't do this the right way and your strategy is wrong, you'll just end up with a website that looks like AI slop and looks completely vibe coded. + +**0:29** · So, we're going to go through how to design, how to build, and how to deploy a complete website with a scroll driven 3D premium experience, the whole lot of it. Now, obviously, the point of this is so you can go out and sell to businesses for about 3 to 5k even, that's what a designer would charge for this. And the point of me showing you this is so you can go out and actually sell to businesses rather than just making these ugly vibe coded templates that everybody else uses. + +**0:53** · Now, my name's Varen Mahan, and for those of you who don't know who I am, I run a 35k per month AI agency building and selling AI systems and websites like this. Okay, cool. So, when doing this, we're going to go through four different steps. The first is building out the website. So, what we're going to do is tell Claude Code, give it a prompt with a few different skills to make it a website with heroes, listings, services, testimonials, contact forms, footers with a premium dark design. + +**1:18** · I'm going to use Nano Banana Pro to generate a 3D image, which is going to be of a luxury property render on a matching background color. And then the third step is obviously turn that image into an animated video. We're going to do that using Kling 3.0. And we're basically going to have it as the house rotating with interior dissolving or something along the lines of that. And then finally, we're actually going to add the scroll video to the website so it gives that scroll driven premium experience. Literally, that's it. + +**1:45** · There's four steps, and we're going to build a website that can probably be sold for about 10k in about 15 to 20 minutes. So, the first thing that we're actually going to come and do is come over to this GitHub skill. Now, I'll leave this in the link in the description along with all the other prompts. And what this skill basically does is we're going to add it into Claude Code, and it allows us to actually make a non-vibe coded looking website. It's basically a set of skills that will take it from AI slop to something that actually looks premium. + +**2:10** · The animations, the typography, the spacing, the alignment, everything. + +**2:15** · Okay, so firstly, what I'm going to come and do is click this and just copy the code to this GitHub repo. Okay, so I've just pulled up Claude Code here. What I'm going to do is copy in that skill, and then I'm basically going to say to Claude, "Okay, so this is a skill for front-end design, which is really going to help us build beautiful websites. Now, what I want you to do is add this skill into this project." And then I'm just going to send that over. A little tip, by the way, when you're actually doing projects, just come over here to the bottom right and change the permission settings to bypass permissions. + +**2:44** · It just means that every 2 seconds, you don't have to keep on clicking accept and approve. It will just auto-run by itself. You can sell this to any local business. I'm probably going to choose a real estate agency just because I've actually built websites before for them and sold to them as well. But you can do dental clinics, you can do plumbers, HVAC installers, whatever. I imagine a few years ago, you would have had to pay a developer probably about 5k for them to do something cool like this, but now you can do it for under 3 to 4 pounds in about 15 minutes, so it's pretty insane. + +**3:15** · Now, I also just want to clarify, I know I haven't gone through the Claude Code installation setup in this video. I'm just going to assume most of you guys have got it running. If you haven't, I'm going to leave a link in the description to a video that you should go and watch, and that will be basically mastering the basics of Claude Code before you start building certain projects and things like that. Okay, so it's now downloaded skill. I'm just going to go ahead and clear this conversation. Now, what we're going to do is get the prompt so Claude Code can actually go ahead and build the website. Now, like I said, if you want the link to all the prompts, they will be in the description. + +**3:46** · All I'm going to do is come here, copy and paste this prompt, go back to Visual Studio Code, paste it in, and then change it to bypass permissions and then send it off. Okay, so just going through the prompt, I've basically said, "Okay, use the design skill that we just implemented to create a high-end visual design and full output enforcement skills to design a high-end website for a premium real estate agency. The agency helps people buy and sell luxury properties in London." + +**4:13** · I've told it the sections that it needs to include, so hero, scroll indicators, etc. And then I've also clearly explained what I want the appearance to be, so I've said dark and premium, think luxury real estate, not generic estate agent. And now, as you can see on the screen, Claude actually goes ahead and just builds out the whole thing. And the process Claude Code is actually following here is it goes through the skills for typography, for spacing, for alignment, for color schemes, everything like that that I'd previously said, and it builds out something that, yeah, doesn't look like AI slop. + +**4:43** · Without these skills, oh my god, I can't even explain to you the websites that I've seen Claude Code create when it has no skills. You literally just get some generic template, and of course, if you're selling it to businesses and even if it's for your own business, that's not something that you want. And then once Claude Code has built out the website, we'll go through it, and bear in mind, this is one shot. Usually with Claude Code, you do have to go back and forth a few times just to get perfect, but I'm pretty sure this is going to output something pretty insane for one shot. + +**5:12** · It's a Claude Code has now built out the website, so I'm going to basically say to it, "Give me the local host so I can view this website." All a local host is is a link that's only accessible on your computer. So, it's now given me the local host, so let me go ahead and click on that, and the website should load. Okay, wow. As you can see, I have many this code, but as you can see, the design is on point, the fonts look very premium, the color scheme, a nice black and gold. So, let's actually go down and scroll. + +**5:41** · Okay, like I asked it to do, I guess there's a bit of formatting issue here, like the price is a bit down on the screen. But like I said, you have to go back and forth a little bit. But for a first shot, this is very impressive. Again, here I'll probably change these to be more white like when I highlight it. These are all very minor changes that you can go ahead and do to make it perfect. + +**6:03** · Yeah, and like I said before, the fact that I've done this in one prompt and Claude Code has outputted this in one prompt is is insane. Now, of course, this website looks amazing already. It already looks insane. But in this video, we're going to take it to the next level by actually adding a scroll driven animation on the background of this website. Okay, so you can now see the website, the insane website that Claude Code just created in one prompt. Now, to get the scroll driven animation, obviously, we need to start with a picture, and we're going to use Nano Banana 2, I believe, to do that. + +**6:32** · So, the first thing I need to do is get the background color scheme of the website so the picture can match. I'm all I'm going to do is just ask Claude to give it me, so "Can you give me the exact background color of the website?" And then send that off. And then we're going to go back to the prompt library, copy and paste the prompt into Nano Banana 2 so it can build out this picture for us. + +**6:52** · Okay, cool. It's given me the background color. Now, we're going to come to the prompt library, and then we're going to copy and paste this prompt into Google AI Studio. + +**7:00** · Again, a link to Google AI Studio will be in the description. And as you can see here, we need to add the background color, right? So, all I'm going to do is come back to Visual Studio Code. I'm going to copy the color here, come back to Google AI Studio, and then where it says match website background color, I'm going to just paste that in there and then send it off. And the reason why you want the background of the image to be the same as the background as the website because if I have a different color, it's not going to blend into the website. + +**7:28** · It's going to look really weird, and the animation is just going to look super weird as well on a different background. With the colors being the same, it just sort of seamlessly blends in. And just a quick note, by the way, you do need a paid API key, but this literally costs like less than a dollar, so yeah, should be pretty affordable. Okay, cool. So, Nano Banana has now generated this image of a 3D house. Now, what we're going to do is download this, and obviously, we now need to turn this image into a video. + +**7:52** · And this is probably actually the coolest part of the process, to be honest. Okay, so how we're going to do this is come over to Kling 3.0. So, Kling 3.0 is basically a video model that you can use again, costs less than a dollar to run this. And what we're going to do is go back to the prompt library, and then we're going to use this prompt to turn that image into an animated video. So, all I'm going to do is come again, copy and paste it back into here, and then delete whatever that prompt is, paste that in. Okay, there are a few settings that you actually need to configure here. + +**8:22** · The first thing, the start frame needs to be the image that you've just generated, so I'm just going to drag and drop that. You don't want to have an end frame. I mean, you can if you want, but you don't need one. + +**8:33** · Okay, so once you've got the video as the start frame, to just save credits, you can turn off the sound because your website probably doesn't need sound. And then make sure you set the duration to 5 seconds as well, and then the mode should be on pro. And then you just want to run this. Yeah, just remember that this video will be going onto the website that we just saw, which is this, so it'll be in the background of this website here. Okay, so it's generated the video. Let's see what it came up with. So, the house is rotating exactly like we asked it. Yes. + +**9:00** · Beautiful. Brilliant. Okay, so we're going to download this again to the computer, and then now we're actually going to put this video onto the website that we just created. Okay, so now we basically need to just piece everything together. We've got the video, the animated video, and we've got the website, so we just need to put the video onto the website. Okay, so the first step to actually go ahead and do this is take this skill.md file, and then just put that into Claude here. And then we're basically going to say, "Okay." + +**9:26** · I'm basically going to tell Claude, "Okay, so I've just uploaded a file called skill.md. Now, this is a video to website skill that allows you to take a video that I'm going to paste in here and put it onto the website. So, I want you to store this as a skill." + +**9:40** · And then you just send that off. Okay, so as I just said in the prompt, this is a skill.md, and it's a video to website skill, which basically means the video that you put in the project, which is obviously the animated video that you just made through Kling, it will enable Claude to take that video and seamlessly combine it in the background of your website. Okay, now that skill is stored. + +**9:58** · I'm going to drag the video that we just made and then I'm going to put it into Claude. Okay, so now I've just added this video into Claude. I'm going to come back to the prompt library over here. Let me just full screen this. Go back to the prompt library and this prompt is basically going to tell Claude, okay, use the skill that we literally just created now to take that video that we put into Claude and seamlessly integrate it into the website. So, I'm just going to command V on Okay, so just to recap what we've done here. We've got the video that we made from Kling 3.0. + +**10:29** · We've downloaded it, installed it, or exported it into our project folder. Then we got Claude to create the skill for the video to website, which will be in the prompt library, and then we're using that skill, the video to website skill, so that Claude can get the video we created and then integrate that into the website that we also made. Okay, so Claude has now used the video to website skill. So, let's click on localhost and check it out. Okay. + +**10:54** · Okay, I'm actually kind of excited for this. So, let's see. Okay. + +**10:59** · Wow. You know what? I'm pretty I'm pretty speechless, you know, because uh remind I've done no back and forth with Claude. I've literally made the website in one prompt. I've made that animation in one prompt. Made the image in one prompt. And now I've put this animation onto the website all in one prompt. + +**11:17** · Obviously, if I wanted to perfect this, for example, uh let me find it. Here, this subtext here is not that visible, right? Because the text is on white. So, I'd probably say, okay, can we change that? And all you want to do, if there are certain things that you want to change, is screenshot the change that you want. So, for example, if I wanted this text to change, I would just screenshot this here. I would go back into Claude and say, okay, X Y and Z text is on it not really visible right now. Could we make it a bit more white or do you have any other ideas to make it pop? It's really that simple. + +**11:48** · But, I'm literally building this in 15 minutes is like it would have taken a developer before probably about a week to build this and I've just built it in 15-20 minutes. That's the capabilities that we now have. We've had to get no developer. We haven't used any code at all. No 3D kind of software. + +**12:04** · Nothing like that. Okay, now there's a few things that you can actually do to improve this website. So, you can go on to 21st.dev. Now, 21st.dev is basically a website for other websites where you can get other components. There's pretty cool components on here. I'm not going to do that in this video just for time's sake. But, this is definitely something I would recommend, you know, if there are certain things while you go through this that you like, you know what? I would like to have that, maybe a sidebar or the navigation bar or the scroll. + +**12:33** · Whatever it is, you can come to 21st.dev, get it, copy and paste it, take a photo of it, put it into Claude code, and basically say, okay, X Y and Z component I really like. Can we implement this into our website? Okay, now most other people and most other videos they would stop here and that would be it. The way that we're going to take this to the next step, not only just oh, next step and make it look cool, but actually to get you paid, because that's the most important thing, is adding an AI agent to this website. + +**12:59** · And this is the one thing that I always do when I add to my websites that separates me from the competition, because your competition will literally just build out websites. Yeah, they might do the scroll driven animation as well. Looks cool. But, I build them something that looks really premium, polished, high quality, and then I also give them tangible results of capturing leads and booking appointments through the same website. And the best part is it's super simple to do. I'm literally just going to give Claude code one command using Launch Pad's MCP server. + +**13:26** · It will configure the entire agent and deploy it onto the website that we've just created. Now, Launch Pad is a platform where you can build, train, and deploy AI agents. You literally just describe what the agent should do in plain English. You then train it based on the website or any documents that you may have, and then you deploy it. It's literally that simple. And the MCP server, which I'm going to use now, basically allows you to use it inside of Claude code. And if you want the link to be able to do that, it'll be in the description. + +**13:51** · Okay, again, we're going to come back over to the prompt library and then we're going to copy and paste this prompt, go back to VS code, and paste it in. And all this prompt basically says is deeply analyze the HTML, which is just the code in the website, understand the business, the branding, colors, fonts, tone of voice, and everything the agent would need to know about this business. Now, using the Launch Pad MCP, we're going to create a lead capture agent for this website that can qualify visitors and book appointments. + +**14:20** · What it's also going to do is connect the Google calendar, so the agent can actually book appointments for visitors and I'll demo that in this video as well. And then we're going to deploy it as a website widget campaign, obviously, because we're connecting it to our website. But, you can also deploy it as WhatsApp campaigns as well. So, Claude code right now is working through it. It's pulling all the HTML, the fonts, the colors, the branding, so it can create a website widget that matches that style. What Claude code is also doing is it's actually configuring a custom system prompt for the exact business. + +**14:48** · It's also going ahead and connecting Google calendar, so that when someone asks to book a viewing, the agent can actually go ahead, find the available times in the calendar, and more importantly, book the slot. Okay, so again, Claude code has now sent it back. So, now let's load it again. And you can literally see in the bottom right, from one prompt again, it's configured an agent. As you can see, it's got the exact color scheme, this exact gold yellow kind of color and the exact black. Welcome to Arden and Co. + +**15:14** · Obviously, that's just a a random name, but you would obviously configure it to the exact business that you're talking about. I'm here to help you explore London's finest residencies residencies or connect you with one of our senior consultants. How may How may I assist you today? So, now I'm going to walk through step by step exactly how this agent would go ahead and book something into your calendar. By the way, take into consideration before you would have to configure a bunch of silly little nodes on N and get everything together and that. That would take ages because you would actually have to learn how N and works. + +**15:45** · I have literally just created this in one single prompt in about 20 minutes. We've gone from not having a website to having a website, creating a scroll 3D animation that looks premium and polished, and having an agent that actually books appointments. So, I'm going to say to it, okay, yeah, I'm literally just looking to book a viewing. Um when are your available times to be able to do this? And then I'm going to send that over. Okay, so it's asked me to clarify a couple of things. Which property interests you? And what time frame works best? So, feature resident. + +**16:14** · Okay, so I'm just going to say, yeah, so in terms of the properties, the Chelsea townhouse really interests me. + +**16:23** · And time frame, could you do 1st of April, 10:00 a.m.? Does that work? And then I'm actually going to show you this getting booked into the Google calendar. + +**16:31** · And obviously, you would go ahead and connect the business's Google calendar. + +**16:34** · But, if you're just showing a demo, you can just connect it to yours. That works fine. Again, it's just asked me to clarify a few things. So, it wants my my name, my email, and phone number. So, let me just go ahead and My name is Varun Mohan and my email is varun123@gmail.com. + +**16:52** · So, let me send that over. Okay, so it said, perfect. Thank you, Varun. Let me book that viewing in. So, it should have booked in Wednesday, 1st of April at 10:00 a.m. So, if we go over to the Google calendar, you can literally see it's booked in for the exact time on the 1st of April at 10:00 a.m. to 11:30 a.m. + +**17:08** · It's got the exact property I was interested in, the the Chelsea residence. It's got my email. Obviously, this is a fake email. And then it's got private viewing for my name. And then it's got details about the property. + +**17:21** · Literally all in one prompt. How How \[ \_\_ \] crazy is that? This agent can now just sit on this website 24/7, book viewings in while the agency sleeps. I want you to just understand how crazy that is. You're providing them ongoing value. You've provided them a website, a premium and polished website that has a animated 3D scroll animation. But, you haven't just stopped there. We've then added an AI agent that captures and qualifies every single lead that goes onto their website. + +**17:45** · We've built and sold AI agents like this to local businesses like real estate agencies for an upfront cost of about 3 to 4K and then ongoing maintenance and management for about 500 to 700 pounds per month. And the thing that they don't know is it takes us about 15 minutes to do from our side. + +**18:03** · So, there you go. That's literally it. + +**18:05** · That's how simple this process is. So, we just built a scroll driven animated website that you can sell for about 3 to 4K upfront with Claude code, Nano Banana 2, and Kling 3.0. We then added an AI agent that captures every single lead that goes onto the website and then books in viewings all autonomously. Now, if you want the exact systems and the guidance to be able to do this yourself, all of that is in my AI community, which will be the first link in the description. I hope you guys all crush it and I'll see you in the next one. \ No newline at end of file diff --git a/wiki/_master-index.md b/wiki/_master-index.md index 4a609eb..5c2f1dc 100644 --- a/wiki/_master-index.md +++ b/wiki/_master-index.md @@ -27,6 +27,7 @@ This 3-hop pattern works for hundreds of articles without vector search. | [[wiki/connections/_index\|connections/]] | Cross-cutting insights linking 2+ concepts | 0 | | [[wiki/qa/_index\|qa/]] | Filed answers to queries (saved with `--file-back`) | 0 | | [[wiki/homelab/_index\|homelab/]] | Self-hosted infra: Proxmox install, IOMMU/PCI passthrough, hypervisor setup | 1 | +| [[wiki/web-agency/_index\|web-agency/]] | AI-assisted website building & selling: Claude Code, Nanobanana 2, Kling, LaunchPath MCP | 1 | diff --git a/wiki/web-agency/_index.md b/wiki/web-agency/_index.md new file mode 100644 index 0000000..1d2e398 --- /dev/null +++ b/wiki/web-agency/_index.md @@ -0,0 +1,7 @@ +# Web Agency — Topic Index + +> Workflows, pricing models, and tool chains for building and selling AI-assisted websites and agents to local businesses. + +| Article | Summary | Source | Updated | +|---------|---------|--------|---------| +| [[wiki/web-agency/claude-code-nanobanana-website-workflow\|Claude Code + Nanobanana 2 Website Workflow]] | 4-step workflow: Claude Code site → Nanobanana 2 image → Kling 3.0 animation → LaunchPath AI agent widget. £3–10K sell price in 20 min. | YouTube / Varun Mahaan | 2026-04-15 | diff --git a/wiki/web-agency/claude-code-nanobanana-website-workflow.md b/wiki/web-agency/claude-code-nanobanana-website-workflow.md new file mode 100644 index 0000000..b2eec73 --- /dev/null +++ b/wiki/web-agency/claude-code-nanobanana-website-workflow.md @@ -0,0 +1,98 @@ +--- +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`