I've done over 10,000 prompts - 44-min tutorial on how to generate UI

So, I've done 10,000 prompts so far, and

I've written two, three big apps

including Aura and Dream Cut, which are

the main ones. They have well over

100,000 lines of code each. And Aura

specifically is an app that, you know

generate beautiful designs using

prompts. And we also have a guide about

it. So, if you want to learn how to

prompt, this is the video for you. And

I'm going to be sharing all the

techniques that I've learned over uh the

creation of these tools, but also

generating so many designs that you can

find in my profile. You can see here I

have 344 designs, including really well

animated um you know, beautiful designs

not like the type that you would expect

from AI.

So, you know, it's going to be very

interactive, it's going to be very

colorful, and it's really made for

designers.

Now, if you've never done prompting or

you don't really know what it is

basically anytime that you're using AI

you have to give instructions and there

are really essential understanding of

what those instructions are. So, if you

do something general, of course, you

don't need to know much about the

technicality, but if you're generating

designs or websites or landing pages

then you're going to need to know the

vocabulary of all of these terms and how

to do it. So definitely suggest to learn

about fonts, typography, animation

techniques, layout and so on. So this is

a really good uh starting point for you.

You can go to the guide for prompting

typography, animations, layout. And we

also have some sort of like a mini

version of the prompt builder and you

can sort of play with uh how you would

you know uh generate these types of

layouts and animations. also has a

prompt builder. You can learn about the

different uh types of animations such as

scale, rotate, blur, and so

on. So, let's talk about results.

Usually, you generate your UI and you

generate your site. You would prompt

this in a box that looks like this. It

looks like a chat GPT app. But in this

case, we're going to be focusing on

design. So level for example, you know

you can just ask for a prom, but you

don't really know where to start. And

usually it's a pretty good idea to sort

of uh, you know, start with a template.

Um, you also have vzero, you can fork

you have bolt, again pretty much the

same technique, but the thing is it

doesn't really handhold you in term of

you know, how to do UI. And also we have

Figma sites that's coming Figma make.

And so this skill is going to be really

useful regardless of what platform that

you use. Now the difference is in these

platforms is that you are essentially

generating fullon websites. It's going

to take a lot of time. It's going to be

very complex. It's going to use React

and a lot of components that you might

not understand. which is why I think

it's pretty good to start with Aura

because we're just down to the essence.

So the HTML and the CSS is much faster.

It has a live preview and on top of that

if you're a beginner it's really good to

have something like a prom builder. So

prom builder this is where you know you

want to either start with a template uh

or you have you know so for example you

want to generate you know a UI for a

mobile app or you want to generate a

card you just want to vibe the styling

of the UI you know you want the color

setup the font setup uh the type of

layout that you want to build and you

know Aura has right now over 800

templates that you can use from uh from

animations, mobile, 3D, etc. Right? And

these are not just like baby stuff or

like very generic, very uh boring

designs. These are things that I have

spent a lot of time coming up with uh

with all my years of experience building

UI but also building apps. meaning that

you know you have to know about all of

these libraries all of these assets that

you can use like spline like you know um

like the globe or

um the fonts and all that stuff. So it's

good to start with this. This is my most

recommended way to start. And you know

something like for example you want to

generate a card like this for example

and you want something I don't know uh

you know a feature card and you want a

four like a four cards. So you can do

that. You can add to your prompt and

then you can just press enter and it's

going to generate the UI. And you know

you didn't need to type anything which

is great because it's kind of like uh

removing the barrier to entry for a lot

of people. And in this case you have uh

a light preview and this is only

possible because we are using HTML

JavaScript. And as you can see, you

don't need to wait so long to create so

many uh files and setup and uh you know

and and often times a lot of designers

they start with this and they see an

error and they don't know how to deal

with that especially in cursor but that

happens a lot also on you know lovable

vzero and all that stuff and the reason

is very simple is because you're using

react um and uh you know you can see

here we're all doing everything

live and we're, you know, selecting from

a template. We didn't have to write

anything at all. So, I think this is

really cool. Um, but on top of that, uh

what, you know, what is cool about Aura

and, you know, I want to make something

for designers is that you can also

export to Figma. So all of these layers

can be brought to Figma if you want to

make that as part of your design system

and you want to kind of like work within

a big team environment and you already

have an existing workflow and maybe

