Gemini 3 is now a pro-level landing page creator

This whole animated template was done from start to finish using Gemini 3.

We're talking about the beam animations, the buttons, the logos that are using a marquee animation. We have the hover

marquee animation. We have the hover animation, some of these decorations that are really adding a lot of details to the design, the beautiful typography,

and all of this is fully responsive. It

works on mobile and desktop. Now, you

might have noticed I start with a banger with these template. They're hugely

popular on social media whenever I share it. And people are really excited to

it. And people are really excited to learn how I did it. So, I'm going to show you the full blueprint. And to be honest, we're about to disrupt a whole

industry, a very lucrative one, with how we're using AI to create these templates to a higher degree. and much much faster. The icing on the cake, we have

faster. The icing on the cake, we have the Unicorn Studio animation in the background which everyone keeps asking about. That is one of the top questions

about. That is one of the top questions that I constantly get. On top of also, what is the recorder, the screen recorder that I always use? Well, it's

called Screen Studio. And then you're like, man, what is this disruption we're talking about? Well, we're talking about

talking about? Well, we're talking about people selling template from 50 to 100 USD per template

and both on Web Flow and Framer. And

we're about to launch the same thing on Aura on top of the fact that we have already a bunch of really cool free templates that people share through a

lot of remixes that you can do on Aura.

You can see every single day we're getting somewhere between 20 to 100 uh new templates and we're about to allow

people to essentially sell their templates on Aura as well. All right.

So, what are we going to talk today?

Well, we're going to learn how to do this from scratch. What is the composition of the landing page? What

are the animation prompts that we can use? How do we compose it? How do we

use? How do we compose it? How do we reference icons that are more unique logos, uh, buttons? How do we ask for different

uh, buttons? How do we ask for different animations per section? For example,

like this little car here, which is fun.

Uh, how do we make it more unique?

And how do we use something like Unicorn Studio to really bring that hero to the front line? There's a lot of key

front line? There's a lot of key interactions here that we're going to be discussing that I believe can really elevate a landing page. So, for example, when you scroll, you can see that

there's a completion to the text here.

And then when you scroll, there's also a sticky element plus a step one, two, and three, which can be highly engaging if you're doing storytelling, you're

telling about your business. So in terms of composition, you might need a website like superhero where you have a lot of

these examples of beautiful hero. Now

we've discussed about dribble before.

We've discussed about Mobin, but there's so many more resources out there. A

screenshot is worth everything with Gemini 3. Instead of prompting maybe a

Gemini 3. Instead of prompting maybe a 100 words or a thousand words, you might want to take a screenshot instead. It

has a lot of those, you know, things that AI will be able to capture almost instantly because it holds the fonts,

the colors, the layout, is it grid or flex, what colors, uh what font, it's pretty good at detecting fonts, icons,

and then we get into the sections, right? Usually I spend about 50% of the

right? Usually I spend about 50% of the time on the hero because again this is everything for me. It's the cover image for your Instagram, for your Tik Tok,

for your Twitter and everyone clicks on it when there's a laser or there's a beautiful composition uh of that cover.

Then we have the feature section. So

something like this was it what is it called and how do you prompt it and how do you collect these screenshots? So

this is typically the second section and you might want to look at a website like bento grids where you have a lot of these cards. This is what we call it and

these cards. This is what we call it and there's so many ways to lay out these cards. This is what we call a bento

cards. This is what we call a bento layout. Apple popularized that in their

layout. Apple popularized that in their demo at the dubdubdc and now it's becoming sort of common ground in the design space.

Then you have websites like H1 Gallery which gives you even better hooks and headlines for your landing page. And

this is super important because it's part of the hero. Now you might be asking what is this industry that you're talking about? Well, you know, in the

talking about? Well, you know, in the old days, we used to do a lot of templates for uh WordPress, for example, and now we have quite a few big players.

We have Squarespace, Wix, uh Web Flow, Framer, Figma, which is all of those spaces where you can submit templates.

You also have something like UI8 and I mean so many so many webs. This is a big big industry and a designer who's able

to excel at this can make somewhere between you know 5 10 $20,000 out of one template over a long period of time of

course and if you make multiple of these templates you can essentially make you know a six figure business. So, we're

talking about 100,200, $300,000 a year just making templates and selling them because it's a big market, right? A lot

