Transcription
I found a hack to prompt lovable bolt v0x better, and it's this tool that no one is talking about. I brought the founder of that tool to show you how to prompt for UI. And this might be an episode that, for people who watch, they're going to be able to charge more. They're going to get more trust with the products, and their vibe coding products are just going to get absolutely stunning, looking gorgeous designs; and this is going to be an unfair advantage for you.
All right, Colin. Colin David Kennedy, the guy who just won 5K, dude.
Hey, what's up?
You won $5,000. That's sweet. That's awesome. What are you? What are you going to do with it?
I'm gonna probably uh, actually pay for bolt new to get started.
Yeah. What? I use it for free, and then I kind of go until my credits go, and then I wait for the day to get things going. So that's the first thing I do.
All right. And what are you? What are you building?
Uh, the Sunday reset. So it's essentially an AI-powered uh, like reset tool. It asks you a bunch of questions from the week, asks you what your goals are, sends you emails. At least for now, we'll send you emails to kind of keep you up to date with everything, and then you fill it out, and over time it gets to kind of learn your patterns and your habits and helps you uh, achieve more and stay on your goals throughout the week, is my goal for it.
Cool. And and did you think you were going to win the 5,000? Like how stoked are you?
No, no, I didn't. Uh, I just threw it out there. I happened to click on the video. I watch a bunch of them all the time, and I was like, you know what? I'll just go for it, see what happens.
All right, man. Well, I appreciate you, Ming. By the end of this episode, what are people going to learn?
Sure. Um, so I think there's such a problem right now with AI creating generic content and creating generic designs. And I think uh, what you need to learn is how to do it with taste, because ultimately that's that's what makes us human and unique from AI. So, you're going to be learning how to prompt the right way, how to find the right resources to prompt, how to find the right context to give to AI, uh, the right design resources, the right taste, such as, you know, typography, colors, visual hierarchy, all of these things that bring your uh, design to the next level and not just something that is generic.
All right, let's let's get into it. The way that I see it is that right now everyone knows Vzero, everyone knows Lovable. And while I think it's great because we're all unifying around a platform where you can build any product that you want, at the same time you know it's very developer-centric, and most of the like what they don't show you here is 99% of the results are very, very generic, you know, design, visual design, uh, you know, I I can pick anything random, but it's not the most design-oriented result that you're going to find. And you know, I think what I'm trying to bring um, with my videos, but also my platform, which is called Aura, is to make something a little bit more design-oriented. So something that someone who's really good with Figma would be able to go and, you know, prompt something using a prompt builder. So we're going to be able to kind of uh, adapt from existing templates. So we're like having thousands of course.
Yes, Vizero and all those they have templates, but as you can see they have a very different flavor. Um, and most of them are very basic and very generic. Uh, the same with VZ, which is to me VZ is kind of like more for developers, and lovable is more for designers. As you can see it's not the most attractive. You're not going to convince designers who's been, you know, 10 like not 10 but five years into Figma and then move into this and and try to convince stakeholders um, to to have a seat at the table. But it does give you the power to have a startup, to found your company and to make something in a weekend.
Uh, so what I would like to bring is, you know, as someone who is vip coding coding a bunch of products uh, such as aura but also a dream cut, both of them have over 150,000 lines of code, so these are months and months of work, and I think I have a unique perspective, so you know you need to give a lot of context to AI, and you need to give to to sort of train with taste. So what are the designs that you can be using? So you know what are the kinds of layout that you want to be building, and how do you expand your vocabulary in term of you know what layout do you want to bring, like is it a document site or is it an updates page, is it a portfolio, you know, are you building a pricing table um, and also within that you have many flavors of layout such as is it a list, is it a a grid, is it a sidebar or is it a um, a bend to layout, which is quite new and Apple has been using that a lot and everyone is following suit, but you can see there's so many terms that you need to be getting familiar with and how you're setting the separation of the layout such as 1/3 1/4, and then you have to fill the the grid layout, and then you have also the framing which helps so much in term of marketing because marketing, if you think about it, is all about design, it's all about user experience, it's all about what people feel when they see your design, right? It shouldn't feel uh, generic. It it should feel unique, even though you could be spending two hours on it, you could be spending weeks on it or months, but they don't need to know that. They just need to know that you're building something and that you have that special sauce that allows you to to to make it feel unique. So, that's why framing is also another important aspect. That's why a lot of people in Instagram and Twitter they will show not just the design in the full screen mode but also the design in the frame. So they have a browser or they have a card, and they have a lot of bleeding u around the card there. Sometimes they have like a clay, and so yeah, get familiar with all of these, and this prompt builder allows you to to set those things visually, and then you have the styling, you know, uh, you know, is it a flat layout? Is it an outline layout? Is it iOS or material design? You know, is it light mode, dark mode? And then you get into the primary colors. And of course, I can go on forever and ever, but you know, you have typography, which is extremely important. 80% of all designs are text. So, you want to know what are the most important fonts at least, you know, to know enough to be dangerous. So, what are people using the most right now? Well, inter and then guys and then manrobe and then you know what is a serif font, and then we also finish with the animation. So you want to know uh, what kind of animation that you you you can bring into uh your design. So you know also what is very common is sequence animation. So Apple does that a lot. So it doesn't just all fade in. It's just one by one, element by element and sometimes word by word or letter by letter. So all of these things uh, you know, you you you bring it all together and then you add it to a prompt. So let me just select one of the designs here, and then you add it to a prompt and uh, and then yeah, you know this is this is your your entire prompt. It has a ton of context, and if you do this properly uh, yes you can write it as you get more experience you can write it, but if you do it properly you should have some really amazing results compared to just doing from scratch, and there are so many little nuances, little references uh, you should definitely name the websites that you love the most and you know and again it's something that you build over time, it's something that you get better, and the more vocabulary that you have, the better you can direct the AI to do the right things for you. And so you can see instead of having something that is extremely generic as as this for example, you have something that is a lot more um, flavorful but also unique because you brought a lot more nuances to the table. And this is definitely not something that you're going to see. Uh, and and you know, like it's a very specific font. It's a very specific layout for the pricing, for example. You know, and then yeah, you get into the details. You get into the animation. As you can see, it just happened. And I didn't have to put weeks and months of efforts into this. I just needed to set it up in a prompt builder. And there we go. We have the result right in front of us.
Yeah. us. Yeah. So this this is why I wanted to have you on on because the what's happening is a lot of people are listening to this show. Thousands of people are prompting the Vzeros of the world, and they're getting the typical Shad CN templates, and they're they're they're posting it on Instagram and Twitter and stuff like that, and people you know their conversion rates are very low, and one of the reason I believe that the conversion rates are low is because you know the UI and the designs are not resonating with people. And what this is, what's so cool about this is it's almost like training wheels. Um, like it gives you, you know, it's training wheels for design in in a lot of ways. It's saying like, okay, I'm not ready enough to go into VZ as a product manager or someone who doesn't know the terminology. Um, I need a little bit of help acknowledging that I need a little bit of help and some guard rails around what around basically what to prompt it so that I I could prompt it in the best possible way.
Exactly. And uh, funny that you mentioned sat shatzen because it's one of the most common templates that you're going to be uh, looking at most of the time when you're going to prom with vzero. It's very much embedded into the platform. And then lovable, you're going to see something a little bit more like shadows, but it doesn't mean better. I think it's just one everything looks the same. The other one is more like maybe there's too much shadows and maybe there's too many gradients, right? Like you look at something uh, you know, like this one. Someone who's not trained would look at this, it's not too bad. But someone who's more trained looks at this, you you know in the first second that it's not made by someone who knows UI and that's someone who cares, and that's the key word, right? You want someone who cares about the product, and how do you prompt in such a way that you can can communicate the thoughtfulness of the stuff that you're trying to design and in the is as little amount of time possible possible. So you have something that looks like this, right? And again, I'm not putting more prompt effort into something like this versus something like this, yet I can build something that feels much more, you know, like it elicits the emotions that I want people to feel and the carefulness that I want people to feel when they use the product. And so, you know, like understanding all of these states, all of these uh, nuances, the subtleties of the outlines and the drop shadows and getting the right drop shadows versus the wrong drop shadows means so much. So, you know, if you look at all the things that, you know, I'm putting out there, we have thousand like a more than a thousand of them like this one. You're not going to find something like this, you know. you know. on Vzero or not saying that it's impossible but definitely you it's very it's a lot less common, and that's what what I trying to try to bring to the table, and then you also want a post tool like a post design tool that allows you to make the right correction and the least amount of time possible. So right now we have Figma of course, but with Figma first of all they're still super new into the AI world. So you're not going to see people in fact Figma make just launched right uh, but it's an amazing design tool. So what I try to bring is, for example, you can just quickly just change the text like this, and you can quickly change uh, the font, and I I just put like the best font that people can use like this. So, and then I also bring something like image. So, if people want to use Unsplash, which I highly recommend when you're starting out, you don't want to have to scour the internet for like the best images. So, you want to, you know, have the best tags. Again, I put the best tags here. you want to use like render, and then depending on your design, let's say you have a bluish design, you're going to go to the blue color, and then based on relevance, you're going to select something as beautiful as this. Again, adding the uniqueness to the design that you're creating. And again, we're not spending hours doing this. We're just spending seconds and minutes to edit these things and in incre increasing the quality of the output and setting uh, making it um, you know, adaptive. So we have also the code mode. So you have you know the desktop and you can see it in in iPhone it works just amazingly well. And also a feature that there's no no one else does it is something that I want to add. This is all vibe coded by the way. So, we're on the same page here. You know, if you're a VIP coder, you make websites, we're doing the same thing right now. Yet, I'm able to do these things that are amazing and no one no one else is doing it. So, for example, I click on the text, boom, it gives me the text, and now I can just edit from here. So yes, it helps to know code, but the fact that you can just have a tool that is so friendly that you can just can just edit directly the stuff and and within the context of code because we're all using code. I think that's is so incredibly powerful. Um, the last thing you want is to make things unforgiving, right? Code in the traditional sense is very unforgiving. you make one mistake, it's going to give you an error. In fact, you know, in the early stages of um, of visero and and lovable, I don't know if you remember your first project. Half of the time you would spend like with an error, right? Like you have to, you know, put that and prompt that and then sending back and forth. Now it's getting a lot better, but you do still get these errors. And when you do get these errors, you you know, a lot of people actually give up, which is really sad. And uh, you know, I think we've come such a long way, and having a tool that that makes it so easy to both design and code without necessarily the years of experience of both design and code. I think that can be really powerful for a lot of people.
Yeah. And the other thing I want to just say about uh, the powerfulness of it is it also allows you to charge more when you have better design because when you when you see something like this like what you we have on screen it just invokes more confidence. Like I look at it this and I'm like you know what you know I trust Sarah Martinez the product manager you know like she she seems like you know this feels like a V you know an A16Z-backed company you know. Um, and and that's amazing like sometimes you can charge two, three, four, five times more when you have better design.
Absolutely. And also without the technologies that you know all of these competitors have way better than you. So, for example, if I'm competing with Vzero, well, obviously they have millions and they have, you know, it's a company that is worth, you know, hundreds of millions, um, and also lovable and also Figma, but I don't have the infrastructure. It's just me. So, how do I set myself apart? Uh, the last thing you want to do is to to follow exactly what they're doing. That's the last thing you want to do because you're not going to set yourself apart. So the tools that you have in front of you, of course there's marketing. If you have like a huge channel on social media, regardless of how bad your product is, as long as you have the functionality, people will buy it. But the people who don't know you, those are the hardest customers. And those people, they look at the good design and they want to trust it. That's why we go on a on a website like Apple and we're a we're like, take my money, right? Like we're just opening the wallet right away. And that's because we have a design that is so trustworthy. It feels like the people who makes it, they care about pushing the envelope and they they care about, you know, uh, putting something that looks and feels great. So, how do you set yourself apart in this world where you're you're competing with all of these companies that soon uh, if they don't make themselves better with AI will become dinosaurs, which gives you an opportunity to set yourself apart. So you have marketing, you have design, you have you know the functionalities of course and all of these things that you juggle with. You need to spend as little time as possible without necessarily communicating that you don't care about it. I think that's the that's the biggest thing. You can spend as little time as possible but you still can still care as much as you can. And I think that's really really powerful.
Maybe we can leave it uh, at this like what advice do you have for you know the people who listen to the show, it's you know it's called the startup ideas podcast, these are people who are building products, often multiple products, what advice do you have for them in order to increase their likelihood of success, right? So you know I think going back to design when you see a good design, but not just a good design because you can have a good design but that is generic. So right, and this is not saying that chaten is bad.
Yeah. But anything that is a template is bad. Right. And that's and you can absolutely make shaten something unique. But the problem is if you don't push the envelope they're all going to look like this.
Yeah. And it is by design by the way. This is not something that is not intentional. This is all intentional. It's a template. It's a standard. But with any rule and with any template, you need to to figure out a way to make it yours, right? And that's why everyone copies Apple. That that's why everyone buys Apple without a second thought. So my first thing is try to to learn the vocabulary. Try to use as many apps as you can. Try to follow as many people that cares about these things as as much as you can. Try to find the best designs out there either from Instagram, from dribble, from Twitter and you know follow these people, collect these resources, collect your favorite design. Let me try to refresh this. But you you have so many platforms where you can find you know all of these resources that can help you. And now in term of prompting you should absolutely find resources such as 21st dev where you can bring the code and bring that into your project because you know AI is very limited in the amount of context. It's very trained in a certain way by clawed by open AAI, but it's not trained to be unique. It's not the only way it can be unique is if you tell it and if you handhold it and if you give it the resources and then reference to your favorite website and the and the best resources to be unique. So it's not impossible. It's just that you have to take that little extra effort. So you you you know a lot of people you can see like something as you know I wouldn't say dumb but something as small as just like a you know a shining background with a little bit of a gradient moving can add that little oomph to your product or you know very small details when you use OpenAI they have this text gradient as it loads, again small details but you care about it and then you find the code for it and And then you copy the code. You copy all
the code. You you you bring that; you paste that into your project, and then you prompt from there.
And again, we have more resources such as code pen, and and these are not new resources, right? These are all the open-source community that has been around for decades. And so you're following someone as awesome as Jay, for example, who has a lot of amazing JavaScript experiments that he shares online, and then you can look at the code pen, um, you know, understanding the different technologies that get there, such as: is it HTML? CSS? Is it React? Is it, you know, you know, is it iOS? Is it SwiftUI? And all that stuff. So you can absolutely copy the code. You can find libraries of components and buttons and loaders and background animation. And then, you know, again, depending on your level of comfort, this is one of my favorite call React bits. So you can have like particles, you can have like fonts and text animations and blur effects—all of these things that you can bring with just the power of a single prompt, single prompt attaching the uh the library code or whatever component that that you may have.
So absolutely, you know, it's it's not something that you're going to learn overnight. It's something that also it's not even something that you absolutely need right now to know all of these resources. In fact, if you just know one of them, that is enough to get you started on one project, and then the next project you move on to the next component that you always wanted to build or next animation that you wanted to build, and then you bring that special sauce and then the next one. So again, don't feel scared that there's so many things happening at once; just feel like find one thing that really drives you and bring that and make it really good and really unique and uh, you know, take it take your design to the next level, and that's I think if you do that, um, half of the half of the battle will be done, right? Because marketing is a lot about design, and if if you do good design, the product is going to market by itself itself. Yeah, absolutely.
So, I I have a little confession I need to make. So, uh, last night I got a a DM from a a co-founder of a 15 or 20 billion dollar company, and he he was commenting on a new project I launched called ideabrowser.com. And if you go to it, it's ideabrowser.com. Yep. Um, he was like, "I really like the design and and like the subtle details." You're going to probably hate the design because you're a designer, but but the what my confession is there was no designer on this project. Um, I believe this this was used with 21st Dev, which is a resource you talked about; like the, you know, the little details um do matter, like the little like the, you know, for example, the logo is kind of like moving a little bit, and you know, the if you hover over the number one software to spot trends like uh right there like yeah, there's like a little it, you know, things move, and this is the thing that that moves the needles so that you end up getting these DMs of people you look up to and and are like the design is sick, and like I wanted to tell him like there was no designer on this.
I I absolutely agree, and you know, believe it or not, Aura took me probably like a week to build, and that's that's insane because we're competing about against like Vzero and Figma and all that stuff. So you see a lot of features there. Um, but what you know, obviously I started with a Mac app, and that didn't take took take off, right? Uh, that was my first Mac app. I vibe coded this thing to death, and this took me three weeks actually, but then I moved this to a web platform because nobody could install the app, and I had I had some trouble with Mac performance and stuff like that. So I experimented with it. I also built a really big, you know, intro to prompting. And this is actually where my product took off. At the beginning, nobody cared about the Mac app that I did because, you know, I started this project as a voice to chat. Even you can you can even see it from the design, right? Voice. Yes. Voice to text and prompt. That was the first idea. And right away, I just pivoted, right? Like you know, you have to uh you have to anticipate this kind of stuff, like you will start with one project, you will give it a try, and it might not work out, but this it doesn't stop you; just don't give up, keep using it, and be the first customer, solve your own problems; eventually this became, you know, as I created this app, it became an HTML generator, HTML generator.
Right. And I thought it was so good, so powerful that people had, you know, to use it, and I use it myself. In fact, I created like 400 designs from from from this. You can see at my profile, I have so many designs that I created. Um, and you know, it requires someone who has so much curiosity. So when I when I built this, it took me three weeks, the the Mac app, and then eventually I was like, okay, I still need a website. That's where people are going to buy this thing. I still need a pricing page and all that stuff, a download page, and and then I need a learn page, and I also need to let people uh share their creations. So, I built all of this stuff while I was building the Mac app. And eventually, I took one week, one single week, and I brought all the features that I built from the Mac app into the web app. And here we are. This is what we have.
Sure. In the in the two weeks later, this is where I came up with the um the first week, I had already the prompt builder. I already had uh the the generation stuff, you know, to be able to generate, and also I already had like the live the live preview as you generate. So, nobody else has that, by the way. Uh, when you're generating, it's going to live preview everything you're doing. You don't have to wait like five minutes for something to show up. But I didn't have like design. I didn't have code yet. So, this this was the second week, and this was like thirdish week. But I was I was building it, and I was I was adding a lot of features to it. And now in a matter of 3 weeks, right, we have something that is extremely functional. In fact, we already we're doing 500 users a day right now. 500 users are signing up to this platform every single day. And we're, you know, we just started obviously, uh, but we're making something like 3,000 MR at the moment, and we're we're growing um a lot as you can see like, you know, just just by the number of users, and I have I have done zero promotion. I have done like zero uh ads or AdWords. Yes, I do have an associate channel. Yes.
Um, you know, one of the the big things as I mentioned before is that you're I'm I'm someone who teaches for a living, and I have design code, which is a platform that teaches design and code. But it wasn't design code that brought the users. It was this this typography prompting or tips of prompting. And this video that I created on YouTube which got like 9.5 9,200 likes on Twitter and already 50,000 views on YouTube. Um, but most importantly, it's not just the views; it's is how many people respond to it, is how many people give you feedback. And that's how you build a product, right? You know, you you will fail at first. You will pivot within a week. You will add new things on top. You will be the first customer of it. You will solve your own problems, and eventually you have something that might seem something that is worth spending 40 hours a week on. 100%.
This is a great place to end. I I mean, I'm not affiliated with this at all. You know, the reason I wanted to bring you on was because I like to give unfair advantages to people who listen to the show. And to me, great design is an unfair advantage. And Aura And Aura is like a hack, right? It's basically a hack to get beautiful design for people who are not designers. So, you know, you're going to get you're about to get way more than 500 users because, you know, a day cuz a lot of people are going to listen to this. I encourage people to sign up. Um, check it out. I'll include the links uh in the link in the show notes uh for people to click. I'm also going to include Mang's uh social uh for for on his different platforms so you can follow him there.
Mang, is there anything else uh you know before we head off? You want to say?
Oh yeah. So again, thank you so much Greg for having me. Uh, it's great for those who don't know Greg and I goes back way back like 15 years ago. I was you know doing freelancing, and I met Greg in Montreal. We both moved out of Montreal. So now I'm in Singapore. Greg is in Miami, I believe.
That's right. And uh, you know, next thing you know, we're both creating startups. So that's that's amazing. And it's quite quite a coincidence. But back to you know, uh design itself. Like I said, you know, please try please try to don't don't give up on the first prompt. Try to use the the the prom builder. It doesn't matter if it's from Visero or not. You can even use the prom v uh the promp builder from my site and just learn about all of this and then go to your favorite platform, Lovable. I don't really care if you you're using Aura or not. But I do want to give you the advice that you should not just depend on like creating a beautiful card. Of course, you know, it's all going to look the same, or a beautiful site, right? What you want to do is, you know, use a prompt builder, learn about the prompting tips, do the remix—super super important. There's so many ways to do a remix. So, for example, you can uh click on a design that you like, you remix it, and then you adapt it. So, you adapt to like a a front page, you adapt it to a pricing page. And then you also want to, you know, to attach an image. So, image to HTML is very, very powerful. In fact, I do use DALL-E 3, which is one of the best uh models for taking an image, a screenshot of of your favorite website or your your own design in Figma and then turn that to HTML and then bring that to Lovable to Vzero or to Aura, whichever you want. So, there's so many ways to prompt, not just typing. You can import from Figma. You can attach an image. You can attach an HTML file. You can remix an existing project. And all of these designs that you see here, they're free. You can go here and you can download for free. So you can copy the code, save the HTML file, and bring that to your favorite platform. So that's just, you know, FYI, I think it's going to be really useful to a lot of people. And uh, you know, if if you have a chance to to try Aura, that would be my pleasure. And if you have any question, please let me know. And again, thank you so much uh to Greg for inviting me, and I hope to see you soon.
Thank you for the sauce. I appreciate it. Now everyone knows how to prompt for UI. So, thank you, Ming. And uh hope to see you around soon.
All right. Thanks so much.