Vercel's VP of Product on how to use v0 to build your own ideas (Step-by-Step Guide)

0:00super excited to have Lee here Lee is the VP product of versel everyone who listens to the startup ideas podcast you know what versel is you know a lot of the products that they come up with today I wanted to talk to him about uh really just how do you get the most out of vzer and uh he's been kind enough to be like yeah I'll tell you how to get the most out of vzer so thanks for coming on Le yeah thank you for having me I've been watching a few of the recent episodes and uh I'm in good company so let's to be fun absolutely you're you're

0:31one of us you're an IDE you're an idea person so hey ideas guys we're we're the future now right we're the new Builders finally [Music] finally cool so where do you want to start um maybe just set a little bit of context um for folks who are tuning in and maybe they've heard of Rell but they haven't heard of VZ let's quickly talk about that and then we can do a demo get into how to use it and all that other stuff so VZ is a product that we've been building at for sale you can kind of think about it like your AI assistant specifically for web development you

1:13know there's I think in the future there's going to be tons of hyp specific AI tools for everything that you need to do and the part that we're really focused on you know selfishly for our own needs we want to use it to build our own things is the web it's working with JavaScript it's working with HTML uh CSS all these new Frameworks all these new tools and libraries that the Frameworks integrate with we're trying to make it just as easy as possible to get high quality stuff out of that and ultimately high quality products because at the end of the day this is all just ones and

1:45zeros for the products we're trying to build and you know ultimately make money from so that's really what we're doing with vzer and um yeah I'd love to walk through some of the things I've built with it talk a little bit about how I think about getting the most out of it and and you know maybe pick up some tips and tricks along the way that sounds perfect yeah I've done some vzer videos but to be honest it's been just trying my best to get the most out of it um so it'll be really interesting to to hear it from you um because you just you know

2:19coming from for sell coming from bzero um you have a more intimate relationship with the product and and I I've learned that I I just interviewed omj the COO repet and him showing repet I was like that was really cool cuz I saw repet in a completely new way MH but I need to see vzero in a completely new way so thank let's uh yeah if you want to share your screen we can get into it yeah let me do that I'll share my I pulled up some vzer um chats that I have and I'll walk through a couple of them with varying degrees of uh UI completeness

2:57the first thing I will say is like you can of of course use vzer to make great uis but you can also do it to do backend work and you'll see as I kind of dig into this more I'm not just making it look nice I'm also starting to add interactivity so my first tip which is probably obvious but starting with screenshots is actually super helpful so I wanted to build something similar to Spotify but way more information dense just a nicer looking UI and some of this is you know your own opinion your own taste and what you think the thing should look like so I had an opinion

3:33going in there's kind of kind of two different creative modes to go in for me it's like one I have an opinion two I don't really know just let the AI paint things for me and then I'll kind of see what I'm working with just to kind of quickly pop over to this one I didn't really know what I wanted build a page where I can post a link hit a button and it'll send it to slack like I wanted to build this little thing that integrated with zapier I didn't really know what I wanted the U UI to look like I didn't really know what I wanted the code to

4:02look like I just said this is kind of a thing I want to do just build it and let me get back to what I was trying to do and it gave me this it was basically a oneshot it gave me this component I was like cool I took it um you know put it into my app put it into my code base and was kind of done with it um but going back to here I was more so I had an idea about this music player I wanted to kind of iterate on it so started with a screenshot and it tells me a little bit

4:29more about what it's doing the first version I'm on V12 here first version was not that great it was okay like it's got the shape of what I needed to do but it's not um it doesn't have the design sense that I wanted when I got to of course this V12 version that's quite a bit better um so if I scroll down here you can see some of the things that I actually asked it make it have warmer Grays use a Sanda font um and if you say from Google front from Google fonts with next font uh it knows exactly how to import that it might figure it out automatically but I

5:09just do that intentionally make the UI have a tighter information density so it's like okay I'll update some of these things I'll change some of the colors then I said oh the time playing bar should be longer the search input should have an actual input in it add more realistic fake data for the songs so now let's see we're already like decently closer to what I wanted like I'm looking at these rows and they're still not really as tight as I wanted this thing on the right is kind of confusing but it's okay so I keep going I say less vertical spacing between the rows each

5:46row should have the album art to the left of it um make the default value of the search input electric the playlist name should be aligned with playlist make the image it the album image Art smaller and you'll notice one tip here that I start doing is VZ thinks in Tailwind so if you've ever used Tailwind CSS before you can just tell it kind of explicitly the Tailwind class that you're looking for versus letting it you know try to figure out figure it out on its own so I said make it size four just make it that exact value um so now it's it's looking a little bit better and some of this I'm