you're not the engineer, you're just

like the prototyper. Uh and I don't mean

just I mean like you are the prototyper

and you're doing important work of

course. Uh but you know like everyone

has their workflow and it's important to

um to to test the limits of it and to be

creative and to you know you know to say

something like okay I want in light mode

now you know yeah I use cloth so much so

I'm going to switch to uh 4.1 so I'm

going to say uh I want in light

mode so yeah to know all of these terms

and to know sort of like what you want

to build and but in this case you have a

prompt builder so you just need to know

how to click around and you have to have

taste so taste is something that you

build over the years and you know what

looks good and what doesn't look good so

again with with just a few prompts right

I was able to create something that you

know gives me the style that I want the

sort of like approach that I want maybe

I want to create and and build

prototype. And so this is really

interesting. But again, you can type in

the chat, I want something in light

mode, or you can use the prompt builder.

And we have in four different

categories, right? So you have the

layout type, which is the layout that

you want to build. You know, is it a

hero? Is it a feature section? Usually

you're building a website. So these are

kind of like four websites and apps. Is

it mobile? Is it web? And even if you

let's say you create a portfolio, you

have different layout configuration, you

know, does it have a table? Does it have

a sidebar? Is it a bento layout or is it

a, you know, a feature focus or is it

split? How how is it split vertically

horizontally? all of these things that

you're going to learn as you get more

comfortable with building layouts. And

then you have the framing. And the

framing to me, uh, you know, I know a

lot of people don't care about it

especially if you're making a website

but I care about it because I'm a

designer. And usually as a designer, you

have to think about the presentation. So

whether you're putting it in a card or

you're putting it in a frame, you know

that makes it look 10 times better. And

that's why most of the time when you go

on Twitter, people are going to be

posting their design within a frame

rather than the whole website. Usually

they show a screenshot of the browser or

you know they create their own custom

screenshot as well as drop shadow

right? So the framing for me is really

important and I wanted this to be part

of the aura experience. Um so this is

about layout and then we have the

styling. you know, do you want a flat

uh, you know, style? Do you want an

outline style? Uh, I would say flat is

the most basic form of UI and you see

that on 99% of website is using a flat

layout. outline is kind of becoming more

and more popular especially with uh you

know more modern apps like you know

Apple linear uh you know versel and you

know uh Figma use a lot of outlines and

I think it's really great and makes your

app more modern and you know keep in

mind that when I say outline you know we

also include like the dividers and you

know often times if you just use flat

you would see like these buttons here

without an outline. And it, you know

it's hard to tell the difference between

the background and the element itself

which is why I I believe that having an

outline kind of makes it uh easier to

deal with depth. So having multiple

layers on top of each other. So outline

I really like I I highly recommend it

and also minimal uh which is also very

very popular nowadays which is why you

see much more spacing between elements

much more padding and it gives more room

for breathing and also less clutter. So

less elements and then you you know you

have the glass which is very omni

omnipresent in you know iOS and and and

the Mac and a lot of modern website

especially in dark mode is going to use

translucency iOS material so these are

pretty common uh and then you have light

mode dark mode uh you know I I think

it's fun that I have this preview here

and I really want to make it like an

easy representation of what I'm talking

about and also So for someone who's a

beginner, they can sort of like look at

this and they're like, "Oh, I understand

what he means." Like instead of just a

word, it's just giving me a visual

representation because we're visual

creatures. And so, you know, you have

the primary uh colors, you have the

background, which is really useful

especially if you have a framing um

involve like, you know, you're building

a card. You have the border or you can

have a transparent border. And this is

also another thing that I'm really

really passionate about is the shadow.

And I'm I'm sure you've seen a lot of

these beautiful designs on Twitter. Um

you know, what makes them special

honestly is the shadow often times

because a lot of the designs are very

basic. Uh, they showcase like the

information architecture and all that

stuff. But in this case, okay, so we

have shadow, you know, you have the

small one. These are tailwind base. uh

which make it super simple. And as I

click, notice that I'm having all of

these uh really terms that can be used

directly for AI in your prompt. Okay.

And you know again the shadow so

shadow-2xl and the reason why I didn't

put it into just CSS term is it's so

much more concise in tailwind and it's

also more control because if you have

like the whole spectrum of colors and

shadows in CSS it will never end and

often times they don't look very good.

