This Is My Secret To Building Dope UI Using AI

All right, so we have a wide variety of different AI coding tools and vibe coding tools out there and they are great and they can even build a full stack app in just a single prompt. But a

lot of these AI tools are still not good when it comes to UI and front end side of things. So you just go ahead and give

of things. So you just go ahead and give a prompt and ask the AI to create a landing page, a dashboard or some other kind of UI. And all that this AI tools comes up with are purple color gradients

and all that BS stuff, right? So, in

this video, I'm going to share not one, not two, but six different resources that can help you get really amazing UIs that it almost feels like you designed a landing page or a app design from a

really good design studio by spending thousands of dollars. And the best part, they're completely free. So, here I have opened up six different resources that will help you make your app's UI 100

times better instantly. So, the first one is 21st.dev. Then we have UI.io, IO, dribble, landingfolio, navbar gallery, and landbook.com. And I'll also show you

and landbook.com. And I'll also show you how you can actually use them. So first

of all, let's start with 21st. So

basically 21st.dev is a UI components library where you get instant access to hundreds of different readytouse templates. And again, all you have to do

templates. And again, all you have to do is to copy this component code. Like

this platform itself will give you a prompt, right? So all you have to do is

prompt, right? So all you have to do is to copy that prompt and paste it in whatever AI coding tool that you're already using whether it's lovable cursor or whatever that is you simply paste that in hit enter and everything

will be done and the AI will automatically implement the particular component using the instructions that they got from 21st.dev and if you want to access 21st.dev all you have to do is to head over to this link right here or

I'll also make sure to drop links to all these resources in the description below as well. And now as soon as I land on

as well. And now as soon as I land on this page, as you can see here, we have a bunch of different components. For

example, let's just say I'm planning to, let's say, add a hero section to my website. Well, in that case, I can open

website. Well, in that case, I can open this hero section right here, and I'll be able to find a bunch of different templates or let's say components that I can instantly use in single click. And

what's even more interesting is that after you add any of these components into your app, you can even edit it and further modify it to match your brand style or whatever style that you're looking for. For example, let's just say

looking for. For example, let's just say I want to add this hero component to my website. Well, in that case, I can click

website. Well, in that case, I can click on the same. And now it opens up a popup that shows a live preview of the component. And this right here is the

component. And this right here is the component. And I can easily toggle

component. And I can easily toggle between dark mode and light mode as well. And now just as for example, let's

well. And now just as for example, let's just say I want to add this particular component into a website that I'm building. For example, let's just say a

building. For example, let's just say a landing page. In that case, all I have

landing page. In that case, all I have to do is to click on this copy prompt button towards the top right. So click

on the same. And now it says copy it.

And next up, all you have to do is to open whatever AI coding tool that you're already using. It could be loable,

already using. It could be loable, cursor, bolt, cloud code or whatever that is. So in this case, I'll just show

that is. So in this case, I'll just show how we can implement the same in loable.

This is just for demo. And as you can see, I just asked the AI to create a model looking landing page for a CRM platform. And this right here is the UI

platform. And this right here is the UI that the AI has created as of now. Okay,

maybe I can open it up in a new tab. And

as you can see, this right here is how it looks for the time being. And again,

it is actually really good by the way.

In which case, let's just say I want to add this particular hero section that is this particular hero component into my app. Well, in that case, all I have to

app. Well, in that case, all I have to do is to just paste that whatever uh stuff that you copied from 21st. All you

have to do is to paste the same in here.

And all you have to do is to give a prompt something like this. Please add

the below given component as our website's hero section.

Okay. And now I can click on the send button. And while Lowable is doing that,

button. And while Lowable is doing that, we can go ahead and explore other components or let's say other elements that we can add from 21st. For example,

let's just say I want to add a comparison section. Well, if I click on

comparison section. Well, if I click on this comparison option here, I can find a bunch of different components like this. Wow, this is actually nice. And

this. Wow, this is actually nice. And

here I have another one. So, it is actually really good to show let's say after and before. And next up, let's just say I want to add a feature section. So, as you can see here, we

