Nano Banana + Gemini 3 = S-TIER UI DESIGNER

Many people didn't realize that you can use Nano Banana to get the most creativity out of Gemini 3 to turn your normal AI design into something that way more creative and unique to even

something that truly feel like made by a design team behind it. And I already saw people on Twitter start talking about how they are using Nano Banana to generate UI and interface design. You

can easily spin up a multiple different versions of design in a few seconds that looks nothing like a normal coding agent would be able to propose. And I

personally found it can get pretty consistent result with a simple four-step process. And this is what I'm

four-step process. And this is what I'm going to show you today. My four-step

process of utilizing Nano Banana to get the most creativity out of Gemini for UI and product design. So when I design something, I generally start by talking to the model to do the design planning

and final output will be your design PRD or specs. is a proven process of how we

or specs. is a proven process of how we get the most out of the coding agent.

Same thing can be applied for design as well. You want to give all the context

well. You want to give all the context to the best reasoning model and start planning the design layout style in the most cost effective way which is text.

And there a lot of platform you can go either Google AI studio or cloud or change BT but typical one I use is Google AI studio because I can get access to Gemini 3 model where I found

it still has best design and front end reasoning capability. I can also add

reasoning capability. I can also add custom prompts here as well. And this is typical prompt where gives guidance about design thinking, themes and constraints. And to do the planning,

constraints. And to do the planning, typically I will start with some context about the product I'm trying to build.

So in this case, let's say I want to build a like landing page for super design which is vibe design platform building. I can take a screenshot using

building. I can take a screenshot using tools like go full page which is Chrome extension that allow me to take the full page screenshot and I can copy this paste in the screenshots then start typing out some context about turtle.

Like the first screenshot is my app super design. We are building AI design

super design. We are building AI design agent for generating high quality UIUX.

Help me brainstorm and plan the design of the landing page section using our logo and branding. In this our product key values give some generic prompts depends on task like in this landing page task. I will tell it plan the

page task. I will tell it plan the design specific regarding the content structure hierarchy the layout spacing white space the texture and backgrounds animations and be extremely creative.

And this part is pretty generic if you're building like a landing page.

Meanwhile, it's also useful to include some reference image. And this is where you can go to website like tribble mob superhero which focus specifically on the hero section, web interaction.g

gallery which has good collection of different interaction design and real which is a website that kind of allow you to find different design based on certain color plate where you can just find a lot of inspirations for websites

that within your kind of brand style and also clui.com where they have daily updates of different components and there are tons of other options but the rule of thumb I found is that in general you don't want to give more than like

three different reference image if you just dump too many different image reference where they are just dramatically different you often confuse model And in this case, I just attached two reference that I quite like and they

all somewhat similar. So I can do command run and then it'll come back to me the core concept, the content hierarchy structure, the layout spacing and the detail visual as well as detailed animation planning. Obviously

you can chat back and realign with agent and you might have problem that is not exactly clear to you what does this design actually look like and this way I can prompt it to say help me general layout using asac is like the most cheap

and fast way for you to kind of align with agent how the layout should look like use as to break down the layout a bit it even creates wireframe for every single section and all those information

are useful context to start building up once you feel like you align with agent this is where the second step begin to use nano banana instead of coding agent to give you UI milk. And the reason we

want to use nano banana is that nanobanana is image generation model. It

just give you much more creative results without worrying about the technical implementation and also it is fast for complex UI. It's much faster to use the

complex UI. It's much faster to use the image generation model. You generally

get a result within 30 seconds instead of getting coding agent spend a few minutes to build up the code and most likely don't give you the perfect results. And just as a quick comparison,

results. And just as a quick comparison, if I just copy the whole thing and use design agent like super design, if I just paste that in, help me build this hero section UI and attach all the image, it definitely does give you cool

results already. But in general, the

results already. But in general, the layout does feel more like standard and this where nano banana model would do a really good job. If I switch back to nano banana and then say help me design UI mode for the hero section output

image and the UI generator will generally feels like better like those kind of tilt UI typically coding agent were try not to do because it's not like

that easy to implement right away and there's a few other options that it proposed to me. This one for example is extremely good, very creative with those, you know, 3D objects behind the

scenes as well as this glass style UI that's a bit tilted and there's no amount of prompt you can give a coding agent and expected to just design something like this out of box. But with

this UI mo as a source of truth, it became much easier and the best thing is that you can explore so many different versions in just a short period of time.

But the challenging question you might have is that the UI mode generated by nano banana sometimes could be quite challenging to implement. For example,

those 3D objects is going to take a while to implement our code. And this is next step you can do with nano banana which is using it to generate high resolution image assets that you can use

to get agent to implement. For example,

I can start a new session and pasting image and then prompt it help me extract the image assets of 3D objects in the mo here. So I can use as background image

here. So I can use as background image and you will change the resolution to 4K so that it is high resolution. Now it

