📱

Get Our Mobile App

Take your business learning on the go!

Download on the App StoreGet it on Google Play

NEW Nano Banana 2 + Claude Code = $5,000 Designer

Shaz Mathew13:24

Transcription

Google just dropped Nano Banana 2, their best image generation model ever. And when you combine this with Claude Code, which we're demoing in this video, honestly, you get something that should not be this easy.

Whether it's generating ad creatives or product images or building entire landing pages like this one right here with awesome accurate graphics, you could do all of this in 5 minutes with nothing but typing in prompts using Nanobanana 2 and Cloud Code. And what most people are talking about are generating standalone images using NanoBanana 2, which is fair. But when you combine this with cloud code, you get a full AI marketing creative department that understands your business, has Nano Banana 2. Now you can generate anything that you want. And again, this could be the landing pages or websites, social media graphics, lead magnets, whatever you could think of, you can now generate.

By the end of this video, not only are you going to have the quick start guide to combining Claude Code and Nano Banana, I'm also going to give you examples of what you can build and my best practices, plugins, and skills to make sure that everything you generate is quality and on brand for your company.

So, first to use this, we're obviously going to need Claude Code. If you go to Claude Code Docs quickart, Google that. You'll see their entire step-by-step process to downloading Claude Code. And to do this, you do need a minimum of a pro account, which is $20 a month. Trust me, you're going to make an ROI on this almost instantly.

And to access Nanobanana 2, obviously you have the free version using it in the Gemini app at gemini.google.com or go to Google AI Studio Generate you an API key that you could then give to claude code and it's 10 cents an image which is much cheaper than nano banana the first version. This is why it's so powerful. You generate amazing creatives and it's cheaper at the same time.

And to do this step by step, it's going to take like 30 seconds. Go over to Google AI Studio, go over to get API key down here, create a new API key, name it something, create the key, and just copy that and save it somewhere safe. If you're going to use this to then connect to cloud code in a few moments and you know you have the right thing is we'll start with AI za and then a bunch of just letters and numbers combined together. Again, make sure to copy it and keep it somewhere.

Once you have the Nano Banana 2 API key and you have Cloud Code set up and running, we're going to connect these tools by simply just giving Cloud Code av file and giving it the Gemini API key so it could reference it whenever we generate images and product images and landing pages like I'm going to show you in the rest of this video.

So, you can simply just navigate over to Cloud Code. I'm running it in Visual Studio or VS Code. You can run this in the terminal. You can just say, "Hey, I need you to create av file. I have a new Gemini API key that I need to put in there." So, you could save it safely and we can reference this whenever I'm creating images or different things that I use Gemini Nano Banana 2 Pro for. Boom. You're going to do that. You're going to hit enter. I already have this all set up, but what it's going to do, it's going to create you av file. And you could either give it the API key right here, or if you want to be a little bit more safe, you can say, "Hey, open up thev file. I'm going to paste it in myself." So, I'll say, "Please open this up myself. I want to paste it in." And what it's going to look like, it's going to look literally just like this. And then you're just going to paste it right after the equal sign. That's all that there is to it. So, it's going to write that. Again, I already have this set up, but you're going to see exactly what it does right now. Like I mentioned, I already have this set up. So, it said like, "Hey, you already have this set up." That's exactly how you go about setting it up. If you have questions, just leave a comment down below or ask Claude and it will help you troubleshoot.

Now that that's all set up, let's just go ahead and build out a product landing page from scratch. If you want to follow along, all of the templates, the prompts, everything will be for completely free down below in the description. You can feel free to grab that there and follow along.

Now, for a product landing page, there's a few different components. You have a hero, you have features, you have a call to action, you have images. So, first we're just going to generate the prompt. And there are some nuances in the new way to prompt Gemini 2. So, the golden rule here is essentially you want to use natural language, full sentences, camera details, and this is what's going to separate the premium versions of what we're generating from AI slop. Now, what I'm going to show today is going to be bare bones. Uh, but that's uh one of the main comparisons we have between the old prompts for the first version of Nano Banana or just the updated prompts for this version.

All right, so first a lot of people will keyword stuff uh just like this right here and you might get something that's overprocessed or AI slop now getting to the point where if it's super AI and techy, it's a massive turnoff and it's actually a net negative to your business what you're doing. So you want to avoid that. What you want to do is something like a photographer style. I would like a professional product photography, studio lighting, uh, lens, depth of field, all of those things. If you don't know a lot of this, I don't even know a lot of this, you could continually work back and forth until you find what you like. Save that prompt somewhere and you could use it over and over. I'm also going to leave my prompts that I'm using down below in the description if you want to check those out. And this is exactly what's in the free download again if you want to follow along.

