Vibe coding beautiful UIs in 3 simple steps

How is this possible? Beautiful, fully responsive dashboard coded from one prompt. But every time you try it, it looks something like this. I can't look at this anymore. It's so ugly. Oh my god. By the end of this video, you'll learn how to make a good-looking responsive user interface for pretty much any design you would like to throw at it, but also have it powered by highquality, maintainable code. I will share everything you need to reproduce this. The prompts, the workflow, the

code, it's all going to be there. Not like other YouTubers. You know who you are. Just check the link in the description to grab all of those. All right, we'll do this in three steps. Step number one is preparing the design. Step number two is making a design brief and step number three is generating the code. Let's get into it. Now, for the design, you can either use Chad GPT or Google Gemini's Nano Banana. I have been known to write those design prompts in

the past if you want to check them out here. But there's also an alternative. If you're really lazy, and I mean really, really lazy, we can just head over to dribble.com and grab a design from there. To keep this short, let's just do that. I'll head to dribble.com and type in fintech dashboard. We have a few good examples actually. And I think I will just pick this one here by Vector. I think this looks pretty nice. I'm a big fan of these green accents on the grayscale UI. So, let's just copy

one of these and head over to chat GPT. And now we're ready for step two generating the design brief. Let's paste the image. And since this is based on an image, the method will actually work with pretty much any design. So regardless if you got it from a designer that made it in Photoshop, if that's still a thing, it will still work. But also if AI created an image that will still work just fine. Now comes a bit of secret sauce. Through much experimentation I have found that this

prompt plus adjacenc design brief gives the most accurate results. C stands for comments. By the way I use Jet GPT's image analysis model because it's really really good but you could also try the same with Gemini's nano banana. I'm using GPT 5.1 thinking, but anything above GPT5 should be just fine. Let's skim through the prompt real quick. The first part is giving it a little bit of context about what we're building. So this is the part that you would like to

change to match your app. This is also the only part that you need to change in this prompt. So the other three parts here are first asking it to output a JSON C detail design brief. then specifying how colors should be accounted for. And finally, I'm instructing it to output a developer brief, which will just give an overview of the task at hand. And that's it. Let's submit it and see what we get. As you can see, the result is a fairly long and detailed prompt. You don't really

have to read it. You can if you want. But what I'm going to do is copy paste all of this plus the brief at the end and put it in cursor. Before we jump in I would just like to thank Sentry for sponsoring us. Head over to sentry.io to get rid of those pesky bugs and crashes. Now, in cursor, I also have a pre-made prompt explaining a little bit how this should be implemented, giving it some requirements. For example, it should be responsive, support dark mode, and not

use magic strings to keep the code quality up. And I have two placeholders. One for the implementation brief, which I'm just going to paste like so. And at the bottom here, a place to paste the JSON C design specification, which I'm also going to do like so. And besides making sure that we have Sonet 4.5 selected, the only thing that's left to do is to send this prompt. Oh, I'm really excited about this. All right, and without further ado, let's take a look at what it

actually built. I'm just going to head over to the browser, open up a new tab and go to localhost 606 dashboard where I know there is a dev server. And you you can't make this up. This is this is freaking nice dashboard and obviously it is fully responsive. Did you see that animation with man? Did Did you see this is wild. It looks modern. It looks consistent. And I'm pretty sure the code behind it is not too bad either. Let's take a quick look. As you can see, there are no

actually built. I'm just going to head over to the browser, open up a new tab and go to localhost 606 dashboard where I know there is a dev server. And you you can't make this up. This is this is freaking nice dashboard and obviously it is fully responsive. Did you see that animation with man? Did Did you see this is wild. It looks modern. It looks consistent. And I'm pretty sure the code behind it is not too bad either. Let's take a quick look. As you can see, there are no

hard-coded items in here. It is using primary colors. It is using a design system. So, if I go and look at this going to be completely nuts. But if I go and open the file called colors and I change this main one to red and then we go back. How about that? [laughter] It is built to scale. It is. You can just theme it with one one line. This is amazing. This is AI that actually works and not just slop. Okay, but this is too good to be true, right? Pretty sure I'm

going to go in the comments and say "Hey, Dan, I tried and instead of what you got, I got this thing instead." Oh God. Please, can you just someone delete this? I did glance over one detail and then if you're paying attention, you've probably noticed that when I pasted the prompt in cursor, I wasn't starting from scratch. I was already in a codebase and that is actually another secret and that is just part of this video. So before you go in the comments Angry, no, he's

just lying to us. No, no, no, wait a second. I'm going to give you that codebase so you could do the exact same thing. I'm going to give you every single line of that codebase because this is the most important part that no one really tells you because AI can kind of set up things too in a very slow and in a very bad way. You can kind of start from scratch but we've been building code bases for decades now. Like really CLI tools are really mature and I don't

think you should ever start VIP coding from a blank codebase. Now you can go in the comments and say thank you you legend because you can just go ahead and download the codebase and get the same thing. There's nothing really crazy about it. It's a setup with Tailwind Chats UI and a few configs that for example allow you to change the font real quick or allow you to change the color and so on. Big AI doesn't want you to be aware of this because they would actually rather have you bootstrap

things from scratch over and over and use millions of tokens if you can because they just make more money. So now you have a way around it. And with that, I will ask you to vibe code responsibly. I hope you enjoyed the video. Remember to like and subscribe so you make sure that I get my daily dose of dopamine. and I will see you in the next one. Thank you.

This stuff is pretty cool. Like, say what you want about AI, but this stuff is pretty cool. I have no choice but to go back in cursor and say keep all. This is beautiful. This is beautiful. That's It's

This stuff is pretty cool. Like, say what you want about AI, but this stuff is pretty cool. I have no choice but to go back in cursor and say keep all. This is beautiful. This is beautiful. That's It's