So it's good to have some sort of like a

template for it even though uh you have

so much flexibility. So another thing

that I added was the beautiful shadows.

And so the difference between, you know

the the basic Tailwind shadow is that

it's a single shadow, but the beautiful

shadows, just like the Figma plugin

you're going to have multiple shadows

and it's going to use like for example

you know, you can have double triple

shadows and uh you know, you can have

colored shadows. So these are not basic

shadows and also you can have like inner

shadows on top of it. So this is great

as a shadow for like a frame like a a

mockup or something like a button. You

can have like 3D shadows, you can have

inner shadows. So there's so much flavor

to design that is not fully explored in

in the AI world right now because

usually when you ask for these things in

AI, it's going to give you the most

basic form of of UI possible. But as we

all know in Figma is not as basic as a

flat design.

So all the things we have discussed so

far uh is in the form of a fully fleshed

component. So for example, I can go to

web hero and you can see these are the

hero elements and these are you know

extremely well I wouldn't say extremely

but at least it's polished enough to a

point where you can use it as a template

and you can customize it right you can

go here and then you copy the code and

you can bring that to any uh you know AI

platform that you

Uh the same thing with using different

styles of fonts and different types of

layout and different backgrounds. So you

can see this is using uh a spline

animation in the background which is

full screen and you have different

styles of cards and so on. And so, you

know, and then you have so many types of

hero, right? Like usually a hero, you

have a navigation here. You have um sort

of like the title, the text, and the

call to action as well as the element

where you're going to be uh presenting

for the website. The hero is extremely

extremely important because it's the

first thing that people are going to see

uh when they land on your website. And

you know, once you have like the right

styling, you can just change the text

change the logo, change the uh

descriptions, the call to actions, and

make it a little bit more suitable for

the app that you're making. And then

you, you know, as I mentioned before

you have different styles of layouts and

uh different categories of layouts such

as features and testimonials. And, you

know, you can filter these as well.

So, um, and then you have like the

mobile stuff and then you have the, uh

the the different tags. So, there's a

lot of things that you can explore. And

it's really important to sort of like

find what you like because and this is

where the taste comes in because more

and more AI is going to come more and

more we're going to have choices, right?

And the question is how do you you know

pick the right ones for the app that

you're building and to make it as you

know high conversion as possible and so

yeah you know you have to explore you

have to uh play and then you have to

prompt and then you have to sort of like

understand the functions and how it

works and you know that part again is

just pace building you know you go to uh

download so many apps and then you try

them and then you make um you make sure

that you understand how it works. So you

know so again moving on you know let's

give it a test for for example we

already did layout but we can definitely

do um style right so light mode dark

mode yes I typed it but in this case

let's continue with light mode and I

want to have I want to play with the sha

the shadow so what I recommend if you

have like a normal shadow it's good to

have a uh a border but if you if you

have like multiple shadows

Like for example, the beautiful shadow

right here. I'm going to use medium and

I'm going to use transparent border. So

I'm going to add this to the prompt. And

you can see the change in shadow. So

right now the shadows are right. You

know, you can see this in most websites

but I'm just going to add this singular

prom and it's going to change all the

shadows for me, which is really cool.

Look, we have this beautiful, beautiful

gorgeous shadows uh that you see a lot

of designers use. And you know from

here right from the shadow that we had

before to the shadow to the new shadow

again we have beautiful live preview

which is really useful and I'm just

going to wait for this to finish so that

I can switch and kind of give you the

difference. So this is before and this

is after. Again, most people will not

recognize it and that's why taste comes

in, right? Like you think about it, the

first time you taste coffee, you don't

know all of these nuances. So, you don't

you cannot really tell the difference

between great coffee and just normal

coffee. But eventually, as you become

like a coffee snob, you kind of taste

all the nuances of coffee. And the same

with design, you know, like at first

you're not going to be like, "Oh, I I

like you're not going to be able to tell

the difference between this shadow and

this shadow. But you know as you get

better you will be able to absolutely

tell the difference and uh by doing that

people will feel that you care

throughout through your your your work

which is really important and usually

that's what brings all of these uh high

conversion and high value customers that

really cares about these

details. And now the same with dark mode

and light mode. I could have just used

the the prompt builder but it you know

the prompt builder is really good good

for me. So first first of all I'm going

