How to Vibe Code a Designer-Level Website in 28 Minutes

Everyone's Vibe coding right now. But why does every Vibe coded app look absolutely the same? In this episode, design legend Mungto joins us to deliver a masterclass on how to vibe code with actual taste. We break down how to Vibe Code, a website that not only looks great, but most importantly, that actually converts into real business. If you care about standing out in the age of AI, this is the episode you need, and let's get right into it.

Meng, thanks for coming on.

Well, thanks for having me. I'm really happy to talk more about what's going on with the world, AI, and how we can make better prompts, better designs, especially better designs, because that's what the world is needing right now.

Yeah. First, I wanted to share this tweet, which caught my attention about a month ago, that you did, and it made me realize, because you're talking about how to prompt for ui, and I'm always seeing people talking about Vibe coding, and one thing I've noticed is, you know, a lot of the stuff that people build when they're Vibe coding, it's either. It's either ugly or if it looks good, maybe they've used lovable or something. It feels like all the designs look exactly the same to me. And they're also probably not really, like, paying attention to how well these designs convert or anything like that. And so I thought it'd be awesome to have you on here today and to do kind of a, you know, masterclass. You know, no, no pressure, but like a masterclass on how to vibe code with good design.

As someone who's built, you know, I think I've done way more than 10,000 prompts at this point. I've built really, really complex apps, including Dreamcut and Aura, as you've seen. And that prompt builder that you see is part of the feature of Aura, which allows you to essentially handhold you in terms of, you know, how you want to do your design and using the vocabulary around design. Because right now, as you mentioned, there's a problem with generic designs. AI is not very good with design and has been like this for a while. It's getting better. But still, even if it's getting better, as with coding, it still needs a lot of context. It still needs a lot of these terms and these examples, these images, these, you know, animation terms that most people are not aware of, which is why when you create an app using something like lovable or V0 is going to look like 99% of the rest of the app. It's as if, like, you're using a template like Bootstrap or something like this, which makes your website look more like a blank UI kit rather than something that a designer comes in and customize.

Yeah, they're not memorable. People can tell that it's templated.

Exactly. And you know, what is surprising is that it doesn't take that much effort more to get something that looks really basic into something that looks a lot more polished. And sometimes it's just like a little ingredient that you add it to the design, like a little prompt or a little animation or a little resource that you add to your design to make it look just so much more sophisticated. So, you know, obviously I'm showing aura, but I could have shown any of the Visio or lovable Aura happens to be an app that I built from scratch, by the way, using cursor. And what do I try to focus here is if you've seen the age of Dribbble, the age of before that, DeviantArt. I'm someone who came from that background, so I really care deeply about designs and effects and graphic design and print design. So I try to make this as unique as possible. So, for example, this one is quite popular. And if you see the composition of a design like this, Right. Most people, they would have a very basic design without some of the effects that makes this a lot more unique, such as the spline background. So what is spline? Spline is a 3D resource where you can essentially create or remix existing 3Ds that you can put on your website. So the blob that you see Here is a 3D resource, which is again, not that much more effort, but you do have to go to a spline design and then you go to Community, for example, and then you can remix some of these designs that are made by the community.

So you can use that design and probably modify the vectors or something like that, and then kind of customize how it looks.

Yeah. And also another one that I like is Unicorn Studio, which is absolutely amazing. Again, it's like an animated asset that you add to your website that elevates your design by 10x.

Oh, that's so cool.

And that's kind of those ingredients that you need to be aware of to make your design so much more unique and less generic.

And so aura just. I want to make sure I understand it's.

It's giving.

You know, these are like, kind of.

Like templates that you can get the prompts for or you're getting the entire template.

Yes, that's a good question. So Aura you know, there's a ton of templates that you can use, and each of these designs that you see here are also in code. And the best part is that it's only one file and it's in HTML and css, which everyone knows, even if you're not a coder. I'm sure you've heard of HTML, css, right? And essentially all of this doesn't depend on any libraries or React or it's not going to give you an error. You can just copy the code here and you can bring this code to any platform, such as lovable or V0 and bolt. And so that's, you know, at the basis if you don't want to use the service. You know, obviously I'm going to show the prompting aspect, but, you know, what I want to show is that this is how unique your design can be. You have the menu, the title description, the buttons and all of that stuff. And then you have the resource which makes your design stand out. And then you have different types of design for mobile, for animation, for loading. And so you bring it all together and you create something that looks a lot more unique and maybe a full page, right? So there's just so many ways to prompt to get there. And as I, as you mentioned before, we do have a prompt builder. And this prompt builder is where everything comes together in a formula, in a recipe. If you're a cook, you understand that you have to follow a certain recipe to get the perfect omelette, the perfect ramen. So in this case, it's the same way, right? Like, first of all, you have a template, right? And this is the easiest way. A template is like a package of noodle or ramen. You know, it's going to get, it's going to be good all the time. But, you know, otherwise, if you're more adventurous, then, you know, I think you should at least. This is going to help you with telling AI how to do things and what to do and kind of giving the right direction.