Also, some Nana Banana 2 tips for doing this is edit don't regenerate. So, instead of regenerating the entire thing, which honestly it's not the best at, it's going to change different aspects, say, "Hey, keep this, this, and this." So keep 80%. Let's change this. Let's make this softer. Let's change the font or the color of this specific thing. That's the best way to do it. So you don't burn through tokens one and you don't get something different every single time. And then all of a sudden if you keep on doing it, you're going to end up with something that you didn't even start with, which we want to avoid. Next is put text in quotes. That's just something I picked up from from prompting and also seeing resources on the internet. And then match backgrounds. All right. So this is uh basically what you want to tell it. If you want a white site, this is a white background. If you want a dark site, it's a dark background. Sort of get the point there. And those are some tips on nano banana prompting.

Here are some tips on cloud code prompting. Let's do this together. So, what I'm going to do is actually take that prompt from before and I'm going to paste it into claw code. Say, give me a professional product photography of a wireless headphones. So, something that I use every day is my wireless headphones from Sony. I want studio lighting with soft shadows in the upper left. Shot from 3/4 angle with a 35 mm lens, shallow depth, etc. I'm just going to say for clarity sake, cloud code will pick up on this, but please Gemma generate this with the newest version of Nano Banana from the Gemini API key that I just gave you. Just for clarity there, we're going to run this and what it's going to do, Cloud Code is going to talk to Gemini through the API. Talk to Nano Banana 2, generate the image, and then output it on a folder in your machine.

All right, in one single prompt, I got exactly what I was looking for right here. I'm not going to show you the cloud code check because it has my API keys all over the place, but this is one single prompt and this is a product shoot. Just think about what you can do for your e-commerce brands, running ads, spinning off creatives of this. I'm actually going to give it one more prompt and ask it to tweak the angle and let's see what it comes up with. I love everything about this. Can we just tweak the angle? Let's do it from the top down and then add a box. It could be a no-name box. I just want to show the package. So, I'm saying, "Hey, this is what I like. This is what to change." So, at all costs, keep what we already have, which is like the white background and the lenses and the angles, the millimeter camera and all that stuff. You want to keep that, but I want to change a few things. So, that's just a way I recommend you prompt it. So, you lock in what you like and you can change the little things you don't. And this is what it came up with. So, I should have said like remove this first one, but top down angle listen to that. And then it gave a box and it even gave like how this would come into that's like how this is I would unbox anything, right? So I didn't even tell it to like add this. I didn't tell it to open the box. I just said, "Hey, put a box." And again, using context clues is a pretty start model. It came up with this. So just think about all the possibilities you could do. You could generate hundreds of these, split test them, run ads to them. The possibilities are almost endless, especially with how easy this was to truly set up.

All right, Now, let's build out something more complex like a landing page for example. And some cloud code prompting tips that I have are give it an example. like Apple. If you like how that landing page looks like, say, "Hey, build it like Apple." Um, just give it a reference layout structure as well. Like the more information you give it about the layout, the better it's going to handle that. And then behavior as well. So, if you want animations, it'll actually take into account this without you saying anything. If you want specific animations, like it moving, going up and down, left to right, just say that specifically.

Now, I'm going to go ahead and copy a prompt I have right here. Going to copy this, and we're going to go back to Claw Code. It's going to say, "Please generate this landing page using the newest version of Nano Banana." Nano Banana 2. Boom. Nano Banana 2. Make sure that's in there. Paste this in here. What it's going to do is you're going to generate the five images using Nanobanana 2. So, these are images that are going to live on the landing page like the hero shot at the top, product images, things of that nature. And then it's going to build an HTML landing page that I actually see with my name on it in these types of colors. These are just all random colors. Uh, but it's going to then display in Google Chrome. I'll let this run right now, and then we're going to go back and forth on exactly how it looks, the tweaks, and go from there.

Also, another thing I recommend that you check out my other video. You'll see it somewhere here. Uh, and this is going to be setting up this front-end design skill. It's just going to be so much better in terms of giving you the outputs that you're looking for. If you go to skills and you're already familiar with cloud code, it's called front-end design. Highly recommend you download it. And while that's generating the ways you could iterate on this using cloud code, it's just telling you exactly what you want. You don't have to over complicate this part at all. Say, "Hey, I don't like the headline. Make it bigger. Let's change the call to action. Add the tagline. Make it responsive." Cloud code is very good at handling instructions in my opinion and you can just tell it exactly what you want.

What I recommend you do is you use voice dictation. If you want my recommendations, you could check out my other videos about the best AI tools I use to empower myself as a marketer and as a business owner. Voice dictation is number one. What you could do is just double tap your voice dictation and then you could just go through the entire Google Chrome HTML site that it builds out and say everything that you like and don't like about it. Save it in one long piece of text. Give it back to Cloud Code. It's going to do all the changes at once. So, you're able to iterate much faster. And I can't emphasize this enough. This responds in seconds, if not minutes. When you work with a freelancer or an agency, it takes sometimes days to get turnaround. I have a website right now and I haven't heard back from the person building it in like almost a week and I need the changes done, right? So, this just cuts out the entire friction process. It might not give you the highest design, but the efficiency of speed to design and iteration is insane and it's only getting better.