to reset this. I'm going to go to style

and I'm going to go um with uh dark

mode. Now keep in mind that I can also

just focus on a single prompt. So for

example I don't want to tell uh you know

because sometimes too much information

is too much information right? So

sometimes uh when you you say something

and AI really takes that to the book, it

can be detrimental to what you actually

want. So if you just want like a simple

thing, for example, I wanted a dark

mode, just focus on that. Go simple.

Don't try to come up with like 500 words

in a prompt. Uh because most likely AI

is going to do a lot more wrong than

right. And that's why I would just

suggest okay you want dark mode just say

you want dark mode and then you have

that as part of your iterations which is

really important. Again a really really

good even you know chat uh GPT 4.1 I I

like to use cloud usually it's a bit

more advanced it's a little bit better

but um you know 4.1 is

cheaper and it does a really good job

especially if it has context. So what I

mean by context, I mean like all of

these examples that I have before, all

of these uh templates that I have before

and all of these iterations that I have

before. So that is the context that

allows AI to do a far better job than um

you know than starting from scratch.

Starting from scratch is a lot harder

especially in term of like coming up

with new icons from scratch or new

styles from scratch. And so you can see

any most AI is going to do a good job

especially if you're you know if you're

using the good ones like 4.1 and also

claw

3.7. So you can see simple prompt use

dark mode and it gives me a beautiful

version of the dark mode. Uh another

thing to keep in mind is that we're

using Tailwind. So because we're using

Tailwind AI, you know, it has a system

in place in which it's pretty easy to

switch between light mode and dark mode

because we're using like, you know, uh

the color codes like - 100 versus -900

and those are really good for switching

between. The same with using the tones

of gray. It's going to stick to the tone

of gray. So if you uh look here, this is

not exactly neutral colors. It's using

gray. And therefore when it switched to

dark mode is also using the gray tone

which is not exactly neutral uh you know

uh actual gray tone. So those things are

to keep in mind and then we're going to

discuss about typography which is

extremely important. And finally we're

going to finish with animation and then

we're going to get into the more

advanced stuff. So typography again you

don't need to click everything. you

don't need to give so much context all

the time. But if you start from scratch

or if you want to completely revamp uh

the typography, it's fine. So for

example, I'm going to select here and

then we have a bunch of the most popular

fonts that I pre-selected for you guys.

And so you know you have different cu

families. So son, serif, it's important

to kind of explore to see the styling

that you want. Typically son is for most

you know 99% of websites and apps but

serif is good for like the more

traditional ones and sometimes for for

titles you're going to use serif uh it's

kind of fun and then monospace is for

coding but also for kind of futuristic

more modern style with similar space

letters and then condense is also very

good for like um posters and uh titles

expanded the same way rounded for fun.

So, you know, like kids app and fun kind

of looking uh and then handwritten. This

is good for signatures and stuff like

that. So, again, nuances that you will

discover later on and feel free to use

the prompt builder to just experiment

with it. Um and the other thing I want

to discuss is like where do you put you

know the different fonts. So, for

example, you have the heading font and

you have the body font. So this is how

what we call font pairing and usually uh

for the title you're going to have like

a different font. So for example I could

use uh inter in inter is the most uh

popular ones so far but you can also

have guys which is a trending one you

have manro and space quartz and

different ones. So go with uh with these

and then you have the body font. So for

example, if you want to go with like a

serif font as the title um you know like

for example this one and the body font

usually you could have serif but I would

say if you have a modern app a serif

font works for the title but the UI font

I would definitely stick to you know uh

inter guys and you know the sound font.

But if you have like a newspaper font or

like a newspaper app like a book app

it's fine to use serif all the way. So

like small nuances, these are not hard

rules, but you can definitely follow

them. So you know, I want to use serif

for the title, but for the body, I'm

going to use inter or gist. Again, just

look at it. And

also the the sizes that again depends on

what you're building. If you're building

components like what we are right now

like cards, you want to use smaller. If

you're building a hero, you want to use

bigger. So, in this case, I'm using

cards. I don't want them to be too big.

And uh

subheading, again, depends if you have

subheading. Uh body and uh you know, you

can disable them if you don't want to

mention them. Body is the same. You want

smaller. Again, the more containers that

you have, usually the the smaller the

font is going to be because you have to

have information density and you don't

want like unless you have like a big