of people are buying templates because they don't want to spend all of this time or they don't know how, you know, how to build these templates and they know the business, right? They know the

clients in their location, in their city, in their country. They know how to speak the language. And now, thanks to AI, we can essentially prompt all of

this stuff into any language that we want into any color. So, you take a template and without even have to click around and sort of having all of that expertise that you have to build over

years, knowing where to click, how to deal with auto layout, how to deal with components and all that stuff. No, here

we can just prompt everything, change the language, decide where to deploy it.

So imagine right here, of course, I'm using Aura, which is an app that I built myself six months ago. And you know, I

prompt everything. I edit everything.

prompt everything. I edit everything.

And if I don't want to edit, if I just want to prompt, that's totally fine. I

just can focus on the preview. Um, and I cannot just focus on the little details that I can just click the font pairing, the colors, and the assets. So, the

assets including the beautiful, beautiful uh Unicorn Studio background that I can just click and boom, I have all of these ingredients to what AI can

cook for me in the most efficient way possible. Do all of this within

possible. Do all of this within depending of course on how much time you spend on the details, but somewhere between 30 minutes to a few hours to even a few days if you spend a ton of

time customizing every single uh section, every single animation and so on. and so forth. But it is your choice

on. and so forth. But it is your choice as a creator to spend the time that you want to specialize in the the animations

or the hero section or the text, the copywriting, adapting to different languages for your local environment and selling it to clients that you already

know how to speak to. And by the way, as you know, AI is already disrupting the image generation business. And something

like this, using Nanomano Pro, you can essentially put your website design on a 3D mockup or a photo and you can just

prompt something like, hey, I want to place this design into this, you know, 3D render. I can even reference multiple

3D render. I can even reference multiple images. I can prompt and you know Nano

images. I can prompt and you know Nano Banana has been sharing a bunch of really great uh you know prompts that

you can use. For example, how to create infographics or beautiful 3D renders with text that are perfectly rendered

and uh at 4K resolution. Right here I'm generating using Nanu Banana using the Changi airport in Singapore which is

where I live and I'm also generating a beautiful render of a MacBook Pro with the insides.

So the iPhone 17. So I'm not trying to be hyperbolic

17. So I'm not trying to be hyperbolic here. This is happening in real time in

here. This is happening in real time in front of us. And Gemini 3 is really at the center of all of this. For example,

creating these magnets for my city in a single prom. And this prom is freely

single prom. And this prom is freely shared. This information is free to

shared. This information is free to everyone and they can use it to create their businesses, their template, their images.

And I think it's a designer's dream.

This is something I've always wanted to happen. As a creator, you want your

happen. As a creator, you want your vision to come to life, right? And you

want to do it in the most efficient way possible and the the high at the highest level possible so that people can enjoy the quality that you've always dreamed

of. I'm not inventing anything here.

of. I'm not inventing anything here.

This is a project that I built six months ago and now we have 65,000 users.

We're getting more than a thousand new users every single day. But most

importantly, our whole team is building templates, right? We have we used to

templates, right? We have we used to take so long to create these templates in Figma. In fact, I remember taking

in Figma. In fact, I remember taking about two weeks per template because we have to build all of these components.

We have to, you know, spend so much time brainstorming and mood boarding and all that stuff. But now our team has been

that stuff. But now our team has been designing at the level that I have always dreamed of for my team to have.

So you can see their latest templates is nothing short of breathtaking.

So, a lot of templates that we are making it for free for our pro users, which by the way cost like $20 a month,

but you have access to these, you know, to these templates that are easily worth $50, you know, per template. And then we have the speed factor, right? AI brings

so much speed into the workflow of every single designer, creators. I've been

doing this for a while. So, you can see I've been doing somewhere between five to 10 templates a week. Not all of these templates are, you know, crazy detail

and all that stuff, but you can see some of them have been standing thousands of likes on Twitter just

because the storytelling here is that we are able to do this using Gemini 3. So,

let's get started, right? We're going to start from scratch. And again, full disclaimer, this is a tool that I built.

Of course, you can say that I'm promoting it, but I genuinely use it to create all of these templates and I want to teach you, but you can use any tool

that you want, whether it's Vzero, Lovable, Cursor, and so on. All right,

let's start from the beginning, right?