6:25I'm getting its ideas on what it thinks the UI should look like and it wanted to put the artist name underneath the song name but I didn't really like that so I'm like let's put the artist names in a column versus Under the title um use this as a placeholder image for all of the albums use electronic music for all of the placeholder data so you can upload and paste in images and then it can use images or other files in the actual designs shh don't tell anyone but I've got 30 plus startup ideas that could would make you millions and I'm giving them away for free these aren't

7:05just random guesses they're validated Concepts from entrepreneurs who built hundred million plus businesses I've compil them into one simple database compiled from hundreds of conversations I've had on my podcast but the main thing is most of these ideas don't need a single investment some cost nothing to start I'm pretty much handing you a cheat sheet the idea bank is your startup shortcut just click below to get access your next cash flowing business is waiting for you so now like it once you start adding images you can really start making things look a lot better and you realize how much of web design is just topography and imagery so that's

7:58also huge huge piece of making it look nicer uh make the playing track a little less wide you notice I'm not I'm using just kind of normal language like talking to it how I would talk to my designer like hm that now playing bar is pretty wide like I would probably make that less don't make sure that the the lines don't break into two lines um make the width of the column smaller and then again this is where if you have some pre-existing web design CSS knowledge you can really steer the assistant in the right direction like I already know there's this CSS property called tabular

8:36nums which is going to make sure that all of the numbers are vertically aligned um so I said please use that um and that helps me get to something that I think is looking pretty good this one's fun make the table mobile responsive so I was here and I think what I was looking at was I went like this and of course not responsive so so I just said make it responsive and uh I think it did a pretty decent job of like something but it wasn't really great yet so I said I can't see the table of songs because the image is so large can you fix

9:15it and now now we're talking so now it's like something that's a little bit better you notice there's this air like I think it was struggling to import this scroll item thing but I can probably fix that later but now we're at a point where like it's mobile responsive it's a little bit better and I got this is pretty much all of here I ended up forking it which I can do in the top right and I started going a little bit further I said let's break this out into components and let's start trying to add some logic to it so I took it from here

9:47and I think I also said let's make the colors a bit darker I liked this version but I wanted to experiment and see what darker uh Grays would look like and I think I liked this a bit better so I just kept going kept going in here adjust the color scheme to be darker than the original but not full black uh and so on and so forth so I'll pause here in case you have questions on on this one so some people listening to this like some are Engineers who might not be great designers some are founders who maybe not be great designers and I've noticed that you have the touch

10:25around steering vzer in the right way like you have a a foundation it sounds like of saying the right words or understanding is this you know what's the difference between a sarant and a sanant my question to you is before you even touch vzer is it required to kind of learn a little bit about how web design works and if so like what what sort of advice do you give to folks yeah I think if you have pre-existing knowledge of some of these things you'll be able to fly faster but it is not a requirement and I think as with most like development learning categories sometimes you just

11:13don't know the right questions to ask and I think one thing that any of these AI assistants can be very powerful at is helping give you some questions to ask so you might ask vzer I am a novice at design I don't really know how to make my design look better but it's just lacking something like what do I have to do to make it look a little bit better and we could even just go in and I don't know let's see what it says like I'm uh I'm a novice at web design I don't know what I'm doing what can I try to make things look

11:53a little better any common practices or patterns PS and I'm really curious to see what it says and I can kind of gut check that with my understanding of web design which I'm not a designer but I have some opinions on The Taste we'll see what this says um consistent color scheme stick to two to three main colors yep that's one of the things that vzer is going to do by default is use Tailwind which inherently uses a design system it has a grid of colors that are going to allow you to kind of stick to some of those best practices uh and Implement white space padding in margins

12:31give the elements room to breathe sure readable fonts use sansera fonts for better readability so maybe I would say what is a sansera font and what are the differences I again get that cued as a followup some of the other things in here are what consistent um the layout is aligned and organized it's responsive includes images it's focused on essential information and some of that stuff's good what other things in here use high quality images I mean that's an obvious thing but it actually makes a huge difference um you realize just so much of the web if you go look at like Apple's websites the majority of it is

13:12really high quality photography so Sans serap fonts you have also sarap fonts and this is kind of a cool cool visualization of the different letters I like to think of the Sarah font as like reading an old timey book cool yeah so I think you know what you're saying is sometimes in order to go fast you need to go slow you know you you have to like you can ask some of these questions learn and then sort of go back and and just develop taste through the process of learning um you know it's Pro the reality is it's probably going to be better to learn I

13:53mean I do think that like it's helpful to you know follow interesting people on Twitter you know designers on Twitter and you know get a book here and there on this stuff but I think that you know prompting vzer as a as a way to learn especially while you're in the product seems Seems like it makes sense okay