So I guess it gives you like the right visual language to the LLMs, so they know how to. What to build for you, right? Because like, otherwise you're like, oh, make me a beautiful site. Like, what is. What does that mean exactly?

Yeah, And a beautiful site can be a lot of things. And one of the problems with beautiful site as a term is that beautiful is highly subjective and, you know, it's not very Precise. And oftentimes LLMs are trained to be in a way that beautiful means purple gradient means, you know, like you Know, like always the same super bold font and you know, it's very generic as a term. So instead you want to know, okay, what is a hero and what is a feature? What is the onboarding? And then you know, is it a card? Is it a list, is it a square, Is it a bento layout? And you know, the framing, do you want to frame it full screen? Do you want to, you know, create a presentation for YouTube, for example? So if you do a presentation on Twitter or YouTube or Instagram, you might want to have like a card presentation or a browser presentation that gives a lot more context. Then you can add a background in the back. So you know, that's for like the layout. And then there's the styling. You have multiple styling, such as flat design outline, minimalist glass, iOS material. And then, you know, as you dive deeper into each of these categories, you get into light mode or dark mode. And then you have also the accent color. So this is super important because every website has a brand color that differentiate from the rest. So obviously if you don't say anything, you just say beautiful. It's always going to be purple. I don't know why AI loves purple. Maybe because recently, in recent years, many designers are using purple. So it's trained on that. But unless you tell it, it's always going to go with purple. So you might want to tell it, oh, maybe I want a red or you want amber or orange or cyan or blue. So there's that. And then the background color again, background color is the same as the primary color or the accent color, but reduced in term of saturation and brightness. As, as a result, it's less, you know, attention seeking. So that's why you might want to, you know, again, you don't have to specify this. I think I'm getting a little bit into the details. But you know, to just to explain so that you can get more value out of it so you don't have.

To do all of this. But if you want to get into the weeds and like really tweak and customize things, you can.

Hey, exactly. And then you get like the border color, the shadow. Right. Shadow works really well, especially in light mode, as you can see here. You know, you can have like no shadow, small, large. And then you also have the beautiful shadow, which a lot of people like to use. And beautiful shadow, typically you don't want to have a border. So you also have like, with the drop shadow, like this one, you would maybe also have inner shadows and you know, maybe a 3D bevel kind of thing which is also really popular on iOS, especially with the new liquid glass. As you can see, a lot of people love kind of like the more realistic looking. And it's kind of like skeuomorphism is getting back into the game. It's revived, but in a way that is more modern, in a way that is more contextual rather than having, you know, something that is always like wood or always like stitch leather. Now we have a liquid glass that, you know, works well with any background, any color. So that's really cool. And then, you know, obviously one of the most important part is the typography and there's millions of typefaces out there, but I like to break it down to a few that most websites are using right now. So we all know inter, everyone use inter. But you also have the sister font, which is a lot of people like to use guys. And then man rope, Jakarta, spacefun. And again you have examples on the right side so you can see how it looks like and if it fits your design or not. And the same way for, you know, what is a serif font? What is a san font? A san font, like a serif font is more traditional, it's going to have more curves and monospace is more for coating, condense, expanded, you know. And then you have the rounded, which is more for playfulness, such as for kids app. And then you have the handwritten if you want to be more like a school or something like that.

Politics.

Yeah, yeah, yeah, exactly. So but right now I would say focus on sounds and serif and maybe sometimes rounded. And then for each one you have a list of fonts that you might want to use, such as Playfair or instrument, which is really, really popular right now. Those are the main ones that I would use. And, and then you have like, you know, the font pairing. What is font pairing essentially is okay, you have the title, which is one font, and then you have the body, which is a different font. Typically a title is going to be more like big, you know, bold and all that stuff. And sometimes you might have like serif font as a title, but the, the body font usually is not serif or at least you know, normally because it needs to be readable. Most people are going to spend most of their time reading this, so it has to be sound as much as possible so that it's more readable. And then you have the sizing, the subtitle, the body text, if you really want to break it down. But also you have the weight of the font so especially really important that sets the personality of your website is the heading. So do you want something that is super bold or you want something that is light? Right. Light seems a little bit more sophisticated, a little bit more modern. And then bold is a bit more like, you know, like, you know, in your face. You know, it needs to be readable and all that stuff. And then a lot of people need to be aware that title fonts, because it's so big, they can be much more closer together in terms of letter spacing. So that's why for turning and stuff probably. Exactly, exactly.

