Maximizing Development with Vercel's vZero

Super excited to have Lee here. Lee is the VP product of Vercel. Everyone who listens to the Startup Ideas podcast, you know what Vercel is. You know a lot of the products that they come out with. Today, I wanted to talk to him about really just how do you get the most out of V0? And he's been kind enough to be like, yeah, I'll tell you how to get the most out of V0. So thanks for coming on, Lee. Yeah, thank you for having me. I've been watching a few of the recent episodes and I'm in good company. So this should be fun. Absolutely. You're one of us. You're an idea person. So hey, ideas, guys, we're the future now, right? We're the new builders. Finally, finally. Cool. So where do you want to start? Maybe just set a little bit of context for folks who are tuning in and maybe they've heard of Vercel, but they haven't heard of. v0. 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 v0 is a product that we've been building at Vercel. You can kind of think about it like your AI assistant specifically for web development. You know, there's, I think in the future, there's going to be tons of hyper-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, 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 zeros for the products we're trying to build and ultimately make money from. So that's really what we're doing with vZero. And yeah, I'd love to walk through some of the things I've built with it, talk a little bit about how I think think about getting the most out of it and maybe pick up some tips and tricks along the way. That sounds perfect. Yeah, I've done some VZero videos, but to be honest, it's been just trying my best to get the most out of it. So it'll be really interesting to hear it from you because you just, you know, coming from Vercel, coming from VZero, you have a more intimate relationship with the product. and I've learned that. I just interviewed Amjad, the CEO of Replit and him showing Replit. I was like, that was really cool because I saw Replit in a completely new way. But I need to see vZero in a completely new way. So thank, let's, 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 vZero chats that I have and I'll walk through a couple of them with varying degrees of. UI completeness. The first thing I will say is like, you can of course use vZero 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 going 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 UI to look like. I didn't really know what I wanted the code to look 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 one shot. It gave me this component. I was like, cool. I took it, you know, put it into my app, put it into my code base and was kind of done with it. 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 I started with a screenshot and it tells me a little bit more 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 nice sans-serif font. And if you say from Google font, from Google fonts with Next Font, it knows exactly how to import that. It might figure it out automatically, but I just 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 row should have the album art to the left of it. Make the default value of the search input electric. The playlist name should be aligned with playlist. Make the image. Is the album image art smaller? And you'll notice one tip here that I start doing is V zero 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, I'm getting its ideas and 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. 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 make you millions. And I'm giving them away for free. These aren't just random guesses. They're validated concepts from entrepreneurs who've built $100 million plus businesses. I've compiled 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 investor. 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, 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 also a huge, huge piece of making it look nicer. Make the playing track a little less wide. You'll notice I'm not, I'm using just kind of normal language, like talking to it, how I would talk to my designer, like, Hmm, that now playing bar is pretty wide. Like I would probably make that less. Don't make sure that the lines don't break into two lines. 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 nums, which is going to make sure that all of the numbers are vertically aligned. So I said, please use that. 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 I just said, make it responsive. And, uh, I think 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 it? And now, now we're talking. So now it's like something that's a little bit better. You'll notice there's this error. 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. And 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 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, and so on and so forth. So I'll pause here in case you have questions on this one. So some people listening to this, some are engineers who might not be great designers. Some are founders who may not be great designers. And I've noticed that you... have the touch around steering vZero in the right way. You have a foundation, it sounds like, of saying the right words or understanding what's the difference between a serif font and a sans serif font. My question to you is, before you even touch vZero, is it required to learn a little bit about how web design works? And if so, 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 development learning categories, sometimes you just don'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 vZero, 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 a novice at web design. I don't know what I'm doing. What can I try to make things look a little better? Any common practices or patterns? And I'm really curious to see what it says. 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. Consistent color scheme. Stick to two or three main colors. Yep. That's one of the things that. V zero 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. Implement white space, padding and margins. Give the elements room to breathe. Sure. Readable fonts. Use sans serif fonts for better readability. So maybe I would say, what is a sans serif font and what are the differences? I'm going to get that queued. as a follow-up. Some of the other things in here, 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 really high quality photography. So San Sera fonts, you have. also serif fonts. And this is kind of a cool, cool visualization of the different letters. I like to think of the serif 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. The reality is it's probably going to be better to learn. I do think that it's helpful to follow interesting people on Twitter, designers on Twitter, and get a book here and there on this stuff. But I think that prompting vZero as a way to learn, especially while you're in the product, seems like it makes sense. Okay, what's this? Yeah, check out 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 Evervault, 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. 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 even 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. Let's see. There's another one I use also. Patterns. Have you heard of that one? Oh, yeah. Yeah. That's a great one. Like, 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 words. 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, if that makes sense. Totally, yeah. Startup idea, by the way, someone needs to do godly website, but with like, here's like potential prompts that you can do for the hero. I think that would be really, really valuable. Yeah, I mean, one thing just to build off that, vZero is built on top of this system called Shad CNUI that allows you to build your own component library. And the idea with vZero is you should be able to take the code that 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 CNUI 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, AI model, playground chat, forms, music player. You can take this and basically fork it and put it in V0 and get started building something from here. And then when you want to make it look unique, you can customize the themes, 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 V0 is built on. And it speaks this same language. So you can even say like, give me a component for the date picker, for example. And it's going to know about this widget. I like it. Maybe another one that's interesting to show. V0 has the concept of projects. So I have a project for a music player where... I've asked some follow-up questions to it. Another one that I started building was this kind of SaaS landing page. I'm trying to see which one 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 nav bar, but we want to give it some, this like SaaS template. So let's highlight some things. Let's make a CTA that says deploy your own. 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 kind of want to go vertically and use maybe a list of items. So that's a little bit better. 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. 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. That's another type of font that again, if you're not sure, you can just learn more about it. Make it animate faster, make a copy, use a clipboard button, 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 for the middle section, make it a white background and it needs to take up the full width. And that's... kind of where I landed here, which is pretty decent. This is still the actual landing page that I used for this SaaS template that I had. And once I got here, I wanted to fork this for other 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 SaaS 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 can't remember if I did it. in here said, let's make it look more like a settings page. Make the notifications page say activity. Which, by the way, make it more like a settings page. One thing I've learned is if you don't know, 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 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 kind of embedded this mock or fake data 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 vZero. 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 as well. And sometimes if I haven't got to that point yet, I said, hey, help me take this Postgres schema that I have and give me the ORM for it. So whether I'm using Drizzle or Prisma, if you're in the JavaScript TypeScript land, or if you're in Rails or Laravel or other languages, you can ask questions about how to get the... 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 people talk about that. It's really underrated for me because this is the next step after this, right? You get this and you say, okay. 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 boringmarketing.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 they'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 boringmarketing.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 boringmarketing.com. Help me design it in a way that it's really fast. And it's probably going 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 ORM schema for your application that's going to have some of those things. Let's see if there's other ones in here. Here's another one that I worked on that could be interesting. Again, started with an image. I said, use a monospace font, make it tight information density wise. I guess that's a common pattern for me. Use neutral grays. And I went through 22 different versions here. So the first version 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 Super Human instead, because Super Human is just a beautifully designed email app. So I sent a screenshot of that. And the first version he gave back was actually super good. I saw this and I was like, holy shit, this is very close to what I was wanting. And I 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, and ended up, you know, going through a bunch of different variations here, which we can walk through all of these if you want. And 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 going 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 cubic Bezier easing function. I would have never figured this out. I would have never went in here and customized my cubic Bezier function, but V0 knows how to do that, which is nice. Totally. Yeah. Lee, 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 and age with these tools, like in a lot of ways that can be an extremely, extremely valuable 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 what's something you want to leave people with? Is there one thing that, this is an audience of builders, right? They've got ideas, they're building, they're playing with these tools. They want to produce the best possible prototypes and products they possibly can. 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 actually 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 vZero 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 extremely 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 products. Once you get that mindset, you realize right now, more than any other time in history, 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 GPT or any of these other tools can help you build anything. They know everything about Swift. They know everything about Kotlin and Android. So definitely give it a shot. Give these new AI tools a shot. And I think you might find it pretty interesting. I love it. Lee, where could people get to know you better? Because I feel like you're underrated. You are criminally underrated, actually. I'm going to say that. Well, thank you. And yeah, where could people find out more about you? And where do people play with vZero? Totally. vZero.dev, if you want to try this out, there's a free tier. For me, leerob.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 yeah, that's me. Beautiful. And if you're listening to this, like and comment for Lee. I'd love to have him back. I feel like we've got a lot to learn. So let's give him a warm Startup Ideas podcast welcome. And I'll see you around, Lee. Yeah, thanks for having me on. Of course. Peace.