cure section, no container, then you

have bigger fonts. If you have like a

card and you have small button, you have

like a small tag button for example

then the font is going to be smaller.

So, in this case, I can get away with

you know, the smallest or the body one.

Um, you know, let's go with with this

one since we're using four cards, so we

have more information density, so it has

to fit everything. Um, and finally, you

have the uh letter spacing. Again, if

you want to go with the font weight

again, it depends on the styling.

Usually, I would start with medium or

semibold if for for titles. But also

you have the letter spacing. Uh again if

you're using a title a title it's better

to use tight and and tighter but if

you're using normal fonts then uh you

know normal is fine. So this is roughly

what what I have so far and we can

definitely add this and you know it's

good to have a range. So for example

here 20 to 30 you know etc. But you're

going to see the difference and it's

it's through experimentation that you

you're going to get better at this um as

you go.

All right. So, this is what we have. We

changed the font and we have sort of

like a an idea of the sizes. I think the

AI is pretty good. If you know, if you

want to compare, this is what we have

before and this is what we have now.

Yes, I use serif. I could have not used

it, but I just wanted to give you an

example of what you can do with it. And

you can see that we use serif for

headings, but we didn't use it for the

body font. So, you know, again, this is

good to know. And finally, we're going

to get into the animation. So, animation

is really fun. Let me just reset this

first. And you know, it's good to have

an example

here. So, you have fade, slide, scale

and we have so many, right? And you can

see 3D, uh, pulse, shake, bounce, morph.

Uh, keep in mind that the the

representation doesn't always work

because it's very very complex to come

up with all of that stuff. But sometimes

you see it like more it kind of uh looks

funky and fun skew colors and all of

these things. But the main ones are

fade, right? Like usually this is where

you're going to see everywhere. But you

also have slide a lot and also you can

decide to go all at once. So, it's going

to animate the whole thing. Or you can

go by sequence, meaning that one by one

it's going to go and it's going to have

a little delay of 0.1 second and it's

going to one go one by one. Uh, you also

have like word by word. So, this is good

for just specific titles and letter by

letter. Now, again, I would say that AI

has a bit more trouble. I think the

maturity of AI hasn't reached the sort

of like expertise that we we would have

normally with so many years of

experience with web design, but it does

work. You know, I've been using this. It

requires a little bit more prompt. It

does work. But the the common one that I

recommend would be all at once or

sequence. And the other thing is you can

also select multiple ones. So I can

select fade, scale, and slide. I can

even select blur as well. So

obviously when you know you can play

with the timing and all that stuff uh

the delay uh the duration the timing. Uh

the most common one is easy out. Uh you

can spring if you want like to have the

bounciness and all that stuff. Uh you

can also iteration. So if you're doing

like a a loading screen, it's going to

infinitely think, you know, like spin

and stuff like that, but in this case

we only want to happen once. And then

you have the iteration. So is it going

to be a pingpong or, you know, and stuff

like that. So a lot of small details

that you're going to be learning over

time. Um, I'm not going to focus too

much on this. Let's just focus on the

basics and let's just focus on these

three main ones and use a sequence

animation. So we're going to add this.

So again, it's mentioning these three

ones and it it's mentioning sequence.

It's also mentioning the duration. So

we're going to add this and we're going

to hope for the best. Animation with

live preview is a little bit harder, but

it does work. It's not going to have the

same sort of like amazing live preview.

It does flash a little bit because it

needs to reset. I need to improve this

experience. All right. Finally. So, we

have the animation. If I refresh, it's

beautiful. Uh what I'm noticing that it

did made it made a little bit of

mistake. Maybe it added some uh some

bounciness. Maybe I should have

mentioned about easing out. So, this is

the the type of thing that you want to

play with. Uh but it works. It does the

sequence animation. It does the scale

the fade, the slide, all of these at

once. And you know, because of the

prompting that I did, there's no magic

behind it. This is just purely

prompting. Prompting is all about

knowing what to say in the most

technical term possible in which as

accurate as possible, the AI is able to

understand you. This is the whole point

of prompting. Um but it's not perfect by

any mean unless of course you give the

full breath of the code which is what we

did at the beginning then it becomes

extremely precise because it doesn't

need to do more than that. It doesn't

need to interpret it doesn't need to uh

uh understand all of these nuances of

what you mean. So that's why yes you