will generate this image assets. So if

you compare the original mocha this one and image asset it generally looks like this. But one part I do want to change

this. But one part I do want to change is that like I don't want it to give me those UI elements because I probably want to use code to implement that. So

it is more interactive. And one thing about nano banana is that if it generates something that is very close to what you want just some parts is not exactly there. Instead of delete and ask

exactly there. Instead of delete and ask to regenerate, it's just prompt and continuously makes adjustment because it is really good at it. So I give a prompt remove the UI elements part where we use code to implement it. All right. So now

this time it generates the perfect image we want. So now I can save this image

we want. So now I can save this image and then give the coding agent as image assets. So a lot of complex front end

assets. So a lot of complex front end task don't need to be handled by code.

And if you want you can even push it further like we can go to replicate and then upload image tell to generate floating 3D assets with parallax movement for scroll animation and

parallax effect is just term that we use to describe that there are multiple different elements on the screen that move differently and then regenerate video like this that you can also embed

on your website and make it in a way that it will change as user scroll and in the end that's where we can give all the assets to a coding agent and ask it to implement and this example I got from Gemini 3 on super design with those

image assets and you can see it looks really really nice with all those UI component trackable and I actually streamline the whole process. So in

super design we just introduced plan mode with image generation capability.

So I can paste the UI modes as well as the same prompt where we give the context and we also have this section where you can give agent more context about your product, your style guide, your design system, anything like that

as well as the assets folder. So I can upload logos and image assets and for logo I will also turn on the vision mode so that image generation model will be able to see this image and use that in

the generate moes as well as any custom fonts. Anyway, I can just turn on the

fonts. Anyway, I can just turn on the plan mode and click send. And the agent will also ask some clarification question as well. So in this case, let's

design the hero section first. Uh and

the style uh I will say uh let's go for you know playful and bold. Cool. So now

it generates plan for me and obviously I can chat back and forth but I can also just tell it help me generate image mode and I can do image generation to make it more specific. This then will start

more specific. This then will start generating the image mo. Okay, great. So

you can see that I generate a image mo like the thing on the right side which looks actually kind of nice and I can ask it to generate multiple different versions like there are also other two

versions and there will be some issues.

You see the logo didn't exactly use a logo we have here that's because uh I found in general when you pass a lot image to Gemini it will pay a lot more attention to recent image that you give.

In those case you can copy the logo putting back here and select this image mo generated to say you need to change the logo to our official one. I will

prompt it please change the logo to be ours and keep the UR ratio of the mo the same and here I'm saying that because without mentioning this sometimes model will just fall back to the first image

ratio you give and generate something very weird and later support at mention so you can at mention any assets file directly to bring context in and once we get the UI mode that we like we can

start bring to the code and for simple ones you can just go to build mode and ask to replicate this UI directly but sometime I found it will work better if you just do some planning advance as

well. So we're say we want to build this

well. So we're say we want to build this UI pixel perfectly. Obviously this

complex and difficult to make it pixel perfect. Can you analyze and identify

perfect. Can you analyze and identify the difficult part and make a plan of how to tackle each difficult part so that we can truly achieve pixel perfect implementation. Break down into

implementation. Break down into different tasks and for each task at difficulties important nodes alternative that can achieve very similar visual effect. And once we get this planning

effect. And once we get this planning done, this where I can switch to build mode and ask it to tell me implement this UI pixel perfectly. And while this is running for some more complicated UI

where you will need those image assets, you can also just slide the image and then prompt it to extract the 3D image assets in the middle. So that I can use for implementing the website and I will

do this image and mode. Now I get this image assets generated and sometime it has this weird transparent background.

You can just save this image and go to this specific background remover model on replicate upload image and click run and you can get the perfect result pretty fast which is transparent and you

can bring back to Canva and cost of this model is very low. For $1 you can process almost 2,000 images. Cool. So

now we got this uh implemented UI which looks pretty good. Um and there are parts of that it's not 100%. All I need to do just select all those ones and then say the blur object in the

background should be more obvious.

Please implement based on the original UI and somehow it's not using our logo.

So I'm going to prompt it as well. Use

our logo file for the logo please. Cool.

So you can see this new version has my logo correct and the color of the background is also more obvious. There

are still difference obviously but you can just keep prompting it and improve the design. You can even use nano banana

the design. You can even use nano banana to review and create ticket the design.

We have this prompt built in where you can select the design and click suggest improvements. Just refing this prompt

improvements. Just refing this prompt there will get a gemini 3 to review design and output annotation about potential improvements which you can send back to the coding agent to improve further. I have put the link in the

further. I have put the link in the description below so you can try this whole workflow for free on superdesign.dev.

superdesign.dev.

So this is my workflow of how to utilize nano banana model to maximize design creativity. I hope you enjoy this video.

creativity. I hope you enjoy this video.

Thank you and I see you next time.