Super excited to have Lee here. Lee is the VP product of Vercel. Everyone who listens to the Startup Ideas podcast, you know what Vercel is.

You know a lot of the products that they come out with. Today, I wanted to talk to him about really just how do you get the most out of V0? And he's been kind enough to be like, yeah, I'll tell you how to get the most out of V0. So thanks for coming on, Lee.

Yeah, thank you for having me. I've been watching a few of the recent episodes and I'm in good company. So this should be fun.

Absolutely. You're one of us. You're an idea person.

So hey, ideas, guys, we're the future now, right? We're the new builders. Finally, finally.

Cool. So where do you want to start? Maybe just set a little bit of context for folks who are tuning in and maybe they've heard of Vercel, but they haven't heard of.

v0. 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 v0 is a product that we've been building at Vercel. You can kind of think about it like your AI assistant specifically for web development.

You know, there's, I think in the future, there's going to be tons of hyper-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, 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 zeros for the products we're trying to build and ultimately make money from. So that's really what we're doing with vZero.

And yeah, I'd love to walk through some of the things I've built with it, talk a little bit about how I think think about getting the most out of it and maybe pick up some tips and tricks along the way. That sounds perfect. Yeah, I've done some VZero videos, but to be honest, it's been just trying my best to get the most out of it.

So it'll be really interesting to hear it from you because you just, you know, coming from Vercel, coming from VZero, you have a more intimate relationship with the product. and I've learned that. I just interviewed Amjad, the CEO of Replit and him showing Replit.