So, we have these templates and the goal is to create as amazing as possible comparatively to these templates that

are selling for $100 USD per template.

And we want to have as many examples as possible, whether you're doing it for a client or you're doing it for yourself.

Of course, for me, the dream is to be self- sustainable. I'm sure for a lot of

self- sustainable. I'm sure for a lot of people, it's the same. you. Yes, you can do client work, but if you can build something like a template and you do it

for your own taste, which by the way is the main differentiator in the new AI age, and you want to gather all the resources, all the best website, the

hero, the sections, and all that stuff.

So, we're going to start with superhero.

And you would want to sort of like browse some of these amazing hero. As I

mentioned before, I like to start with a hero. This is where I spend 50% of my

hero. This is where I spend 50% of my time. And sometimes we need to do

time. And sometimes we need to do multiple ones before we're happy with one of them. So you want to collect a

bunch of screenshot such as this one for example or you can use your own design.

You can use the designs from your team, the designs from your website and sort of AI is going to adapt for you. But

usually you want to save all of these inspiration and you want to use them as a wireframe and you want to create as

many as possible until you're really happy with the results.

And by the way, you can use my designs as well. So the first step is to paste

as well. So the first step is to paste that screenshot right here. And then

we're going to go to the prompt builder.

And essentially um you know I'm going to create the hero section. I want to change the names, the the numbers, and I

also want to use a specific uh icon set.

And I like to start with a hero like this as soon as possible. And so, you know, you might want to look at a an

amazing library called Iconify. This is

open source and these are all icons that you can use and uh it's part of the JavaScript one line of code and you're going to be

able to use all of this which is amazing because that's what you want. You want

AI to sort of generate all of these things with as little code as possible that you have like a breath of variety and styles that you want. Some of the

really popular ones are solar, uh, hero icon, the one that everyone use right now, which is kind of becoming boring, is Lucid. Unfortunately, the more that

is Lucid. Unfortunately, the more that something is popular, the more that it becomes a baseline. It becomes like what we call AI slob. Like purple gradient

has become AI slop just because AI use it all the time.

So, one of my favorite ones is called Solar. And the reason why I like it is

Solar. And the reason why I like it is because it has multiple styles. It has

the outline style, the broken style, the doone style. And so that's why I'm going

doone style. And so that's why I'm going to use uh create a hero section, change text names and numbers. uh use Iconify

Solar and uh use the SVG logo monotone, which by the way has a lot of these uh

logos that to me is super useful because I used to spend so much time gathering all of these Apple logos, Google logos, but now you can use something like just

mentioning the name. By the way, you can say something like, "Oh, I want to use iconify simple icons." And then you can even mention maybe the logos that you want. Um, I haven't tried that much, but

want. Um, I haven't tried that much, but definitely just let AI do the work. And

then on Aura, you're going to be able to change and switch them quite easily because it's already part of our built-in, you know, uh, click and change. So, uh, as you can see here, you

change. So, uh, as you can see here, you don't need to to spend so many hours gathering all of these SVGs. It's all

part of the API and you can just include that in your prom. Isn't that crazy? And

then we have the fonts, right? You can

mention the fonts uh and in which case you can mention any of the font from Google because they're free and they are easily referenced by AI using

JavaScript. And the ones that you want

JavaScript. And the ones that you want to focus on is definitely the song So for example, uh we have all here and

these are usually the most popular ones.

Uh we already have a bunch that you can just click and font pair directly in Aura, but you can definitely mention this at least know some of the names

such as inter which is right now by far the most used fonts in the world and uh you know but there's definitely a really

big need now to be a little bit different to change something. So, the

one that I'm using, by the way, is called uh Newsreader.

And I just thought that this was such a beautiful font, and it also has a beautiful uh italic style.

It is a serif font, but what I noticed is that it does work really well with son serif font as well. And by the way, if you want to learn all of these

things, you should definitely go to Instagram and follow a bunch of people who are really into typography, colors, hero section, and all that

stuff. You will really upgrade your

stuff. You will really upgrade your arsenal of tools and resources.

but also a little tips and tricks on the social platform. If you want to get a

social platform. If you want to get a lot of followers and a lot of engagement, which is the most important thing is you have to be active on these platforms. You have to use it. You have

to be part of that niche. You have to follow people in your niche and you have to like, comment and so on. You have to create stories. you have to generate