Okay, let's be honest. Your AI prompts aren't giving you the results you deserve. But with a little coaching, you can transform from basic prompts to engineering conversations that get you exactly what you want from ChatGPT. That's what this playbook delivers. Not just random prompts, but a step by step system with the exact techniques top AI professionals use. And every day you'll have your own personalized prompt engineering system that delivers consistent results. Get it right. Now scan the QR code or click the link in the description below. Now let's get back to the show.

And then you have the animation. So you know most apps. So let me just set it to enter and this is the title. Okay.

You can see the preview of everything. It's like versus just going to V0 and it gives you something that looks cool, kind of looks like a vercel website or whatever. You can actually like kind of customize things and get it how you want.

Exactly. And you know this by the way, you can just use it for free. Anyone can go to this UI to, to add all of this prompt and you know all of these, you can just note that you can write them manually. But right now the whole system, yes, you do need to, to have an account. You do need a pro if you want to add the whole prompt. Right. If you add the whole prom, it has all of this. But clicking here is free. Everyone can just reference this, see what's going on, what are the terms, all that stuff. You don't need any account for that. And then you have the animation. So fade, slide, scale, all that stuff. You can also select multiple. So right now I don't know why the animation is not previewing, but you have the sequence animation and then you have the word by word, letter by letter, right? And yeah, when you're doing these animations.

So then it's going in the prompt, is it going to tell V0 or lovable or whatever, which library to use or something like that?

No, because animation doesn't require a library. The only reason you're using a library is to make, to make coding easier. But JavaScript in itself and CSS in itself already has these. Animation possible? It's possible, it's just that it requires more code. But a library sometimes will simplify. Like the Motion Frame of Motion, for example, is a really popular library. It makes the animation and the coding for that animation much simpler and it allows for some tweaks that are maybe hard to be possible in vanilla JavaScript.

But it's possible to do it with coding and so that the elements can do it themselves. Yes.

Yeah, because if you think about it, all the libraries are, are all using HTML, CSS and JavaScript. They're all based on the same framework. It's just that they're packaged into React. But React, you create a REACT website, you export it and you publish it. In essence, you inspect the browser. It's all JavaScript and HTML. Right. So the same way with animation, all of this is just animation using CSS and in HTML and JavaScript and you know, you can get like letter by letter or word by word and the duration, delay and all that. You know, one thing that you should definitely be aware of is the timing. But most people are going to use the ease in, out.

I think it'd be good if we could do something like make this practical for people. Like if we could actually come up with a website landing page, you know, we can even make up a company or whatever, but like make a landing page right now, like using, whether we use V0 level, whatever you want to use. And if we can kind of like tweak things first, tweak the design and then show how we're, you know, actually making something.

Absolutely. One of the most important, you know.

Component that anyone's going to build is the hero. The HERO is essentially the first thing you're going to see when you land on a website. The hero you're going to, you're gonna, you know, usually you don't really need the context for a hero because the HERO already has much of a context. It's gonna be full screen. I like to adapt from a template because the reason why it's really important to adapt from a template is because it's going to have so much more context on top of it, but it's still gonna be a hero.

And then, you know, for the primary color, for example, a lot of people love dark mode right now, which is why you don't really need an accent. Color if you using dark mode because white and black are good enough and it's very, very popular. Again, you can definitely use blue, for example. That can work. And we can try dark mode. And yeah, in terms of typeface, definitely sound inter is really popular. And big titles, subheadings. I'm going to make it a little bit smaller, more minimal, which is, you know, a style that I like. And then we have, you know, letter spacing, tight and all that stuff. I'm going to set multiple animations. So fade in. Slide. Maybe that scale is not super popular. I would say Blur, because Apple use Blur a lot in on the iPhone is really popular. And it's going to be a sequence animation, which means element by element. So in this, do we actually change.

What the text says or would we do that separately by ourselves or with an LLM or.

Right. So all of this is just a visual language. It's not going to tell you what the app is about, which is why we have a custom prompt right here where you're going to say something like create a sub, you know, hero section for a.

I was thinking let's.

Let's pretend we're, you know, because I'm actually about to redesign Lore.com so maybe we can play around with my website, Lore.com, you know, it's currently an AI newsletter.

So Hero section for a SaaS app. For Lore.com, it's a. I don't remember. What is it about?

I mean, well, right now it's a. It's a newsletter, but let's say that we're moving more into.

Acquiring data centers. Data center.

About acquiring data centers. Right. So that's kind of like the basic.

Finance kind of website, the Hero.

I didn't need to mention it, but it's typically good to say it. And then what is it about? The name of the website and what is this website about? So this is going to determine what kind of content is going to show. Yeah. And you know, yeah, let's give it a try and hope for the best. So we have all these things, we have the context, which is the HTML from the template. And then let's hope for the best. I'm going to use Cloud 4 and it's going to start generating. And so right now.