I was like, that was really cool because I saw Replit in a completely new way. But I need to see vZero in a completely new way. So thank, let's, 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 vZero chats that I have and I'll walk through a couple of them with varying degrees of. UI completeness. The first thing I will say is like, you can of course use vZero 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 going 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 UI to look like. I didn't really know what I wanted the code to look 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 one shot.

It gave me this component. I was like, cool. I took it, you know, put it into my app, put it into my code base and was kind of done with it. 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 I started with a screenshot and it tells me a little bit more 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 nice sans-serif font.

And if you say from Google font, from Google fonts with Next Font, it knows exactly how to import that. It might figure it out automatically, but I just 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 row should have the album art to the left of it. Make the default value of the search input electric. The playlist name should be aligned with playlist.

Make the image. Is the album image art smaller? And you'll notice one tip here that I start doing is V zero 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, I'm getting its ideas and 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.

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 make you millions. And I'm giving them away for free. These aren't just random guesses.

They're validated concepts from entrepreneurs who've built $100 million plus businesses. I've compiled 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 investor. 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, 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 also a huge, huge piece of making it look nicer.

Make the playing track a little less wide. You'll notice I'm not, I'm using just kind of normal language, like talking to it, how I would talk to my designer, like, Hmm, that now playing bar is pretty wide. Like I would probably make that less. Don't make sure that the lines don't break into two lines.

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 nums, which is going to make sure that all of the numbers are vertically aligned.

So I said, please use that. 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 I just said, make it responsive. And, uh, I think 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 it? And now, now we're talking.

So now it's like something that's a little bit better. You'll notice there's this error. 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. And 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 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, and so on and so forth. So I'll pause here in case you have questions on this one.

So some people listening to this, some are engineers who might not be great designers. Some are founders who may not be great designers. And I've noticed that you...

have the touch around steering vZero in the right way. You have a foundation, it sounds like, of saying the right words or understanding what's the difference between a serif font and a sans serif font. My question to you is, before you even touch vZero, is it required to learn a little bit about how web design works?

And if so, 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 development learning categories, sometimes you just don'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 vZero, 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 a novice at web design. I don't know what I'm doing.

What can I try to make things look a little better? Any common practices or patterns? And I'm really curious to see what it says. 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.

Consistent color scheme. Stick to two or three main colors. Yep.

That's one of the things that. V zero 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.

Implement white space, padding and margins. Give the elements room to breathe. Sure. Readable fonts.

Use sans serif fonts for better readability. So maybe I would say, what is a sans serif font and what are the differences? I'm going to get that queued.

as a follow-up. Some of the other things in here, 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 really high quality photography.

So San Sera fonts, you have. also serif fonts. And this is kind of a cool, cool visualization of the different letters.

I like to think of the serif 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. The reality is it's probably going to be better to learn.

I do think that it's helpful to follow interesting people on Twitter, designers on Twitter, and get a book here and there on this stuff. But I think that prompting vZero as a way to learn, especially while you're in the product, seems like it makes sense. Okay, what's this? Yeah, check out 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 Evervault, 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. 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 even 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. Let's see. There's another one I use also. Patterns.