section. So, as you can see here, we have a lot of these components. And if I click on the same, it opens up the preview in a popup. So this is how it will look and it has all that cool

animations and stuff. Okay, next up, let's just say photos.

So all of these are examples of photos that I can instantly add with all these nice animations and whatnot. Looks

really good, by the way. Next up, we have this one right here. So the thing is that you can just head over to 21st.

And they have hundreds of different templates across different categories.

And now all you have to do is to copy the prompt and then open your AI coding tool of choice and then paste the same and you can just go ahead and give a prompt and ask the AI to add the same to your project. All right. So the same is

your project. All right. So the same is now implemented and as you can see the same UI element that is this animation right here that we asked for is now implemented in the hero section and I can find that in the app and it's

already live. In a similar fashion you

already live. In a similar fashion you can go through any components within this particular page that is 21st.dev and instantly add it to your app. And

before I move to the second one, let me quickly take a second to talk about our sponsors for today's video, Omniscent.

If you're in e-commerce, then you might already know that automated emails and SMS workflows are gold. In fact, in 2024, automated emails delivered 37% of

all email-driven sales, but came from just 2% of sends. Talk about efficiency.

Omniscent is an all-in-one e-commerce email marketing platform that helps you drive more sales with less effort.

Whether you are just starting out or running a growing online store, Omniscent has got everything you need.

And what makes Omniscent shine you ask?

Well, you get all of it. Emails, SMS,

push notifications, and even AI powered workflows, all from one single dashboard. And recent updates lets you

dashboard. And recent updates lets you generate content and segment with AI, test subject line via AB test, automatically picking winners, and autofill personalized filebacks, so nothing ever looks off. And the best

part, it seamlessly integrates with all leading platforms like Shopify, WooCommerce, Wix, WordPress, and even Big Commerce. And to quickly get

Big Commerce. And to quickly get started, all you have to do is to click the link in the description below and sign up for a new account. And once

logged in, you can quickly create a new campaign by giving details like the subject line, name, language, etc. And you can even let AI write everything for you. And yes, Omniscent even comes with

you. And yes, Omniscent even comes with AI integration. And next up, select a

AI integration. And next up, select a template that you would like to use and customize it using Omniscent's intuitive editor. And once done, you can make the

editor. And once done, you can make the campaign go live in just a single click.

And here's my favorite feature, automation workflow. So, if you move

automation workflow. So, if you move over to this automation tab right here, you'll be able to create workflows for abandoned cart, checkout, order confirmation, order follow-up, product reviews, etc. And not just this, you can

even configure Omniscent for sending SMS and push notifications as well. So, it

is indeed a truly all-in-one platform.

And again, make sure to click the link in the description below if you want to check out Omniscent. And now, back to the video. Next up is UI. And again to

the video. Next up is UI. And again to access UI, all you have to do is to head over to this link right here that is UI.io or click the link in the description below. And as you can see,

description below. And as you can see, it says the largest library of open-source UI and it says community build library of UI elements copy as HTML, CSS, Tailwind, React or Figma. And

again as soon as you land on this particular page and if you click on this option that says elements and if I click on all I can find all these components that are instantly available on this platform and I can start using the same

on my project right away. For example,

let's just say I'm looking for Tailwind components. So I can filter it by uh

components. So I can filter it by uh Tailwind CSS and again you can sort you can select a theme and for example in this case let's just say I'm looking for some forms. Well, I can select the form

option from the uh left sidebar and I can find a lot of these components in here. Okay, so we have a lot of

here. Okay, so we have a lot of different ones. Okay, this one actually

different ones. Okay, this one actually looks good, right? And again, if I want to start using the same, all I have to do is to click on this get code option towards the bottom right corner and it will open up a page and here I'll get

both HTML and CSS for that particular, you know, component, whatever this is.

And now all you have to do is to copy this HTML and CSS and paste the same to an A tool like Larable and Larable will instantly go ahead and implement the same. It is as easy as that. Or you also

same. It is as easy as that. Or you also have the option to export it as React.

For example, if I click on this option right here that says export and you can select React view. So in this case, let's just say React and I can click on the export button and you can instantly go ahead and copy this code. And again,