create stories. you have to generate beautiful slides which by the way we can use AI studio or Aura to generate these slides for you or Nano Banana.

So some more prompts that I'm using we have add vertical container size lines.

Those are the little grids and the lines. I also like to use the one zero

lines. I also like to use the one zero and uh 0 1 02 03 steps. Uh they add these nice little details. Again we're

trying to not be generic, right? if you

don't want to be generic, you have to add some of these details to your design. And so, yeah, we're going to

design. And so, yeah, we're going to start with this and we're going to see how it goes. So, at the same time, you want to start as many of these uh

screenshot, so image to HTML as possible. You want to again redo the

possible. You want to again redo the same steps, you know, change names, create a hero section or add, adapt new sections, use the icons that you want, the font that you want, and so on and so

forth. uh try to add these details

forth. uh try to add these details because again we're using some of the example as more like a wireframe and we don't want to use the same brand names.

We don't want to use the same things. Uh

so we want to remix it because remixing is kind of like the new era in which uh we are essentially remixing everything.

We all we're all using Nano Banana which essentially is a remix of many many things that have been created in the

past. So you can see you know using my

past. So you can see you know using my screenshot here from my template um I was able to create somewhat similar but

also somewhat different. And now it is up to me to change this to mold it in my image to change the color. So, for

example, I can say something like change to orange. Change like I love this font,

to orange. Change like I love this font, by the way.

And I don't know, I'm so just so curious. So, I'm going to go into the

curious. So, I'm going to go into the code. I know how to read code, of

code. I know how to read code, of course, maybe you don't. Uh, but in this case, I can see that it's actually using Playfair display. Uh, but again, you

Playfair display. Uh, but again, you don't need to know code. I just wanted I was curious. I wanted to know what what

was curious. I wanted to know what what was the font. But anyways, change to orange. um you know change let's say you

orange. um you know change let's say you can even say change to light mode and I also love the fact that it created

like completely different uh button from the original one and I really like the style. I love that it added these

style. I love that it added these numbers here which is again different from my original template. It has kind of like a sonar style here. A different

animation.

And here I'm just I'm just vibing right now. Maybe I want to change the logos to

now. Maybe I want to change the logos to simple icons using iconify. So again,

knowing the font that you want or the logo that you want is super important.

And then I'm also going to add some noodles. So let's see what AI is going

noodles. So let's see what AI is going to give. So add noodles

to give. So add noodles to connect with the circle.

And then I'm going to put something like beam animate the noodles.

And I'm also going to mention the size of the logo. So the logo is going to be 96 by uh let's say 36. And again, these

are knowledge that should be available to a lot of people who have done design for a long long time. The only

difference is that they're using a different tool. They're using a

different tool. They're using a different UI. In this case, we're

different UI. In this case, we're describing it, right? So, it's like having a senior designer designing for you or co-piloting for you and you use

your taste and your knowledge and your experience and all the things that you've been using for so many years. You

know, instead of clicking around, you're just describing it. Okay, I don't like this. I like this. I want to add this.

this. I like this. I want to add this.

And then you're changing everything.

You're cooking it.

And you know, yeah, it's starting to look really good. And um I managed to change this to light mode. I could have kept dark mode, of course. Uh but you

know, you're vibing and you're doing something until you're really happy with it and then you can focus on the rest.

But you can see uh just with this, I created a pretty awesome hero, right?

So, it's not perfect the logo here, but it it added the noodles. It added the beam animations. It added like it it did

beam animations. It added like it it did some circle thing here. It kept my my font that I already like.

So, again, we're using many designs.

We're generating as many as possible until we find something that really clicks. And so, this is not bad. I think

clicks. And so, this is not bad. I think

you know the question is how do you start from an idea and concept and make it better and also how do you make it different as well because we're using this as as a

template but we can totally say something okay use sif font use beige and

um orange I can say something like okay instead of matcha make it about oranges

and uh put a phone in the middle instead.

And there you go. Right, we're just, you know, iterating with trying to make it better. And this one I want to change it

better. And this one I want to change it back to blue uh to let's say green in dark mode

and fix the logos to use and not images and boom just you know we keep molding

it. We want to make it different and I

it. We want to make it different and I think it looks pretty good. It could

