Learn. Share. Evolve…

0:00:08 everyone’s vibe coding right now but why does every vibe coded app look absolutely the same
0:00:13 in this episode design legend mungto joins us to deliver a master class on how to vibe code with
0:00:19 actual taste we break down how to vibe code a website that not only looks great but most
0:00:23 importantly that actually converts into real business if you care about standing out in the
0:00:28 age of ai this is the episode you need let’s get right into it
0:00:39 cutting your sales cycle in half sounds pretty impossible but that’s exactly what sandler
0:00:44 training did with hubspot they used breeze hubspot’s ai tools to tailor every customer interaction
0:00:49 without losing their personal touch and the results were pretty incredible click-through rates jumped
0:00:56 25 and qualified leads quadrupled and people spent three times longer on their landing pages
0:01:00 go to hubspot.com to see how breeze can help your business grow
0:01:09 mung thanks for coming on well thanks for having me i’m really happy to talk more about what’s going
0:01:15 on with the world of ai and you know how we can make better prompts better designs especially better
0:01:20 designs because that’s what the world is needing right now yeah well at first i wanted to share this
0:01:24 tweet which caught my attention about a month ago that you did it made me realize you know because
0:01:28 you’re talking about how to prompt for ui you know and i’m always seeing people talking about vibe
0:01:33 coding and one thing i’ve noticed is you know a lot of the stuff that people build when they’re vibe
0:01:38 coding it’s either ugly or if it looks good maybe they’ve used lovable or something it feels like all
0:01:42 the designs look exactly the same to me and they’re also probably not really like paying attention to
0:01:46 how well these designs convert or anything like that and so when i watched your video i was like oh cool
0:01:50 finally someone’s like vibe coding but actually thinking about good design and so i thought it’d
0:01:56 be awesome to have you on here today and to do kind of a you know master class no pressure but like a
0:02:02 master class on how to vibe code with good design yeah you know um there’s no pressure of course but
0:02:08 as someone who’s built i think i’ve done way more than 10 000 prompts at this point i’ve built
0:02:16 really really complex apps including dream cut and aura as you’ve seen and that prompt builder that
0:02:22 you see is part of the feature of aura which allows you to essentially handhold you in terms of you know
0:02:27 how you want to do your design okay and using the vocabulary around design because right now as you
0:02:36 mentioned there’s a problem with generic designs ai is not very good with design and has been like this
0:02:42 for a while it’s getting better but still even if it’s getting better as with coding it still needs
0:02:50 a lot of context it still needs a lot of these terms and these examples these images these you know
0:02:56 animation terms that most people are not aware of which is why when you create an app using something
0:03:02 like lovable or v0 it’s going to look like 99 of the rest of the app it’s as if like you’re using a
0:03:08 template like bootstrap or right something like this which makes your website look more like a blank
0:03:14 ui kit rather than something that a designer comes in and customize yeah they’re not memorable you people
0:03:20 can tell that it’s templated exactly and you know what is surprising is that it doesn’t take that much
0:03:29 effort more to get something that looks really basic into something that looks a lot more polish and
0:03:35 sometimes it’s just like a little ingredient that you added to the design like a little prompt or a
0:03:42 little animation or a little resource that you add to your design to make it look just so much more
0:03:46 sophisticated i think it’d be great just to like show people what we’re talking about yeah we can talk
0:03:50 about or but uh you know maybe it’s better just to show people so they have like they can understand what
0:03:56 what we’re talking about yes so you know obviously i’m showing aura but i could have shown any of the
0:04:04 neovizio or lovable or happens to be an app that i built from scratch by the way using cursor and what
0:04:11 do i try to focus here is if you’ve seen the age of dribble the age of you know before that deviant
0:04:17 art i’m someone who came from that that background so i really care deeply about you know designs and
0:04:24 effects and graphic design and print design so i try to make this as unique as possible so for example
0:04:29 this one is quite popular and if you see the composition of a design like this right you know
0:04:37 most people they would have a very basic design without you know some of the effects that makes
0:04:43 this a lot more unique such as the spline background so what is spline spline is a 3d resource where you
0:04:51 can essentially create or remix existing 3ds that you can put on your website so the the block that you see
0:05:00 here is a 3d resource which is again not that much more effort but you do have to go to a spline design and
0:05:07 then you go to community for example and then you can remix some of these designs that are made by the
0:05:11 community oh i see so you can use that design and like probably modify the vectors or something like
0:05:19 that and then kind of customize how it looks yeah and also another one that i like is unicorn studio which is
0:05:27 absolutely amazing again it’s like an animated asset that you add to your website that elevates
0:05:34 your design by 10x oh that’s so cool and you know that’s kind of those ingredients that you need to be
0:05:42 aware of to make your design so much more unique and less generic so going back to aura
0:05:47 and so or i’ll just i want to make sure i understand it’s giving kind of like templates that you can get
0:05:52 the prompts for or you’re getting the entire template trying to make sure i understand yes that’s a good
0:06:00 question so aura you know there’s a ton of templates that you can use and each of these designs that you see
0:06:09 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
0:06:16 everyone knows even if you’re not a coder i’m sure you’ve heard of html css right and essentially all
0:06:22 of this doesn’t depend on any libraries or react or it’s not going to give you an error you can just
0:06:30 copy the code here and you can bring this code to any platform such as lovable or v0 and bolt and so
0:06:36 at the basis if you don’t want to use the service you know obviously i’m going to show the prompting
0:06:42 aspect but you know what i want to show is that this is how unique your design can be
0:06:50 you have you know the menu the title description the buttons and all of that stuff and then you have
0:06:57 the resource which makes your design stand out and then you have different types of design for mobile
0:07:04 for animation for loading and so you bring it all together and you create something that looks a lot
0:07:11 more unique and maybe a full page there’s just so many ways to prompt to get there and as you mentioned
0:07:17 before we do have a prompt builder and this prompt builder is where everything comes together in a
0:07:23 formula in a recipe if you’re a cook you understand that you have to follow a certain recipe to get
0:07:30 the perfect omelet the perfect ramen so in this case it’s the same way right like first of all you have
0:07:36 a template right and this is the easiest way a template is like a package of noodle or ramen you know
0:07:42 it’s going to be good all the time but you know otherwise if you’re more adventurous then at least
0:07:49 this is going to help you with telling ai how to do things and what to do and kind of giving the right
0:07:53 direction i guess it gives you like the right visual language to the lm’s so they know what to build for
0:07:57 you right because like otherwise you’re just like oh make me a beautiful site like what does that mean
0:08:04 exactly yeah and a beautiful site can be a lot of things and one of the problems with beautiful site
0:08:12 as a term is that beautiful is highly subjective and you know it’s not very precise and oftentimes
0:08:20 llms are trained to be in a way that beautiful means purple gradient means you know like you know like
0:08:26 always the same super bold font and you know it’s very generic as a term so instead you want to know okay
0:08:33 what is a hero and what is a feature what is the onboarding and then you know is it a card is it a
0:08:39 list is it a square is it a bento layout and the framing do you want to frame it full screen do you
0:08:46 want to you know create a presentation for youtube for example so if you do a presentation on twitter or
0:08:52 youtube or instagram you might want to have like a card presentation or a browser presentation that gives a
0:08:58 lot more context then you can add a background in in the back so you know that’s for like the layout and
0:09:05 then there’s the styling you have multiple stylings such as flat design outline minimalist glass ios material
0:09:12 and then you know as you dive deeper into each of these categories you get into light mode or dark mode
0:09:18 and then you have also the accent color so this is super important because every website has a brand
0:09:24 color that differentiate from the rest so obviously if you don’t say anything you just say beautiful
0:09:31 it’s always going to be purple i don’t know why ai loves purple maybe because in recent years many
0:09:37 designers are using purple so it’s trained on that but unless you tell it it’s always going to go with
0:09:43 purple so you might want to you know tell it oh maybe i want like a red or you want amber or orange or
0:09:53 cyan or blue so there’s that and then the background color again background color is the same as the
0:10:02 primary color or the accent color but reduced in terms of saturation and brightness as a result it’s
0:10:05 less you know attention seeking
0:10:14 my first million hosted by sam parr and sean puri is brought to you by the hubspot podcast network
0:10:19 the audio destination for business professionals my first million features famous guests like alex
0:10:25 chromozzi sofia amoroso and hassan minhaj sharing their secrets for how they made their first million
0:10:30 and how to apply their learnings to capitalize on today’s business trends and opportunities
0:10:37 they recently had a fascinating episode about how you can scale a profitable agency with zero employees
0:10:42 using ai agents listen to my first million wherever you get your podcasts
0:10:51 i think i’m getting a little bit into the details but that’s good you know to just to explain so that
0:10:55 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
0:11:02 and like really tweak and customize things you can exactly and then you get like the border color
0:11:07 the shadow shadow works really well especially in light mode as you can see here you know you can
0:11:15 have like no shadow small large and then you also have the beautiful shadow which a lot of people like to use
0:11:20 and beautiful shadow typically you don’t want to have a border with the drop shadow like this one you
0:11:28 would maybe also have inner shadows and you know maybe a 3d bevel kind of thing which is also really
0:11:34 popular on ios especially with the new liquid glass as you can see a lot of people love kind of like
0:11:41 the more realistic looking and it’s kind of like skew morphism is getting back into the game it’s revived
0:11:47 but in a way that is more modern in a way that is more contextual rather than having you know something
0:11:53 that it always like wood or always like stitch letter and now we have a liquid glass that you know works
0:11:59 well with any background any color so that’s really cool and then obviously one of the most important
0:12:08 part is the typography and there’s millions of typefaces out there but i like to break it down to a few that
0:12:15 most websites are using right now so we all know enter everyone use enter but you also have the
0:12:22 sister phone which is a lot of people like to use guys and then menro jakarta space on and and again you
0:12:28 have examples on the right side so you can see how it looks like and if it fits your design or not
0:12:33 you know what is a serif font what is the sand font like a serif font is more traditional it’s gonna have
0:12:41 more curves and monospace is more for coding condense uh expanded you know and then you have the rounded
0:12:47 which is more for playfulness such as for kids app and then you have the handwritten uh if you want to be
0:12:54 more like a school or something like politics yeah yeah yeah exactly but right now uh i would say focus
0:13:00 on sounds on serif and maybe sometimes rounded and then for each one you have a list of fonts that you
0:13:06 might want to use such as playfair or instrument which is really really popular right now those are
0:13:11 the main ones that i would use and then you have like the font pairing what is font pairing essentially
0:13:16 is okay you have the title which is one font and then you have the body which is a different font
0:13:22 typically a title is going to be more like big you know bold and all that stuff and sometimes you might
0:13:29 have like serif font as a title but the body font usually is not serif or at least normally because it
0:13:33 it needs to be readable most people are going to spend most of their time reading this so it has to
0:13:39 be sound as much as possible so that it’s more readable and then you have the sizing the subtitle
0:13:45 the body text if you really want to break it down but also you have the weight of the font so
0:13:52 especially really important that sets the personality of your website is the heading so do you want
0:13:57 something that is super bold or you want something that is light right light it seems a little bit more
0:14:02 sophisticated a little bit more modern and then bold is a bit more like in your face you know it needs to
0:14:09 be readable and all that stuff and then a lot of people need to be aware that title fonts because
0:14:16 it’s so big they can be much more closer together in terms of the letter spacing right so you can change
0:14:23 that kerning and stuff probably exactly exactly yeah and so yeah typography that’s kind of like the gist
0:14:30 a little crash course into typography and then you have the animation so you know most apps
0:14:34 i love that you can see the preview of everything it’s like versus just going to to v0 and it gives
0:14:38 you something that looks cool kind of looks like a verse sale website or whatever you can actually
0:14:44 like kind of customize things and get it how you want exactly and uh you know this by the way you can
0:14:50 just use it for free anyone can go to this ui you know all of these you can just note that you can write
0:14:56 them manually but right now the whole system yes you do need to have an account you do need a pro if
0:15:01 you want to add the whole prompt right if you add the whole prompt it has all of this but clicking here
0:15:07 is free everyone can just reference this see what’s going on what are the terms all that stuff you don’t need
0:15:16 you know any account for that and then you have the animation so fade slide scale um all that stuff you
0:15:21 can also select multiple you have the sequence animation right and then you have the word by word
0:15:27 letter by letter right when you’re doing these animations in the prompt is it going to tell v0 or
0:15:33 lovable or whatever which library to use or something like that no because animation doesn’t require a
0:15:38 library library the only reason you’re using a library is to make coding easier but javascript
0:15:44 in itself and css in itself already has these animation possible it’s possible it’s just that
0:15:50 it requires more code but a library sometimes will simplify like frame of motion for example is a really
0:15:56 popular library it makes the animation and the coding for that animation much simpler and it allows for some
0:16:03 tweaks that are maybe hard to be possible it’s possible to do it with coding and so the llms can do it
0:16:08 themselves yeah yeah because if you think about it all the libraries are all using html css
0:16:15 and javascript right they all based on the same framework it’s just that they’re packaged into react but
0:16:22 react you know you create a react website you export it and you publish it in essence you inspect
0:16:29 the browser it’s all javascript and html right so the same way with animation all of this is just
0:16:37 animation using css and html and javascript okay let’s be honest your ai prompts aren’t giving you
0:16:43 the results you deserve but with a little coaching you can transform from basic prompts to engineering
0:16:50 conversations that get you exactly what you want from chat gpt that’s what this playbook delivers not just
0:16:56 random prompts but a step-by-step system with the exact techniques top ai professionals use every day
0:17:02 you’ll have your own personalized prompt engineering system that delivers consistent results get it right
0:17:07 now scan the qr code or click the link in the description below now let’s get back to the show
0:17:12 i think it’d be good if we could do something like make this practical for people like if we could actually
0:17:17 come up with a website landing page you know we can even make up a company or whatever but like
0:17:23 make a landing page right now like whether we use v0 level whatever you want to use and if we can kind
0:17:29 of like tweak the design and then show how we’re you know actually making something absolutely one of the
0:17:34 most important component that anyone’s going to build is the hero yeah the hero is essentially the first thing
0:17:39 you’re going to see when you land on a website you don’t really need the context for a hero because
0:17:45 the hero already has a much of a context it’s going to be full screen i like to adapt from a template the
0:17:51 reason why it’s really important to adapt from a template is because it’s going to have so much
0:17:58 more context on top of it but still going to be a hero and then you know for the primary color for
0:18:04 example a lot of people love dark mode right now yeah you don’t really need an accent color if you using
0:18:12 dark mode because white and black are good enough in terms of typeface definitely some inter is really
0:18:21 popular and big titles uh subheadings i’m going to make it a little bit smaller more minimal which is
0:18:28 you know a style that i like and then we have you know letter spacing tight and all that stuff in this
0:18:32 do we actually change what the text says or would we do that separately you know by ourselves or with an
0:18:39 lm or right so all of this is just a visual language it’s not going to tell you what the app is about
0:18:46 which is why we have a custom prompt right here where you’re going to say something like create a hero
0:18:54 section for a sas app i was thinking maybe we could play around with uh my website lore.com you know it’s
0:19:00 currently an ai newsletter sure you can create a full page of course it’s just going to take longer
0:19:04 because the more that you create the longer it’s going to take for ai to generate we could just make
0:19:10 like the hero or something maybe like a hero yeah so hero section for a sas app for lore.com so that’s
0:19:16 kind of like the basic of it i didn’t need to mention it but it’s pretty good to say it and then what is it
0:19:22 about the name of the website and what is this website about so this is going to determine what
0:19:28 kind of content is going to show yeah let’s give it a try and hope for the best so we have all these
0:19:36 things we have the context which is the html from the template i’m going to use cloud4 and it’s going
0:19:40 to start generating and you typically go to just like cloud first is that is that and then use like
0:19:47 the artifact to see like a preview right so while that prompt is cooking let me show you some examples
0:19:53 of ui that are created with claude and what i would say is that claude is my recommended model
0:20:01 for a few reasons one is that it’s the most creative one versus 4.1 is more reliable but it also generate
0:20:06 mostly the same result it is fascinating that o3 to me seems smarter but also claude still seems more
0:20:12 more articulate and better design stuff for some reason it’s so interesting all the time o3 is the
0:20:21 best at vision so o3 is smarter but doesn’t necessarily create better code or better html but
0:20:28 right now i’m using cloud4 now one thing that is really important to me is how easy it is to customize
0:20:36 after so one feature that just launched is to be able to quickly change the fonts so you can go to
0:20:42 fonts right here and you can change to different fonts just the same way as the prompt builder you can just
0:20:51 change to you know playfair or instrument or jakarta but you also have inter and then you can sort of like
0:20:59 play with the boldness of the fonts so light or you want bold or you want italic so you also have the
0:21:05 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
0:21:12 outlines and also for the body text so you can have like bold body text or a medium body text which is really
0:21:20 popular or regular body text and then because we’re using tailwind code it’s really easy to use the code and
0:21:27 transfer between colors and boom you have dark mode that’s cool you know traditionally if you want to have dark
0:21:34 mode if you’ve done figmar for example you have to set up the variables you have to set up like the light and dark colors but
0:21:41 in this case it’s generated by ai and i was just able to just transfer the colors between light
0:21:49 and dark just like that and the other thing that i love you can see here the neutral color right you can
0:21:55 change the neutral to be like blue-ish which you can see now it’s a little bit more blue or you can choose
0:22:03 one of the colors that is setting for your brand so for example if your brand is more red or orange you can
0:22:09 see that you can really play with these tones of colors and this is thanks to the ability to just take
0:22:17 the code and cross match and then just replace all the tone of tailwind colors that’s awesome and back to our
0:22:25 our prompt it’s just finished and we have this beautiful blob in the background which is from the
0:22:33 template that we have included yeah and also it’s in dark mode it’s about data centers it’s about lore.com
0:22:41 it’s using the same layout that we did and also applying the fonts that we specify as well as the beautiful
0:22:49 animation right here and of course you can customize this by using design mode and code mode
0:22:56 if you’re more familiar and you can change the text change the styles or change all other colors for
0:23:02 example light and dark mode as you wish you know obviously anyone could use this but it feels like
0:23:06 for designers you know this is like a superpower and i was sitting there thinking about it the fact
0:23:11 that you know you’ve created this and a few other apps now i just wonder you know where do you see
0:23:16 the future going like are designers now going to be like amazing at creating companies or you know how
0:23:23 do you see things playing out i think one of the key differentiator for designers is going to be taste
0:23:27 but not just for designers but for apps out there you think about it right the more companies that you
0:23:34 have the more apps that you have you know there needs to be a way for an app to stand out and the
0:23:40 way it’s going to stand up is how good it is and how tasteful it is it’s the same with restaurants
0:23:46 if you have too many mcdonald’s then mcdonald’s is no longer special so you know now like in japan for
0:23:53 example they do it really well where the food is amazing and it’s very specialized and so that’s how
0:23:58 i see the future of ai is that you know the key differentiator is going to be designed because
0:24:03 every website is going to look the same every app is going to function on the same so it requires
0:24:08 someone to think through the problem to really solve these problems for themselves as a customer
0:24:15 and to use it on a daily basis and then with tastes and knowledge they would create something that is more
0:24:23 unique and that is different from the rest and you know as a human we always have millions of special
0:24:30 things that we want to tweak and you know now that it’s so easy to create your own app to design your
0:24:37 own app just do it right like just do it based on what you want and what your tastes are and i think
0:24:41 that’s the future of ai i totally agree it’s like the best time ever to be a creator that i’ve ever
0:24:46 experienced in my entire life so it’s exciting um so like manga it’s been awesome having you
0:24:52 on here and just maybe tell people where they can find you online or aura or you can find me on twitter
0:24:59 uh at mang toe uh i do tweet a lot about prompting about you know the whole education around design
0:25:05 code i’ve been doing this for a while traditionally it was before vibe coding but nowadays everyone’s vibe
0:25:11 coding everyone’s vibe designing and so i tweet a lot more about the education around it i have
0:25:18 many several hours of content around you know how to create the best looking ones and you know give aura
0:25:26 a try even if you’re not going to use the app you can still browse all the templates and you can find
0:25:32 the ui that you want just copy the code or get the animation that you want and all of this is free
0:25:37 right you don’t need to create an account you don’t need to pay for anything and the code is usable
0:25:44 anywhere it’s super easy it doesn’t have five or ten components that you have to copy one by one and
0:25:49 then bring it to lovable or v0 you could copy it anywhere right you could use it with cursor whatever
0:25:55 you want factory something else yeah and that’s the beauty of ai nowadays as a language is that you know
0:26:06 you can bring anything that is a word even image you can attach an image you can attach a figma url you
0:26:13 can also use the prompt builder and all of these are techniques that’s going to really elevate and the same
0:26:21 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
0:26:28 that then you know ai has so much context it has so much taste that’s already embedded into it right
0:26:32 and you’re going to create the best looking one that’s awesome manga it’s been awesome i appreciate
0:26:36 you coming on really uh appreciative of the time that you spend talking about this kind of stuff
0:26:43 i think it’s really important and i hope uh these techniques going to be helpful to your audience thank
0:26:55 you thank you thank you