let's say you're using Tailwind, but for this one, it is actually using I believe styled components or something. Well, no

issues. You can copy the same. You can

also give a prompt to lovable or whatever AI tool that you're using and ask it to turn it into or let's say convert it into tailwind and the AI will do it instantly. So this writer is like a really good component, right? Next up,

let's just say cards. So if I click on the cards option, I'll be able to find all these cards. Okay, this animation actually looks good. Maybe I can open it up.

There you go. And again, I have the option to export the same and also I can find the code. So this is also one more resource that you can actually use to elevate your app's design. So let's say

you're creating a landing page, a dashboard or some other kind of UI.

Well, you can use all these resources.

And the best part is that all of these are 100% free and you don't have to pay it. So all you have to do is to just

it. So all you have to do is to just visit this website, go to the elements page, find the element or the component that you want to use, copy the code, paste it into the AI tool, and you're pretty much good to go. And in third

position, we have dribble.com. And again

a lot of you guys might be already aware of dribble.com. So basically it is a

of dribble.com. So basically it is a platform like Instagram but for designers and as you can see it says discover the world's top designers. So

you can think of dribble as a platform where top designers share their you know design landing pages and all the designing work that they have created.

And now for example let's just say I'm planning to build a landing page for uh let's say LMS platform that I'm building. Now in that case if I'm

building. Now in that case if I'm looking for inspiration well I can simply go ahead and search for a keyword in here. For example in this case LMS

in here. For example in this case LMS I'm looking for LMS dashboard inspirations. So I can click on this

inspirations. So I can click on this option right here. And now I can click on the search button. And as you can see we can find a lot of these really cool looking and nice UI design for LMS

dashboards. For example, let's just say

dashboards. For example, let's just say I like this one. So I can open it up.

Look at that. Okay. And this is yet another one. Okay. and maybe this one.

another one. Okay. and maybe this one.

Okay. And again, dribble.com and rest of every other platforms or let's say resources that I'm about to show is completely different from 21st. UI

words. So all these are platforms that you can use to take inspiration from.

Let's just say I'm building a dashboard for my LMS platform and now I'm looking for some UI inspiration. Well, I can go through dribble.com, search for the keyword and find some design. And for

example, let's just say I like this design right here. Well, I can copy the same or let's say download the image and then I can head over to Larable and let's say upload the image and then I can ask the AI to take inspiration from

that particular design. Whether it be the layout, the color palette, the typography or the overall layout design or whatever that is, you can give it as a input so that the AI will have a better understanding as to what exactly

you're looking for and come up with better designs in general. And

dribble.com is also one of such resource that you can use for let's say UI design inspiration. And next up we have

inspiration. And next up we have landingfolio.com. And again to access

landingfolio.com. And again to access landingfolio you can click the link in the description below or head over to landingfolio.com. And you can think of

landingfolio.com. And you can think of landingfolio.com as a portfolio that contains real designs like real landing pages that companies are actually using.

So as you can see it says the best landing page design inspiration templates and more. And the interesting thing is that it says get inspired by real landing page examples curated by us to ensure the highest quality. And all

these landing pages that you see in here are actual real landing pages used by real companies. And again, you can visit

real companies. And again, you can visit these website to see them in action as well. For example, let's just say I like

well. For example, let's just say I like this design and I want to learn more about it. Well, I can click on the same

about it. Well, I can click on the same and it opens up the listing page where I can find more details about this landing page. And more importantly, I can click

page. And more importantly, I can click on this visit site button right here and find the design. Okay, seems like the design has changed now. But again, this is the current design. And again, uh, if

I head back, I can select a different one. And we also have this filter option

one. And we also have this filter option towards the left side. And not just landing page. For example, let's just

landing page. For example, let's just say you're looking for inspirations for, let's say, a pricing page. Well, I can select the pricing page option right here. And I can find a bunch of them in

here. And I can find a bunch of them in here. And maybe I can select this option

here. And maybe I can select this option right here. Okay. So, this is a really

right here. Okay. So, this is a really good-look one. Maybe let's just say