14:15what's this yeah check out um godly. website I know there's a bunch of sites like this but it's basically design inspo so you can go in here and filter by startups and just get a bunch of really beautiful looking websites you know click in evervolt which is a super awesome website definitely check them out just got some cool stuff you can see other similar things I look through here all the time just to get inspiration and again because you can start with screenshots you can start with these not with the intention to copy any of these designs but to at least get some of the bones right like sometimes you don't

14:54even know how to get the right layout or the right elements like you don't know how to think in give me a three column grid that has two like that's not the language you're familiar with but you are familiar with I don't know let's go to like pricing pages is there a pricing page on here pricing no um let's see there's another one I use also patterns have you heard of that one oh yeah yeah that that's a great one like uh let's see like this one's pretty cool this might be a pattern that you want but you didn't really know how to put it into

15:38words and you might be able to build something like this like large section at the top and then a five column grid below it with scrollable areas that makes sense totally yeah um start up idea by the way someone needs to do Godly website but with like here's the here's like potential prompts that you can do for zero um I think that would be really really valuable yeah I mean one thing just to build off that um VZ is built on top of this system called Shad CN UI that allows you to build your own component library and the idea with VZ is you should be able to take the code

16:21that it generates and it's not throwaway code we're trying to give you real react components that use the same technology you would build for your production website anyway so you don't have to re architect the whole thing later and what Shad CN UI does is it gives you kind of some of these UI patterns like this is a real component for a mail app a dashboard app cards tasks uh AI model playground chat forms music player you can take this and basically Fork it and put it in vzer and get started building something from here and then when you want to make it look unique you can

16:58customize the you can change the colors the spacing and now you have something that kind of looks like your brand this is all the foundation in which vzer is built on and it speaks this same language so you can even say like give me a component for the um date picker for example and it's going to know about this this widget I like it maybe um another one that's interesting to show um VZ has the concept of projects so I have a project for a music player where I've asked some follow-up questions to it um another one that I started building was this kind of SAS landing page I'm trying to see which

17:40one was the first one I started with I think maybe it was this one I forked I started with the pricing page and then I ended up forking the colors and the font and the general Vibe for the landing page I was like let's make the homepage version of this keep the same navbar but we want to give it some this like SAS template so let's highlight some things let's make a CTA that says deploy your own um and I think I'll just see what we got on this first version this looked pretty basic so I said let's not use cards let's make it very minimal no white backgrounds we

18:19kind of want to go vertically and use maybe a list of it items so that's a little bit better I said I just said try a different style like I don't really like it just try something else and then it gave me this and I was like okay I think we're a little bit closer um instead of an image in the hero do an animated terminal with this sequence of events for the bottom CTA make it on the right hand side a CTA that's bigger set of images I'm like okay and now we have this terminal but it's kind of slow on the animation I'm like okay so use a mono font monospace

19:02that's another type of font that again if you're not sure you can just learn more about it um make it animate faster make a copy to a clipboard button um add another step in the terminal this is closer sometimes I talk to it like I'm talking to a pair programmer it's closer but uh for the middle section make it a white background and it needs to take up the full width uh and that's kind of where I landed here um which is pretty decent this is still the actual landing page that I used for this SAS template that I had and once I got here um I wanted to Fork this for

19:39other pages in my project and I ended up building the kind of logged in dashboard view I said let's make a general page where you can manage your subscription in a card and then update the user info like the name and email make the general tab have an active background State and it gives me something that looks like the basic crud create read update delete actions you would take in kind of an admin portal for your SAS app and the cool thing is not only is it giving me this UI for styling it I then went from here and asked it to actually Implement these things so this activity log I

20:15can't remember if I did it in here said uh let's make it look more like a settings page make the notifications page say Activity um which by the way make it more like a settings page if you don't like one thing I've learned is if you don't know if you or even if you forget what a settings page looks like go to your favorite apps check what their setting Pages look like and either screenshot the them or just tell vzero hey it doesn't feel normal right and like looking at the code for what it gave me here on the first one it it it kind of embedded this mock or fake

20:55data for the activity logs and the nice thing is then I put this into my app I can then basically Swap this out with an API call so I could either ask it I can give it an external API and it can fetch it for me inside of VZ or I can say here's the schema for my database I can add it as a source in my application or in my project so it knows about it give it some guidelines and it'll know exactly how to hook this up to real data uh as well and sometimes if I haven't got to that point yet I said hey help me

21:25take this postgress schema that I have and give me the OM for it so whether I'm using drizzle or Prisma if you're in the JavaScript typescript land or if you're in you know rails or laravel or like other languages you can ask questions about how to get the you know the relevant code based on your database structure you might not even know what the SQL code looks like you can just say I need a table for users and emails and the users and emails are probably related in some way and it can help you design the backend for your application as well yeah I feel like not enough