definitely be a little bit better, but I do like the creativity that it's brought. So, for example, the bottom

brought. So, for example, the bottom here is pretty nice. We have an iPhone in the middle. Of course, we can say something like, "Okay, please fix this."

Or use a, you know, a dynamic island instead. We can say animate this portion

instead. We can say animate this portion here. And we can even customize. So, for

here. And we can even customize. So, for

example, we really don't like the font.

We can just go here and we can just customize from here with just a few clicks. Um, I can just go from something

clicks. Um, I can just go from something like son, which I've explained earlier, to something uh like mono to something

like uh grotesque or something like serif. So,

serif. So, we want to be as efficient as possible and we want to get to a result based on our taste that we like. And there you

go. So, I like this a little bit better

go. So, I like this a little bit better and I think it fits really well into the sort of orangey and zesty website. So,

this could be a good product for like a an orange product, maybe organic or something like that. So, let's go back here and boom. Look at this. This is so

good. And it has a different color. It

good. And it has a different color. It

has it's in dark mode which I like very much especially for this type of SAS website. Dark mode works really well.

website. Dark mode works really well.

Again depends on your industry.

And then for example we have the icons that right now is using a uh SVG and again we have these icons that are

available. So for example, simple icons

available. So for example, simple icons has all of these logo and I can just vibe design it you know like okay so

this is the kind of details that maybe AI is not super good at like picking the perfect logo for you or the perfect image for you. So, I'm just command D

and duplicate it. And I'm deleting the ones that I don't like. And then once I have the perfect format, then I can just change it to another one, then another one, and another one. Just really

quickly here. And I could definitely spend a lot more time.

But this is pretty good.

So, as you can see, with just a few prompts, I'm able to really change and mold a design into something completely

different. So, before it was kind of

different. So, before it was kind of like this. Obviously, this is taken from

like this. Obviously, this is taken from sort of like a wireframe, a reference, usually a screenshot. But here, you want to change it as much as possible. You

want to change the text. You want to change the colors and the logos, the icons. You want to add animation. So, as

icons. You want to add animation. So, as

I did add a, you know, circle animation, the uh slide in, blur in, fade in animation, and finally, I'm changing the color to be more orange. Uh, bring the

text to to the front that is white. So,

now it looks like this. And I think that looks pretty awesome. It's a good start.

And I would love to spend more time on it, but I think that's pretty good. And

so you can see why I don't want to sort of like start with the full landing page. Of course, I could have, but when

page. Of course, I could have, but when you're starting with a hero, which is the most important part, you can be far more creative and you can focus more on the details and the generation. Every

time that you're prompting, it's going to take, you know, 30 seconds, maybe one minute instead of like three minutes.

Um, so that's really important. And you

know let look let's look at here and you can see I asked for a green button I'm using a reference to the components you

know we have also a secondary button that on hover it has a beam animation and again this is part of the prompting you can say add a one pixel beam

animation that continuously goes around the button shape and the button is a pill shape. Here

pill shape. Here we're using a noodle beam animation to the circle in the middle. Looks pretty

good. Unicorn studio. And now if we're happy with the hero and we're happy with the colors, we're ready to move on to

the rest of the sections. And so we want to look at the few key resources. So for

example, you want to look at Mobin for example, which is really cool. And you

want to go to sites and then you want to go to the top like the the first three website. These are free. Now of course

website. These are free. Now of course you can get pro and you can have access to hundreds of thousands of examples which is amazing. It has animations and all that stuff. And you can click on one

of them and go to the sections and this is where you're going to find the sections of those pages which is insanely useful. So uh what is cool here

insanely useful. So uh what is cool here is that you have real example real website and the variety of styles is

quite impressive. So for example I quite

quite impressive. So for example I quite like this one by Dropbox and this also one can work really well with the orange

uh website depending on the style that you're looking for. uh also one with a specific background. So not necessarily

specific background. So not necessarily white because you want to alternate the the colors, right? You you want to alternate the content. So if you go to a website like this one, you don't want

the whole thing to be orange. Sometimes

you want a background that is white just like to give energy and to have alternative uh backgrounds. And uh here

the same way. And then you have bend to grid in which you can really um set up a layout is that is different. This is

really powerful for the feature section.

So so you know you want to mix and match the style. AI is really really smart. Uh