will have sometimes a little bit of

nuances a little bit of flavor a little

bit of mistakes sprinkled on all of that

stuff.

All right. So now to the advanced part

and this is where the sky is the limit

right? The prom builder is there to get

you started to you know to adapt to

create to know uh how to use the

vocabulary and all that stuff but often

times we build on top of each other. So

looking at all the iterations that we

have made so far, right? This is also

another thing that I really wanted to

put in aura and it's very unique. You

can browse all the things that you have

created so far and you're gonna

see how did I create this because

certainly I didn't use the prompt

builder from scratch and the secret is

that we are

using the open-source community and the

fact is yes you can ask AI is going to

also do the same thing but we want to be

more precise and I want to show you some

of the resources that I love personally

that I find amazing and again these

coming this comes from authors and they

they they they share it with everyone

and I think that's amazing. So codepen

is amazing. Uh you can go to codepen.io

and you can browse here and uh you know

this is a mentality that has existed

forever in the open source community. We

have done that with coding. Uh but

mostly recently we're doing more and

more with design especially be with AI

sharing everything and making everything

so much more powerful. So you can browse

through this uh and then find something

that you like and essentially you can

bring that code and then ask AI to remix

that code, right? And if you like an

effect, if you like a spec, you know

maybe you like these clouds here, you

can do that. All you need to do is to

copy the code, for example, and you

know, I could have done that with

cursor. I don't have to do that with

aura. It has nothing to do with aura

but I just want to give you an example

of how you would do it. So, for example

you would copy the code, you would go to

something like lovable, right? And you

would paste

um all of that beautiful code um

and you know let me just do this here

and and then at the end you can say

something like adapt for but you know

for the sake obviously I'm not going to

release as is usually when you take a

template whether in Figma whether uh

using a UI kit you don't want to just

use the essential one you want to use it

as a fork as a baseline right so it's

like think of you know cursor being you

know a fork of VS code right you want to

use that as a b baseline and then you

want to sprinkle your creativity on top

of it but I just wanted to show you the

technique involved to uh to do that you

know to start with the fork and then to

customize it and to make it better and

to use the the prompt template to write

like to kind of improve upon

it. So again, this is the basic template

and at this point, you know, you want to

customize the font, you want to

customize the color. So, for example, I

I want something like in light mode and

change like adapt to a payment card. You

know what? However you want you want to

do it, it's up to you, but just make

sure that you you know you're changing

it. So this is a bit of a poor example

but I want to show you that you know by

just prompting a little bit I you know

turn something I remix it you know like

this also is is common in in frame you

can remix a template uh you know I

change using AI and I turn it into light

mode and you know it's kind of like

keeping some of the essence uh

especially if I kept it the same colors

it would probably keep even more so you

have code pen pen. Uh, what I would say

is that there are multiple ways to

browse Code Pen. And of course, you

know, if you appreciate the work from

all of these amazing creators, make sure

to mention them in your tweet

especially if you're going to share it

in public. Um, uh, but, you know

obviously we're all here to support each

other and we want to change as much as

possible from the original and there are

definitely amazing, uh, creators that I

highly recommend that you follow. uh

like Jay for example and he has a lot of

amazing uh tweets where he shows the the

techniques that he used and the code

that he used and all that stuff. It's

all available publicly in code pen. So

you can remix them and you can play with

them, you can change them, you can make

it and use it for your website. And

another way I like to browse codepen is

through Google. So, you know, just the

same way as Stack Overflow, you start

with code pen and then you type what you

want to see. So, for example, cards and

hollow deck and maybe you want to take a

look at the Pokemon cards and see the

source code that is being shared. And

this is really cool. Um, you know, a lot

of amazing work out there that you can

definitely uh play and then customize

and make it different uh from the

original and make it sort of like

something that you could use for your

own design. Um, another website that

that I that I find really really good is

also 21st Dev. They have a lot of

amazing components that you can use. So

like a lot of them are premium, a lot of

them are free. uh but you can fork them

you can uh open the component it the

code is also share uh just keep in mind

that it is using react which means that

often times a lot of the code are not

are actually imported from chaten and

all that stuff so they might not be

visible uh within the code but let me

just find something that is a little bit

simpler like this one

um yeah you know it depends what you're

trying to create so uh open component

here and I don't know why the code is