good-look one. Maybe let's just say Okay.

And again, as I can see, a lot of these pricing pages and all of the designs have changed in real website. So that is something that you'll have to keep in mind. Anyway, this is also one more

mind. Anyway, this is also one more resource that you can check out. Ooh,

this is actually good. Maybe I can open it up. Okay, so this right here is a

it up. Okay, so this right here is a landing page. And again, similar to last

landing page. And again, similar to last time, you can grab a screenshot and give it to an AI tool and ask the AI to take inspiration and implement the same. And

next up, we have navbar.g gallery. And

this right here is a resource dedicated just for navigation bars, menus, sidebar, and all that kind of stuff. And

again, to access the same, just head over to navbar.g gallery or click the link in the description below. And as

you can see, it says best navbar design inspiration for websites. And here

you'll be able to find a bunch of different navbar styles. Okay, I like this one. The website is called Brew.

this one. The website is called Brew.

And if I click on the same, I can open the website like the actual website.

Okay, so this right here is the navbar that this website have. So basically

navbar.g gallery is a collection of curated designs like top websites that have really nice you know uh navbar mega bar sidebar search bar and all that they curate it and they find all these

designs and list the same on this particular website and next time if you're about to let's say build a landing page and you're looking for navbar inspiration where you can head over to this particular page and you can

find more information. So this is a cool design. Okay, this is actually a really

design. Okay, this is actually a really good one as well. Sleek and nice UI.

Okay. And here I can also find a mobile view as well. So if you're looking for inspiration like specifically navbar and sidebars and search bar and all that kind of option, navbar.g gallery is a really good resource that you can refer

to. So that's the fifth resource. And

to. So that's the fifth resource. And

next up, sixth and last we have landbook.com. And again, head over to

landbook.com. And again, head over to landbook.com to visit this site. And

landbook.com is pretty similar to that of landing folio. So landbook is basically a curated collection of real landing pages and you can find a lot of inspirations in different you know niches, different categories and

different elements and components as well. So right now I'm in the website

well. So right now I'm in the website section and here you'll be able to find all these recently added landing pages and of course if you want to let's say open one of them let's say this one

right here I can click on the same and it shows me the color palette in here. I can find the design on the left

here. I can find the design on the left side. Okay, I can find the technologies

side. Okay, I can find the technologies used. Okay, so if I want to I can take

used. Okay, so if I want to I can take inspiration from this particular let's say page and if I want to save or copy the same, I can do that. And I even have the option to visit the actual website.

So this right here is the website. Okay,

this is a really good and sleek one. And

if you want to, I have actually created a video explaining how you can easily copy a website's design down to the last pixel. And if you want to watch that,

pixel. And if you want to watch that, I'll make sure to leave a link to that in the I button or link in description below. And if you use the method

below. And if you use the method outlined in that particular video, you'll be able to copy specific UI elements from this particular page and integrate the same into your own website. So that also one more option

website. So that also one more option that you have and the same applies for all these websites like landing folio, navbar, gallery or landbook for that matter. And next step, let's just say I

matter. And next step, let's just say I want to explore things by sections. So I

can click on the sections option right here and I'll be able to find different sections. For example, here we have a

sections. For example, here we have a footer, a pricing section. Here we have a competitor comparison, a team member section. So all these are different

section. So all these are different sections and again if I want to I can copy the image or let's say download the same and instantly take inspiration from the same as well. Okay. So all of these are examples of different resources that

you can use to elevate your apps design or let's say front end in general in a couple of easy steps. And if you're looking for inspirations well you can visit dribble.com landingfolio navbar

gallery or landbook. Or if you're looking for readytouse components to use in your app, well, you can head over to 21st.dev or UI.io and instantly start using the same. Just copy the component,

drop it in your AI code, and you can easily add the same. And that's pretty much all I wanted to show you in today's video. And I'll make sure to leave links

video. And I'll make sure to leave links to all these resources in the description below, so you can go check them out. And yeah, I hope you guys

them out. And yeah, I hope you guys found this video useful. If yes, make sure to subscribe and I'll see you next