And a little pro hack as well, and this is what we do for our clients that we work with. Building out an entire single creative brief, like a brand guidelines of like hex colors and fonts and styles. This is where you can get the best results because instead of giving just random sentences over to claw to code, you can give it an entire creative brief or creative portfolio and it's going to use that to talk to Nano Banana to generate whatever you want, images, landing pages, websites, etc. Then when you combine it with the skill I was just mentioning, you get the most insane digital marketing assets for your clients, for yourself, for whoever.

Another great thing about Cloud Code is how organized it is. So, it literally has a to-do task running. It just generated the five images using Nanoban 2. Now, it's building the actual HTML website and then it's going to put everything together and it's going to show me. So, you can see exactly what it's doing. What I love doing is like I could be on this screen, I could be working, I could be recording and it's still working in the background. Especially on something like VS Code, you could create three instances of Cloud Code and you could build three different websites at the exact same time. I actually have a video on exactly how I did that. If you want to watch that, it will pop up on the

All right, Cloud Code and Nana Banana cooked up right here. You can see exactly what it did. It used Nano Banana 2 to generate five images. I really like the before and after. I'll show you right now. It saved it on my device. Awesome. And then it gave you all of the details of what it did. So, for example, if you liked these three things but didn't want this, you could say, "Hey, remove this. Keep this. Remove this. Remove these three. Keep this." And you could also change out the hex code. So, I like that it gives you this summary right here because you could literally just paste this back in and say like, you know, remove these three, etc. So, makes it easy to sort of give you uh the feedback. And this is how it came out. Now, if this was me, I would change this, but for 5 minutes work, it's not too bad. Uh, I like the design. I would also change this to a video. It has a a natural scrolling right here, which is awesome. You can put like logos or whatever you want. These are all generated by Nano Banana. I think they're pretty clean. I also like the layout. Even they're highlighted if you go back and forth between them. Small little details like this I think matter a lot. And then I really like this. So before AI, after I like the the context there is great. I also set up Claude Code to understand marketing dynamics. Like this is a classic marketing sort of framework. Show the before and show the after. So make sure you're setting up your actual Claude code correctly. I have a video on that if you want to watch that one next. Um, and then it has more about the offer and things I'm talking about. And then download the free guide. Let's make sure these are all working. And then this should go to the bottom. Yep. And then even hyperl. Yeah, hyperlink my YouTube, my Instagram or my my LinkedIn and my actual website. So for first generation, not bad. Again, if you want to mess with this, you would just go back and say, "Hey, don't like this, like this, etc. regenerate it." And you could work back and forth until you have something that you like. And I have another video on how to actually host these things if you want to watch that one after this.

Now you can see exactly how easy it is to connect Nano Banana 2 and Gemini to Claude. It takes like three minutes and you could generate all these different types of things. What are other creative use cases? Things that I'll be showing later on on my channel and things I'm actively using. First is social media graphics. I think social media is the best place to market LinkedIn, Instagram, Twitter, YouTube, etc. So you could literally have one image be turned into three images for all your social medias. And you could even use something like Claude Co-work which I have a video on to schedule this out. So every single Monday all of your images can be generated for your LinkedIn, your Instagram, your Twitter. You can schedule them out throughout the weeks. There's so much stuff you could do, but this is going to be a very high leverage use case for a lot of my people out there that are struggling to post because they just don't know how to use Canva or presentation tools. This will solve the entire thing for you and it's all in cloud code.

You also have something like lead magnets. Making sure your lead magnets look pretty is awesome. You can see my lead magnet down below. If you want to grab all of these prompts in this presentation for completely free, you see my lead magnet is branded towards me and it's all done by Nana Banana in cloth code which is pretty awesome. So that's that. Instead of having like a plain sort of boring text, you can make it custom to you and you could do so in literally 10 minutes. It will do the whole thing. You could go do something else, come back, they have a lead magnet and to end that looks really good. And the higher the perceived value of the lead magnet, the more emails you're actually going to get, which is great.

And to sum it all up, Nano Banana 2 produces the images. Cloud Code builds the website the images are going to be on. That's why these two things work so well together. Nano Banana is really good at creative. Cloud Code understands your business if you set it up right. So, it'll understand everything else outside of the creative. You combine the two, you get something that works insanely well. And now I'm sure you understand how much this actually replaces a 2K a month designer or maybe you're paying a VA to do this. You don't really need them to do this anymore. Or you can empower them with the system like this. Spending hours in Canva just wasting your time trying to find stock photos online that don't have watermarks, which is just another waste of time. You don't need to do any of this anymore. You could use this simple system to do any creative work that you need. And again, this was set up in like 5 minutes and then we just generated a landing page, product images, and another like 10 minutes. So 15 minutes of work, you get a lot of stuff done.

If you want the full prompt pack and the full project files, again, they will be completely free down below. If you like this video, you will love this video. We're all about using AI to market our business and get more leads because who doesn't want to do that? So, I will see you in this video right here. Have yourself a great