the style. AI is really really smart. Uh

it's not going to get to the level of details that you see here. So for

example, some of these are videos with animations and stuff like that. So that

might not be as possible but something like this would be feasible uh by the AI. So again you want to take a

AI. So again you want to take a screenshot and then bring that and likewise for dribble you can search for like features

and you can find these sections. What is

really important though it's not just about cards which is why you know bento grid might not always get the best result because then it's only going to show the cards. What you want is

something like with a you know CTA.G

gallery is focused on more uh call to action. So a button with a section. Uh

action. So a button with a section. Uh

this can be good if you want to you know call for attention to someone to click and take action. But otherwise you have dribble which again you have these

examples based on your search. You're

going to search for features. And once

you have some of those sections, you're going to bring that here. And you can essentially look at the structure of

your layout. And this is where I think

your layout. And this is where I think it's good to know the structure of a website. So for example, if you should

website. So for example, if you should learn a little bit about HTML structure.

Sometimes the AI because we're creating a hero, it kind of treats this one as a footer. It should not. What you should

footer. It should not. What you should do here is basically say um the logos sections should not be a footer. Change

that to a section. And then you can say something like by going to the prompt builder. We have a bunch of these. Uh by

builder. We have a bunch of these. Uh by

the way, I put all of these as a reference. This is kind of like my

reference. This is kind of like my arsenal of prompts that I put on a regular basis. So for example, this one

regular basis. So for example, this one create iPhone frames. This one create a marquee animation.

So for example, I can use uh mark animation on the logos and I can also use a uh animate fade in blur in which is what we did. And I'm

going to go to the top here which is adapt a new section. And of course, I can reference the icons every time if I want to if because like AI sometimes

it's not always going to keep exactly what you you know what you did in the past. So it's good to remind AI and once

past. So it's good to remind AI and once we have this then uh we can also reference specifically for each of them.

So for example the uh mark animation is for the logos to paste that image uh and then press enter.

Now keep in mind that if you want to save time you can also do something like uh adapt new sections and then you reference uh the components and this is

where you can search for section and then press shift and I'm going to select a bunch. Of course, I could be more uh

a bunch. Of course, I could be more uh specific, but for the sake of time, I'm just going to select a bunch. So, we have this and

then we can add a footer and then reference a footer by searching footer.

So, this is done separately and uh this is going to try to adapt.

It's this is a long one and usually when you have the hero that is done and you like the style, you like the direction, AI is really really good at adapting new

references like whether it's an image or a code component or yeah, in this case we're talking about references. All

right, so this is what we have so far.

We have the hero and then we have the new section. I do have to mention a few

new section. I do have to mention a few things. I think it's looking awesome.

things. I think it's looking awesome.

But sometimes you might especially where when you're introducing like breaking changes to the prompt. So it's fine if you want to change the text, the colors or the a specific button and you

reference it very precisely, but often times AI will change more than you ask for. And in those cases, you might want

for. And in those cases, you might want to specify something like a negative prompt. So, for example, you can say

prompt. So, for example, you can say that don't change anything else like keep the hero or keep uh the navbar the way it was. And so, this is going to tell AI to not touch some of these

sections, it's very important, especially when you're dealing with a lot of details. And another thing is uh often times even though you're asking to

change the text and the names, especially with if you're doing a lot of task and prompts at the same time, it might just overlook some of those. So in

those uh occasions, what you want to do is to go to the edits mode. It's not as powerful as the default mode where it regenerates everything. It cleans your

regenerates everything. It cleans your code and all that stuff. The edits mode is great for small tasks. So for

example, change all the text to fit the hero concept.

So by doing this you're keeping pretty much all the same structure. This is

also great for adding new sections. Uh

and also when you see that maybe AI is changing a little bit more than you ask for. So you can see this is great. Uh it

for. So you can see this is great. Uh it

changed the text. I can definitely change the the color as well. Uh so

change color from red to green in the features section.

All right, this is looking pretty awesome. Change the text, change the

awesome. Change the text, change the green, and I can definitely put a lot more time into it. Uh, but I just wanted to show you an overview of what's uh

happening and what kind of strategies you should be looking at. And if as you get better with this, you might want to do directly in design mode. So, you go to design mode here and you click on a

section. And there's a small button here