not shown but you know you should be

seeing the code and yeah there are some

amazing

effects so here's the code uh I don't

know why some of these don't work but

let let me focus here you can see uh

this is react code and it's it's great

um but it does require a bit more

technical knowledge um so often times

it's going to import from uh other

libraries that are not part of this code

which is why AI might have a a bit of a

trouble compared to something like you

know um you know like this beautiful uh

effect here that I'm using shader uh you

go to the code and all of this code is

there there's no import there's no

hidden code there's no react libraries

out there that is that is not part of

this code that AI cannot use so often

times if you copy a code like this uh

from something like Aura for example or

CodePen you're not going to have trouble

translating that using AI but you know a

little nuance here it they they both I'm

not saying one is better than the other

the other one but the React one requires

more technical knowledge and often times

a lot of the code is hidden which is not

a bad thing especially if you work

already an existing React project. So

just different flavors. Um and then let

me discuss about the different libraries

that you can be using and you can be

mentioning to AI not necessarily needing

to copy the code. So for example we have

Kobe which is great for generating this

beautiful beautiful

um the earth and globe that is

draggable. It you know it comes with

different colors and all that stuff and

you can bring the code but you can also

mentioning it to AI. So for example I

can go to uh you know to here and I can

say add a

Kobe JS globe right and AI is smart

enough to understand the context of it

because it's a library and it exists and

it's popular right and so you can also

if it doesn't work and copy this code

and you can bring that to Aura for

example or lovable again I'm not

specific to Aura um there are other

libraries. So, uh, Ventjs, which is

really cool as well. So, you have

different styles, you have like

different uh, you know, backgrounds and

some some of them might be 3D if I'm not

mistaken, but all of these things that

you can use for your project as a

background. And then we have the

JavaScript libraries that are more like

you know, effects and stuff like that

not necessarily as a background, it's

interactive. And so you can see here

it's really cool and you know get

familiar with it. Uh so for example I

have this uh snow one. So usually they

they come with different examples. So

you have the snow you have uh

NASA you know and they all come with

different settings and interactive and

particles and you know you can really

customize. And the cool thing about some

of these libraries is that they have so

much more flexibility versus, you know

just taking from a template. Again, it

depends on your level of expertise and

how much flexibility that you want. Uh

there's also, you know, particles, but

also there's another one that I really

like called

MatterJS, and it's really really cool.

It's a physic engine and you can see you

have so many so many examples of these

uh these physic things that you can use

for your website and you have all of

these demos that you can play with and

uh you know you have mix shape you have

like pyramid you have

uh stress so many example I can't go

through all of them but this is all

possible and it's just amazing another

resource that I really like to use is

code drops. Again, some of them more as

inspiration and some others more as uh

you know like like a library for

example. I would name drop that in uh in

aura but code drops has a ton of these

shared code where they create these

amazing examples. Uh it's a little bit

more advanced. Often times the code is

on GitHub and anything that is on GitHub

can have multiple files. So you have to

be more advanced. So for example, if I

want to use this, I might need to to

download the entire thing. I might need

to ask AI to include all of these

JavaScript files in order to be able to

achieve the same result. You can see

there's many many multiple files, which

is why again, let's keep it simple for a

lot of people out there who are

beginners. So that's why if you go to a

place like Aura for example and you want

like a card like this or you want a like

a book for example like this one which

is really cool then you don't need to

scour the web and find all of these

files. You just need

to go to export copy the code and then

you bring that to Aura. So you go to

create and then you paste this and then

you can add like a prompt adapt for you

know a payment card or something like

that and it's going to create something

uh similar to what is using as a

context. So we can see you know I use

the book and I turn it into a payment

card. it, you know, it changed the

gradient, but it's using the same sort

of like um effect and all that stuff.

So

creativity is your limit at this point

with AI. There's no limits, right? You

can do anything you want. You can

achieve anything you want without so

many years of experience. But it doesn't

mean that it's not useful, though. So

knowing how to say the right things and

finding the right resource is why I made

this video and hopefully you enjoy

learning all about these resources about

all the techniques and hopefully you

know give Aura a try. This is something

I poured uh you know my heart and soul

into this product to create something

that is solving for me. But yeah, please

let me know what you think about it and

please give it a try. at least take a

look at the prompt template or the

prompt guide, but also, you know, have

fun with it.