Channel
Interviewed Person
v0
interested in building landing pages with no code? in this tutorial, I'll show you how to use v0 to build a responsive landing page from scratch. 0:00 introduction 0:28 the first iteration 1:54 the second iteration 2:19 forking a prototype 2:33 replacing the copy 2:54 using screenshots 3:50 unique sources of inspiration 4:17 prompts for polish 4:58 using a component library 5:16 exploring broad visual styles 6:28 v0's design mode you will learn to - create a landing page with simple prompts - use design inspiration from screenshots - experiment with different visual styles - polish your design with advanced prompting techniques - use v0's design mode for polishing your designs resources mentioned - v0: https://v0.dev/ - public work by cosmos: https://public.work/ - shadcn: https://ui.shadcn.com/ #uxdesign #ai #v0 #vibecoding #webdevelopment #paidpartnership
Today I'm going to show you how I would use B 0 to create a no code landing page from scratch with no designs. In case we haven't met before, my name is Elizabeth Lynn and I'm a independent product designer and educator. I've trained designers at companies like Notion and Slack how to use AI in their workflows. We'll be building a landing page for a fictional product called Teleport, the world's first ondemand teleportation service. So, let's start with a simple prompt without any content and see what Vzero comes up with. Notice how in my original prompt, I'm pretty clear about
the different assets and elements that I want to see on my landing page. More clarity like this can always help you lead to a better result. Here are the results. So, from design perspective, it feels a little bit dated because of the use of gradients and the dark purple. However, it did capture all the different elements that I requested here. And so, now we just have to iterate and kind of see where we go. I'm going to ask for three requests. One, to use dark mode. Two, to make the gradients 100 times more subtle. right now I feel like they are too loud and three reduce the number of colors on the page in general. Right now there are a
lot of colors and I'm kind of curious how it'll take direction and make it more minimal. Let's go ahead and preview this in full screen. So notice how based on my prompt it's completely removed all the color and now the design is purely grayscale. I actually think from a design perspective it works a little better because everything is more consistent. But maybe we can try to embed some more personality into this design. So now I'm going to try asking for three other things. So, use a neon green for all the action items. Use only one shade of black for the entire background and then change the font to
be base grotesque. And so, now I've kind of narrowed it down to more specific requests. And hopefully based on this direction, the website will kind of be looking more like something that I'm excited about for my brand. And here is the result of that prompt. Notice how I changed everything to be one shade of black so that it feels a little bit more consistent and the neon pop of green adds a little bit more personality. Also, if you really didn't like the output, you can go ahead and try again. A lot of times results will vary when it comes to using AI and so maybe if you
try again the design results will be better and something that is more in tune with what you're looking for. So notice how this one looks pretty similar to the one that we had before, but structurally is a little bit different. There's a slightly different gradient and this one has also added a image at the top of the page that I can replace with a product screenshot. So I kind of want to save this template for later and so I'm going to go ahead and click on this button up here fork into a new chat so that I can continue exploring but also preserve the original version just
in case I want to revisit it later. Next, we're going to replace all the copy on the page with custom copy. And so if you have all this copy, you can go ahead and paste it into the VZO chat. Vero can handle it all. The copy I'm using today is courtesy of Claude edited by me. So, I'm going to go ahead and press return for this prompt here. So, after that one prompt, all the copy that I want is immediately on the website, which is really great. I didn't have to manually type in anything. If you're scared of starting from scratch, you can also take a screenshot of an existing landing page and use it as a reference for Vzero to follow. For example, if you
want your landing page to look like the Versel landing page, you can paste a screenshot in the chat and say, "Make my landing page look like this screenshot." Notice how fast Vzero was able to recreate the Versell landing page style based on a screenshot alone. You can also send multiple screenshots as well. So, I'm going to go ahead and add a screenshot where this rainbow gradient is featured and see if Vzero can make it happen. My prompt is make my landing page look like a mix of these screenshots. I basically sent three different screenshots and I want my
website to look like a mix of those. Great. So, you'll notice that because I introduced a new screenshot, the design has modified slightly so that now I see these gradients instead of having everything be in black and white. If you like a specific thing in one of the images you're sharing, you can also point to it specifically and ask Vzero to try to implement that specific thing. If you're feeling adventurous, you can also use random images as inspiration. So, I pulled these from public work by Cosmos. And so, I'm going to go ahead and put this image and this image in the