section. And there's a small button here that says plus. And this is where you add a new section. And from here, you can just uh put a screenshot.

So, I'm going to take one of the screenshot I took from the awesome Dropbox website. So, I'm going to go to

Dropbox website. So, I'm going to go to the prompt and adapt a new section. And

uh what is cool about this is that it's only going to change that portion of the code. is going to insert the cool. As

code. is going to insert the cool. As

you can see, it went from, you know, an image that is completely different from what we see as a result here and it

adapt the whole thing. Green

uh you know this is my favorite technique because it does really yield amazing result. You just need to know a

amazing result. You just need to know a little bit about you know the sections of a page uh whether it's a hero or a div or a footer. Uh but if you do that

correctly then you can change it and the same way with um you know editing a specific element whether it's a button or the navbar. So you select this

section for example and then you go to prompt and I can say something like change the text. Uh you can also use different models that are faster if you

don't require the same level of uh you know design and UI. So, Gemini 3 is a little bit slower uh much slower than

GPD 5.1, but it's much much better at UI. But for small tasks, you can use GPD

UI. But for small tasks, you can use GPD 5.1. It's just so much faster.

5.1. It's just so much faster.

So, now looking at our ZES project, uh we added these components that we reference. So you can see here these are

reference. So you can see here these are all the components that I reference and we are building that super large library of components sections button and all

that stuff. So again you can reference

that stuff. So again you can reference those and you can change the buttons navbar uh individually uh because AI is not going to do that and it's it's really really difficult to prompt that

kind of level of detail. But you can see when I scroll it's looking really good and it has the animation from the uh sections that I referenced. It has the

footer. You know the rest is for you to

footer. You know the rest is for you to sort of like ask AI to change what you need to change. And the other thing is

uh all the things that AI is not very good at I try to make it available in aura. So for example, AI is not very

aura. So for example, AI is not very good at images, right? So it's it often generates these broken images. So what

you want to do is basically you go to assets and this is where you're going to go here and you're going to search the Aura library for orange for example. And

uh you know maybe it should be in food.

Um, so we don't have like a ton of images about oranges, but we definitely have a ton of food, which is a is is a pretty good second uh thing. Obviously,

you can go to Mid Journey and generate all of these images and upload them. Uh,

but one by one, I'm just going to fix them uh really quickly so that they fit sort of the concept that I'm looking for, right? You know, I'm vibing with,

for, right? You know, I'm vibing with, you know, the kind of stuff. So maybe I should focus on fruits and uh you know

fix all the broken images and then uh I'm going to go to portraits and I'm going to search for portraits.

This would definitely have a lot and some of them are more futuristic. Uh if

you don't want the futuristic one, you might want to go to uh something like headshot which is more business and more like neutral. and uh make sure to fix at

like neutral. and uh make sure to fix at least the broken images. So that's the minimum you should do. But you know this is this is a good start and you know the

rest is just to fix the details and to fix the uh responsiveness. So for

example you might want to look for what it looks like on the iPad. I think it looks pretty good. We have this infinity canvas which is really cool. I can add you know different resolutions. So, for

example, here I'm going to add for the phone how it looks like. And so, yeah, there you go. The main thing you you're you're always looking for is the horizontal scrolling. This is kind of

horizontal scrolling. This is kind of like I used to spend so many so many hours before to adapt my designs to different uh viewports, different

browsers, especially 20 years ago. But

oh my god, having AI do all of this work for you and you just focusing on the creative aspect of the UI is is you know is so incredible. So this

is this is great and you want to create a beautiful cover and so you know we have a bunch of templates. So what you want to do is go to desktop and go to

the canvas and here you can either arrange them manually right you will have this kind of like presentation this

is super important if you're creating beautiful slides for Instagram or creating a cover or creating different uh showcases and different section that

you want to showcase on Instagram or Twitter uh LinkedIn pick your poison uh we have a bunch of these preset templates that are really really fun. So

for example, this one is make sure to scroll though, right? So you scroll here and then you show different parts of the UI and then you take a screenshot using your Mac. Uh so command shift 4 and you

your Mac. Uh so command shift 4 and you know you have the left side, you have the right side, you have like the triple one, you know I try to make it super

super easy for designers to just present their work. Um, so we have the the other

their work. Um, so we have the the other side. We have also the quadruple one