Have you heard of that one? Oh, yeah. Yeah.

That's a great one. Like, 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 words.

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, if that makes sense. Totally, yeah. Startup idea, by the way, someone needs to do godly website, but with like, here's like potential prompts that you can do for the hero. I think that would be really, really valuable.

Yeah, I mean, one thing just to build off that, vZero is built on top of this system called Shad CNUI that allows you to build your own component library. And the idea with vZero is you should be able to take the code that 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 CNUI 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, AI model, playground chat, forms, music player. You can take this and basically fork it and put it in V0 and get started building something from here. And then when you want to make it look unique, you can customize the themes, 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 V0 is built on. And it speaks this same language.

So you can even say like, give me a component for the date picker, for example. And it's going to know about this widget. I like it.

Maybe another one that's interesting to show. V0 has the concept of projects. So I have a project for a music player where...

I've asked some follow-up questions to it. Another one that I started building was this kind of SaaS landing page. I'm trying to see which one 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 nav bar, but we want to give it some, this like SaaS template. So let's highlight some things.

Let's make a CTA that says deploy your own. 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 kind of want to go vertically and use maybe a list of items.

So that's a little bit better. 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.

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.

That's another type of font that again, if you're not sure, you can just learn more about it. Make it animate faster, make a copy, use a clipboard button, 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 for the middle section, make it a white background and it needs to take up the full width. And that's... kind of where I landed here, which is pretty decent. This is still the actual landing page that I used for this SaaS template that I had.

And once I got here, I wanted to fork this for other 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 SaaS 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 can't remember if I did it. in here said, let's make it look more like a settings page. Make the notifications page say activity.

Which, by the way, make it more like a settings page. One thing I've learned is if you don't know, 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 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 kind of embedded this mock or fake data 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 vZero. 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 as well. And sometimes if I haven't got to that point yet, I said, hey, help me take this Postgres schema that I have and give me the ORM for it.

So whether I'm using Drizzle or Prisma, if you're in the JavaScript TypeScript land, or if you're in Rails or Laravel or other languages, you can ask questions about how to get the... 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 people talk about that. It's really underrated for me because this is the next step after this, right? You get this and you say, okay.

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 boringmarketing.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 they'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 boringmarketing.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 boringmarketing.com. Help me design it in a way that it's really fast. And it's probably going 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 ORM schema for your application that's going to have some of those things. Let's see if there's other ones in here. Here's another one that I worked on that could be interesting.

Again, started with an image. I said, use a monospace font, make it tight information density wise. I guess that's a common pattern for me. Use neutral grays.

And I went through 22 different versions here. So the first version 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 Super Human instead, because Super Human is just a beautifully designed email app. So I sent a screenshot of that. And the first version he gave back was actually super good. I saw this and I was like, holy shit, this is very close to what I was wanting.

And I 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, and ended up, you know, going through a bunch of different variations here, which we can walk through all of these if you want. And 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 going 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 cubic Bezier easing function. I would have never figured this out. I would have never went in here and customized my cubic Bezier function, but V0 knows how to do that, which is nice.

Totally. Yeah. Lee, 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 and age with these tools, like in a lot of ways that can be an extremely, extremely valuable 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 what's something you want to leave people with? Is there one thing that, this is an audience of builders, right? They've got ideas, they're building, they're playing with these tools.

They want to produce the best possible prototypes and products they possibly can. 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 actually 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 vZero 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 extremely 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 products. Once you get that mindset, you realize right now, more than any other time in history, 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 GPT or any of these other tools can help you build anything. They know everything about Swift. They know everything about Kotlin and Android.

So definitely give it a shot. Give these new AI tools a shot. And I think you might find it pretty interesting.

I love it. Lee, where could people get to know you better? Because I feel like you're underrated. You are criminally underrated, actually. I'm going to say that.

Well, thank you. And yeah, where could people find out more about you? And where do people play with vZero? Totally. vZero.dev, if you want to try this out, there's a free tier.

For me, leerob.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 yeah, that's me. Beautiful. And if you're listening to this, like and comment for Lee.

I'd love to have him back. I feel like we've got a lot to learn. So let's give him a warm Startup Ideas podcast welcome. And I'll see you around, Lee.

Yeah, thanks for having me on. Of course. Peace.

Transcript for:Maximizing Development with Vercel's vZero

Transcript for:
Maximizing Development with Vercel's vZero