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

Channel: DesignCode
Video: https://www.youtube.com/watch?v=M-uUFLU9IFU
Duration: 44 min
Language: English
Words: 7619
Transcript page: https://viewrankai.com/tools/youtube-transcript/M-uUFLU9IFU

---

[0:00] 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

[0:43] 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

[1:25] 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

[2:03] 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

[2:27] 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

[3:10] 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

[3:51] 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

[4:39] 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

[5:17] 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

[5:53] 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

[6:29] 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

[7:07] 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

[7:40] 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,

[8:21] 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

[8:58] 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

[9:38] 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

[10:17] 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

[10:56] 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

[11:32] 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

[12:11] 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

[12:38] 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

[13:16] 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

[13:43] 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

[14:31] 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

[15:15] 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

[15:38] 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

[16:05] 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

[16:47] 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

[17:25] 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

[18:01] 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

[18:37] 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

[19:15] 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

[19:35] 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

[20:17] 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

[20:55] 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

[21:32] 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

[22:09] 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

[22:50] 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

[23:25] 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

[24:09] 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

[24:47] 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,

[25:23] 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,

[25:48] 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

[26:25] 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

[26:59] 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

[27:45] 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

[28:23] 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

[29:04] 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

[29:36] 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

[29:57] 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

[30:36] 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

[31:14] 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

[31:54] 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

[32:41] 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

[33:21] 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

[34:00] 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

[34:37] 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

[35:16] 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

[35:55] 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

[36:32] 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

[37:08] 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

[37:49] 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

[38:30] 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

[39:05] 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

[39:49] 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

[40:33] 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

[41:04] 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

[41:46] 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

[42:26] 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

[43:08] 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

[43:51] 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

[44:14] fun with it.

---

About this transcript
Read from YouTube's own caption track and laid out by ViewRank AI (https://viewrankai.com).
ViewRank AI finds the videos already beating a creator's own average on Instagram, TikTok and YouTube Shorts, transcribes them from the audio itself in more than 60 languages, and turns what worked into new ideas and scripts.
Free transcript tools, no account needed: https://viewrankai.com/tools
How to read any video this way: https://viewrankai.com/llms.txt