side. We have also the quadruple one which is really really fun. So look at that. I mean, you know, so little effort

that. I mean, you know, so little effort and then you get maximum results. And so

this is super fun. And going back here, we can do the same for this awesome uh project here. I'm just going to go and

project here. I'm just going to go and set up my layout. I love this layout right here because it shows the entire website and it shows the stuff that

people want to see. So, for example, they don't want to just see here. Uh

make sure to go to preview because the preview is going to show the animation as well. And uh as you can see, we have

as well. And uh as you can see, we have a really really nice uh cover. I use

this all the time in in my tweets and they uh you know they generate a lot of like it's very polished. It looks

polished but it's all sort of organized and it makes you know I try to make it super easy. You want to remove the ring

super easy. You want to remove the ring you want to you know change maybe the corner radius here uh whether you want it square or not. And then you you can

either go to light or dark mode. Um and

then you know you can change the the background color whether you want like a specific color like green for example or you want something uh as an image. So

for example I'm going to scroll down a little bit. I use this all the time for

little bit. I use this all the time for example. Uh, and you can search for a

example. Uh, and you can search for a specific color and uh, you know, maybe you want abstract green and maybe this one is going to work really well. So,

this is really quite nice. It fits

really nicely to the background. And

another thing I can do is to change the blur effect. And now we have something

blur effect. And now we have something really nice. I just want to make a

really nice. I just want to make a little change to the background. Maybe

light or dark. Up to you. because when

you blur it also shows the background behind. So now we have a really nice

behind. So now we have a really nice cover that I can just screenshot using my Mac and at any aspect ratio that I want and I can post that on social media. And another really cool

media. And another really cool screenshot right here. And so yeah, this is my secret sauce. This is my blueprint

for how I create these amazing landing pages with crazy detailed animations.

And it's just going to get better, right? Gemini 3 is just going to keep

right? Gemini 3 is just going to keep getting better. Referencing the buttons,

getting better. Referencing the buttons, ref like prompting these animations such as the marquee animation, the beam animation, the uh circle animation, the

decorations, the 01, 02, 03 details, the grid using container size, vertical lines. Um, and you know, customizing in

lines. Um, and you know, customizing in design mode if you have a little bit more design experience and just progressively get better at those

things. Um, and you yeah, you know, like

things. Um, and you yeah, you know, like you want to prompt one by one. You want

to get into the details. You want to add more sections and make sure that you have a full arsenal of tools and

resources at your fingertip. So for

example, you can go and use nano banana to generate uh new images. You can uh use superhero to get these beautiful hero section that to use as a wireframe

as an inspiration that you can mold changing the colors, the text, uh the layout and all that stuff. Fixing issues

that AI is going to give you when it does the translation for you. Uh, Bento

Grid has a lot of awesome cards that you can use for inspiration and uh, you know, it's part of mood boarding. Uh,

best, you know, cta.g gallery. You can

go to mobin um, for sites and you can go and look at the sections.

You can, of course, go to aura and find all of these amazing templates that you can just remix and change to mold it for your business and for your perfect landing page. You have these components

landing page. You have these components such as the background, such as the buttons and the cards that you might want to reference for your landing page

and of course referencing the icon set which would look like every other page and you absolutely want to avoid that.

In a new era, in a new age, the baseline is going to be very high. As AI gets better, you need landing pages that

don't look generic and have that sort of like special sauce, that special flare that comes with years and years of experience with fine-tuning your taste.

As someone who used products all the time and in your specific niche, that would be ideal because if you're really specialized in your specific niche, then

you can really command authority. And

whenever you post on Instagram and social media, you interact with all of these experts, then you can get a lot more engagement and ultimately create

the perfect products, the perfect landing pages that you can sell and ultimately have the financial freedom that you are looking for. And I think

that's, you know, if that's what you wish, you should absolutely do that. So,

I hope you enjoyed this video. There's

so much to teach. So, please um there's so much to teach. So, please consider subscribing to this channel. I'm going

to share so many more techniques that I'm learning along the way as I'm building my product as I'm building hundreds of these landing pages. I'm

going to be sharing all of those blueprints. There's nothing that makes

blueprints. There's nothing that makes me happier than seeing people becoming successful as a result of learning about these techniques. So, thank you for

these techniques. So, thank you for watching and I'll see you in the next