22:01people talk about that it's it's really underrated for me because this this is the next step after this right like you get this and you say okay now I need to actually make it an app so help me think through the back end of it help me think through how I structure my schema little things too like quick ad break let me tell you about a business I invested in it's called boring marketing.com so a few years ago I met this group of people that were some of the best SEO experts in the world they were behind getting some of the biggest companies found on Google and the secret sauce is

22:42they've got a set of technology and AI that could help you outrank your competition so for my own businesses I wanted that I didn't want to have to rely on Mark Zuckerberg I didn't want to depend on ads to drive customers to my businesses I wanted to rank high in Google that's why I like SEO and that's why I use boring marketing.com and that's why I invested in it they're so confident in their approach that they offer a 30-day Sprint with 100% money back guarantee who does that nowadays so check it out highly recommend boring marketing.com help me design it in a way that it's really fast and it's probably

23:20going to suggest something like you might consider using indexes on your database so that for common actions it's going to be faster to query those things and it will give you the you know the proper om schema for your application that's going to have some of those things um let's see if there's other ones in here um here's here's another one that I worked on that could be interesting um again started with an image I said use a monospace font uh make it tight information density wise I guess that's a common pattern for me use neutral Grays um and I went through 22 different versions here so the first

24:00version was way different oh actually I remember now I started from an older version that I built which looked like apple mail and eventually after I got this back because I was like maybe I'll build Apple mail but it will be all monospace it's going to look like some kind of cool you know hacker email client and I was like nah like let's make it look like superhuman instead because superhuman is just a beautifully designed uh email app so I sent in a screenshot of that and the first version he gave back was actually super good I saw this and I was like holy this is very close to what I was wanting and

24:42I was basically from here I realized there was actually something here that I could build so this seeing this was what actually got me excited to make this into a real app so I asked a bunch of things here like make action items hover on selection um ended up you know going through a bunch of different variations here which we can walk through all of these if you want um things like can we make the sheet open up faster and make it have a better easing animation so if you don't know anything about animations again you could ask how why does this animation feel slow and it's

25:19going to tell you well the way it's doing this is through Tailwind animations so we can override it and give it we can make it a faster duration and we can use this uh cubic bezier easing function I would have never figured this out like I would have never went in here and customized my cubic bezier function but vzer knows how to do that which is nice totally yeah Le you're not you're not that type of guy no I am not I'm not the uh design expert but I like to think that I have an opinion and taste about what a good product looks like and in today's day

25:52and age with these tools like in a lot of ways that can be an extremely extremely value quality because I kind of know what I want to build and I just need somebody to help me get there and when I reflect back on when I learned how to program and I was furiously Googling and stack overflowing things like if I had tools like this that would help me build whatever I could think of man that would be wonderful so I'm just so excited for people who are building products right now it's never been a better time I think this is a good place to end but

26:25what's what's something you want to leave people with you know is there is there one thing that you know this is this is an audience of Builders right they've got ideas they're building they're playing with these tools uh they want to they want to produce the best possible prototypes and products they possibly can uh one thing you want to leave them with I think there's a lot of discourse right now around whether AI tools are helpful or harmful for the development ecosystem right because I think a lot of people see this as is this replacing work that I would be doing and maybe they're apprehensive of

27:00actually learning and using some of these tools and my kind of plea to everyone is just suspend disbelief a little bit and whether it's V zero or any other AI tool just give it a shot and see what it feels like because you might rethink your relationship with how you build applications and realize these are definitely not replacing anything that we're doing they're augmenting it in a way that is like I had that knowledgeable super senior engineer next to me that I could ask questions whenever I had issues and would help give me kind of some of these best practices along the way to build better

27:38products and once you get that mindset you realize right now more than any other time in history there's you can build whatever you want you have all of the power now with these tools you can say I want to build an IOS app and you know GPT or any of these other tools can help you build anything they knows everything about Swift it knows everything about cotlin and Android so um definitely give it a shot um give these new AI tools a shot and I think you might find it pretty interesting I love it Lee where could uh people get to know you better because I

28:11feel like you're underrated you are you were criminally underrated actually I'm gonna say that well thank you and yeah where could people find out more about you and and and and you know where where do people play with vzer totally uh vz. deev if you want to try this out there's a free tier uh for me ler.com I make YouTube videos I write sometimes I tweet a lot so go check out my Twitter if you want to see a stream of Consciousness and uh yeah that's me beautiful and if you're listening to this like and comment for Lee uh I'd love to have him back I feel like uh we've got a lot to

28:49learn so um let's uh let's give him a warm startup ideas podcast welcome and uh I'll see you around Lee yeah thanks for having me on of course Peace [Music]