This Free Tool Turns AI Prompts Into Designer-Level Sites

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.

Cutting your sales cycle in half sounds pretty impossible, but that's exactly what Sandler training did with HubSpot. They used Breeze, HubSpot's AI tools to tailor every customer interaction without losing their personal touch. And the results were pretty incredible. Click through rates jumped 25% and qualified leads quadrupled. And people spent three times longer on their landing pages. Go to HubSpot.com to see how Breeze can help your business grow.

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 of 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. I wanted to share this tweet, which caught my attention about a month ago, that you did. It made me realize, you know. Cause you were talking about how to prompt for ui, you know, 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 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 when I watched your video, I was like, oh, cool. Finally someone's like, vibe coding, but actually thinking about good design. And so I thought it'd be awesome to have you on here today and to do kind of a, you know, masterclass. No pressure, but like a masterclass on how to Vibe code with good design.

Yeah, you know, there's no pressure, of course, but as someone who's built, I think I've done way more than 10,000 prompts at this point. I've built really, really complex apps, including Dreamcut and. 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 term of 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, still needs a lot of these terms and these examples, these images, these animation terms that most people are not aware of. Which is why when you create an app using something like lovable or V0, it's going to look like 99% of the rest of the app. It's as if 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.

I think it'd be great just to, like, show people what we're talking about. Yeah, we can talk about Aura, but, you know, maybe it's better just to show people so they have, like, they can understand what we're talking about.

Yes. So, you know, obviously I'm showing aura, but I could have shown any of the neon, 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, you know, before that, DeviantArt. I'm someone who came from that background, so I really care deep about, you know, 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. You know, most people, they would have a very basic design without, you know, 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 3D 3DS that you can put on your website. So the, 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 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.

Oh, I see. So you can use that design and, like, 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.

Right.

And, you know, that's kind of those ingredients that you need to be aware of to make your design so much more unique and less generic. So, going back to Aura, and so Aura, just.

I want to make sure. I understand it's giving kind of like templates that you can get the prompts for, or you're getting the entire template trying to make sure. I understand.

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.

Okay.

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 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. There's just so many ways to prompt to get there. And 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 be good all the time, but, you know, otherwise, if you're more adventurous, then 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.

I guess it gives you like the right visual language to the LLMs so they know what to build for you.

Right?

Because like, otherwise you're just like, oh, make me a beautiful site. Like, what does that mean exactly?

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 an onboarding? And then, you know, is it a card, is it a list, is it a square, Is it a bento layout? And 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 differentiates 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 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, you know, tell it, oh, maybe I want like 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 a result, it, it's less, you know, attention seeking.

My first million, hosted by Sam Parr and Sean Puri, is brought to you by the HubSpot Podcast Network, the audio destination for business professionals. My First Million features famous guests like Alex Hormozi, Sophia Amoroso and Hasan Minhaj sharing their secrets for how they made their first million and how to apply their learnings to capitalize on today's business trends and opportunities. They recently had a fascinating episode about how you can scale a profitable agency with zero employees using AI agents. Listen to My First Million wherever you get your podcasts.

I think I'm getting a little bit into the details, but that's good, 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.

Exactly. And then you get like the border color, the shadow. 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 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 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 space on 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. You know what is a serif font? What is a san font? Like a serif font is more traditional, it's going to have more curves and monospace is more for coding, condense, expanded 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, exactly. But right now I would say focus on sounds, on 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 then you have like 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 F as a title, but the body font usually is not serif or at least 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 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.

Right. So you can change like kerning and stuff. Probably.

Exactly, exactly, yeah. And so, yeah, typography, that's kind of like the gist of it. A little crash course into typography. And then you have the animation. So, you know, most apps, I love.

That 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, 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 have an account, you do need a pro if you want to add the whole prompt. Right? If you add the whole prompt, 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. You have the sequence, animation, right. And then you have the word by word, letter by letter. Right.

When you're doing these animations 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 library. The only reason you're using a library is 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 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.

It's possible to do it with coding. And so the LLMs can do it themselves. Yeah, yeah.

Because if you think about it, all the libraries are all using HTML, CSS and JavaScript.

Right?

They all based on the same framework, it's just that they're packaged into React. But React, you know, 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 HTML and JavaScript.

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 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.

I think it'd be good if we.

Could do something like make this practical for people. Like if we can actually come up with a website landing page, we can even make up a company or whatever, but make a landing page. Right now, whether we use V0 level, whatever you want to use, and if we can kind of tweak the design and then show how we're actually making something, Absolutely.

One of the most important 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. You don't really need a context for a hero because the Hero already has much of a context. It's going to be full screen. I like to adapt from a template. 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 going to be a Hero. And then, you know, for the primary color, for example, a lot of people love dark mode right now you don't really need an accent color if you using dark mode because white and black are good enough in terms of typeface. Definitely some inter is really popular and big titles subheadings. I'm gonna 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.

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 the 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 can say something like, create a HERO section for a SaaS app.

I was thinking maybe we could play around with my website, lora.com, you know, it's currently an AI newsletter.

Sure. You can create a full page. Of course it's just going to take longer because the more that you create, the longer it's going to take for AI to generate.

We could just make like the Hero or something. Maybe like a hero. Yeah.

So Hero section for a SaaS app for Lore.com. so that's kind of like the basic of it. 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. 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. I'm going to use Cloud 4 and it's going to start generating.

And do you typically go to just like Claude first and then use like the artifact to see like a preview?

Right. 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 four. Point one is more reliable, but it also generates mostly the same result.

It is fascinating that O3 to me seems smarter, but also Claude still seems more articulate and better at design stuff for some reason. It's so interesting 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 fonts. So you can go to fonts right here and you can change to different fonts just the same way as the prompt 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 also have the tightness. And one thing that is cool is to be able to see what is 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 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.

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 the light and dark colors, but in this case, it's 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, 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.

That's awesome.

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 also applying the fonts that we specify as well as the beautiful animation right here. And of course, you can customize this by using 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.

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, 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, you know, 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. And, you know, as a human, we always have millions of special things that we want to tweak. And, you know, now that it's so easy to create your own app, to design your own app, just do it, right? Like, just do it based on what you want and what your tastes are. And I think that's the future of AI.

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 aura or you can find me on Twitter. Ang to, I do tweet a lot about prompting about, you know, 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 wipe designing. And so I tweet a lot more about the education around it. I have many several hours of content around. You know, how to create the best looking ones and you know, give Aura a try. Even if you're not going to use the app, you can still browse all the templates and you can 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 ten components that you have to copy one by one and then bring it to Lovable or V0.

You could copy it in 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, even image. 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 manga. It's been awesome. I appreciate you coming on.

Really appreciative of the time that you spend talking about this kind of stuff. I think it's really important and I hope these techniques going to be helpful to your audience.

Thank you.

Thank.

You.