We'Re going to use HTML CSS. This should take about one minute or two. A lot of website like V0 and Lovable is going to take more like five minutes for the first prompt. So while that prompt is cooking, let me show you some examples of UI that are created with Claude. And what I would say is that Claude is my recommended model for a few reasons. One is that it's the most creative one versus 4.1 is more reliable, but it also generates mostly the same result all the time. O3 is the best at vision. So O3 is smarter, but doesn't necessarily create better code or better HTML. But right now I'm using Cloud4. Now one thing that is really important to me is how easy it is to customize after. So one feature that just launched is to be able to quickly change the. The fonts. So you can go to fonts right here and you can change to different fonts and these just the same way as the Prom Builder. You can just change to, you know, Playfair or Instrument or Jakarta, but you also have Inter. And then you can sort of like play with the boldness of the fonts. So light, or you want bold or you want italic. So you, you also have the tightness. And one thing that is cool is to be able to see what it's going to apply to. So you see like these green outlines. And also for the body text, so you can have like a bold body text or a medium body text, which is really popular, or regular body text. And then this I love is to be, you know, because we're using tailwind code, it's really easy to use the code and transfer between colors and boom, you have dark mode.

That's cool.

And this, you know, traditionally, if you want to have dark mode, if you've done Figma, for example, you have to set up the variables. You have to set up like, you know, the light and dark colors. But in this case it is generated by AI and I was just able to just transfer the colors between light and dark just like that. And the other thing that I love is you can see here the neutral color, right? You can change the neutral to be like bluish, which you can see now it's a little bit more blue. Or you can choose one of the colors that is setting for your brand. So, for example, if your brand is more red or orange, you can see that you can really play with these tones of colors. And this is thanks to the ability to just take the code and cross match and then just replace all the tone of tailwind colors and back to our prompt, it's just finished. And we have this beautiful blob in the background, which is from the template that we have included. And also it's in dark mode. It's about data Centers, it's about lora.com it's using the same layout that we did and, and also applying the fonts that we specify as well as the beautiful animation right here. And of course, you can customize this by using to design mode and code mode if you are more familiar. And you can change the text, change the styles, or change all the colors, for example, light and dark mode, as you wish.

So, I mean, this is all been awesome. You know, obviously anyone could use this, but it feels like for designers, you know, this is like a superpower. And I was sitting there thinking about it, the fact that, you know, you've created this and a few other apps now, my understanding is like, you've vibe coded them, right? You know, and also you did the design and made sure the design looked good. I just wonder, you know, where do you see the future going? Like, are designers now going to be like amazing at creating companies or, you know, how do you see things playing out?

I think one of the key differentiator for designers is going to be taste. But not just for designers, but for apps out there. You think about it, right? The more companies that you have, the more apps that you have. There needs to be a way for an app to stand out. And the way it's going to stand up is how good it is and how tasteful it is. It's the same with restaurants. If you have too many McDonald's, then McDonald's is no longer special. So, you know, now, like in Japan, for example, they do it really well, where the food is amazing and it's very specialized. And so that's how I see the future of AI is that, you know, the key differentiator is going to be design. Because every website is going to look the same, every app is going to function on the same. So it requires someone to think through the problem, to really solve these problems for themselves as a customer and to use it on a daily basis. And then with tastes and knowledge, they would create something that is more unique and that is different from the rest.

I totally agree. It's like the best time ever to be a creator that I've ever experienced in my entire life. So it's exciting. So like, mang, it's been awesome having you on here and just maybe tell people where they can find you online.

Or so I just want to mention you can find me on Twitter. Ang to. I do tweet a lot about prompting about the whole education around design code. I've been doing this for a while. Traditionally it was before Vibe coding, but nowadays everyone's Vibe coding, everyone's vibe designing. And so I tweet a lot more about that, the education around it. I have many several hours of content around how to create the best looking ones and give Aura a try. Even if you're not going to use the app, you can still browse all the templates and you can, you know, find the UI that you want, just copy the code or get the animation that you want. And all of this is free, right? You don't need to create an account, you don't need to pay for anything. And the code is usable anywhere. It's super easy. It doesn't have five or 10 components that you have to copy one by one and then bring it to Lovable or V0 and you could copy anywhere, right?

You could use it with cursor, whatever you want, factory something else.

Yeah, and that's the beauty of AI nowadays as a language is that, you know, you can bring anything that is a word into an even image, which, which is also another important factor is that, you know, you can attach an image, you can attach a figma URL. You can also use the prompt builder. And all of these are techniques that's going to really elevate. And the same with the HTML code that I just copied, I just paste here and say, create a website based on this, right? So if I do that, then, you know, AI has so much context, it has so much taste that's already embedded into it and you're going to create the best looking one.

That's awesome. Well, manga's been awesome. Appreciate you coming on.

Thank you.