My name is David Andre, and here's how to build anything with VZ. So what even is VZ? It's a new AI tool that can build amazing user interfaces from plain English. It was created by Vercel, the company behind Next.js, which means that

VZ always knows the latest and best web development practices. So in this video, I'll show you how to build $10,000 web apps using VZ. Now let's get to building. Here's the plan: First, we're going to use VZero prompter. This is a custom GPT

designed, and you can find it in the new Society in our templates and presets section. Now what this GPT does is that it creates a seven-prompt structure optimized for VZero. So all you have to do is describe your idea, such as "I want to build a poly

market clone focused on the AI field," and it will write super-optimized prompts specifically for VZ with the latest UI practices. And you can just copy and paste them into VZ. So let's do that. Let's take the first prompt, which is going to be

always the foundation and the big picture, and just paste that into VZ. But right, this is what it actually looks like. VZ is super clean. On the left, you have the chat. On the right, you have the UI. It first starts by doing some internal thinking, which is basically like

analyzing the user's prompt and how to best approach it, and then it switches the UI into the left part and into the right part. The left is just the text, right, very similar to Bolt or Cursor. All the other tools work the same, right? But what VZero stands out is the Next.js

practices it's built on top of Shad CN UI, which is another web development component framework. Basically, to put it into plain English, it is the best AI model for designing websites by far, and it is improving faster than any other model. Like, if you follow VZ on Twitter

which you should, they're releasing like every single day a new update, which is just crazy, right? So okay, this is what our website looks like after one prompt, guys, one prompt. Okay, so none of these buttons work, which is expected. We need to make sure the graphs are there. Okay, let's

copy the second prompt. Actually, we can probably refine this. So, so I pasted in the updated first prompt, and v0 is working on it as you can see. It also creates its own structure. So, it used to be just one file, which you know was not

optimal, fitting 500 lines of code into a single file, but now you can see the file structure. So, it tries to split things into components, into different manageable parts that you can build upon. Okay, so all right. GPT-5 release, AI regulation, AI breakthrough. So, obviously

these charts are fake right now, but the website is really starting to take shape on different, like, zoom in the graph goes outside of the bounding box, which you can easily point out, right? So, say, 'Make sure the graphs do not go outside of the bounding box.' And you can actually take a

screenshot and put it into VZ so that it sees what's the issue. This is also a good practice, and make sure to give it the context, necessary context, right? v0 prompter will create the general outline for you so that you don't have to be a

professional prompt engineer to, you know, write these prompts. A lot of people make the mistake of not giving enough context or giving it too much context and then confusing the tool. So that's why I built this GPT because it guarantees that you get the most out of it. Okay, okay. So this

actually didn't fix it. So let's try to use another VZO tool which is this select. Okay. We can select this bounding box and say this box needs to be within the white background. It cannot go outside of it. Make sure its width is updated accordingly. Okay, while that's being

fixed, we can probably check this off. By the way, if you're wondering what tool this is, this is actually my own AI tool that I'm currently developing. So if you want to be one of the first people to get access, make sure to sign up to the

waitlist below. It's completely free. All right. Let's go back. So it did fix the issue. There could be a little padding but that's not the biggest problem right now. The way you should approach it is that start with big picture things. Okay. Start with the

design, the colors, how you want your website to look like, the main UI, the layout. Start with the big picture things and then go down more into details, more and more gradually. Now you might be thinking like, okay, David, but that's kind of annoying to think about, right? Like

you have to think about what if I'm being too granular, if I'm being too grand. That's exactly why I built VZO prompter, like this custom GPT will do that for you. It knows everything about VZO and how to prompt it properly. So again, you

can find it inside of templates and presets in the useful GP right next to all of my pre-built automations, AI agents, checklists, all of my code, which by the way will include the code from this video as well. So if you want to access to all of this, make sure to join the new

Society. It's the first link in the description. All right, let's go back into VZ. Seems like it got stuck, which sometimes happens. You can just click on the 'try' and that should fix it. Now, what's great about VZ is that all of

this code, you can take with you. Like, you can put it into VS Code, Cursor, anywhere else you want. Also, you can use it to design a prototype for a client. So, let's say you're selling, you know, frontend services to somebody and you need a

quick prototype within 20, 30 minutes with VZ, you can easily build that and show like you're serious. It will sell so many more clients that way rather than just promising it, right? So once you're happy with the code, you can just click on 'add to codebase' and VZ will give you

a link that uses ChatGPT's UI. So every time VZ finishes coding, you can click on 'add to codebase' and take it into Cursor, which is how I'm developing my startup by the way. I always put it into Cursor, and all of like this UI by the way, this

UI for my own app, my own startup was made in VZ in about one day, right? So, as you can see, this is like pretty functional app, like there's everything you might need in a productivity application, right? With the chat box, with the uh different UI elements with

completed tasks, creating new tasks, different models. Obviously, it's still not perfect, but I've made it in a few hours. Like, this was made with VZ, so the reason I'm so confident talking about VZ is because I'm using it myself. I'm using

it to build my own app, my own startup, and I know what it can do and I know how fast it's getting better. Like, just following the VZERO company account on Twitter, you will see how fast they're shipping. Okay, so anyways, this is our app.

We have the different prediction markets. Okay, this is much better than the first version, to be honest, and we're only like two prompts deep. So, let's go into prompt number three, and again, you don't have to think about the prompt structure, like that's the purpose of the custom GPT.

Right, all of you, you should build custom GPTs or Claude projects for the common things you're using AI for. I know that even if you are using ChatGPT, which you know, it's still better than most people. Most people still aren't using AI tools. Most

of you are still repeating the same problems. You're typing the same things, and you don't have custom GPTs for those actions. That is a huge mistake and a huge waste of time. So, build custom GPTs. As a side note, you can start using VZ

for free, obviously. You, there is a certain limit because you know, running API tokens, running AI models, is not free. So, there will be a point, like after 30, 40 prompts, that you hit a limit and you are forced to upgrade, or you can just

wait until the limit resets but I would highly recommend paying for as many AI tools as you can afford because they give you so much leverage like it's hard to imagine the more AI tools you use the faster you are at using them the better

you know which tools you use the better prompts you write so you get more out of them it's just a compounding vehicle so if you are not paying for AI tools start paying for them I myself I pay for stuff all the time even if I barely use it

simply because it is the future Okay seems like we got some weird error obviously VZ is able to fix this but I'm curious what will happen Server-side error okay let's copy this it's still running though seems like it's still running

says stop all right so okay I'm actually going to paste it in and I'm also going to take a screenshot just so it sees like the layout I see it all I can see is this error explain what causes it and fix it in the meantime I'm going to

prepare my prompt 4 which is the individual Market page again you start with the grand layout right with the main layout of your app where everything should be what color schemes and fonts you want to use the big picture and you slowly go gradually gradually gradually

until you're customizing each element now you have to be careful right because VZ is optimized for front end meaning the user interface some things should be developed in back end right for the back end I would use Cursor because in Cursor you can go way more into detail since it

is built on top of VS Code. A lot of programmers will find it very easy to use, like it's a full development environment with way more features than VZ has to offer. But I would still encourage you to use Cursor for the back end, even if you aren't a programmer and

actually, I have a really, really deep tutorial in the new Society on this. In the advanced AI tutorials, there's like a 50-minute plus Advanced Cursor guide, which is designed for non-programmers to help you get the most out of Cursor. So again, if you want access to that, make

sure to join the new Society. It's the first link in the description. It's going to be linked below the video. Okay, seems like VZ is really struggling with these errors. Luckily, we have this simple button: "Fix with VZ." So let's send that

and I actually think this is a very interesting look into the future of work. Humans will be like the managers or CEOs. You, as the person, you will be in charge of the idea, right? You will present the idea, you will have the vision, and AI models and AI agents will work for you

and do the coding, just like VZ does right now. I could go myself and, you know, try to look for the error. It would take me like 20-30 minutes, probably, because I'm not a front-end developer. I'm actually a complete newbie when it comes to

front end. Okay, I can still design amazing, clean user interfaces because of tools like VZ. Okay, so the error was fixed. It fixed it itself. And let's see. Okay, so we don't have the data, obviously. Data is fake. This is where back end would come in. So this is why you need

back end right back end is for the functionality front end is for the design for the user interface so if you don't want your data to be fake you need to build out a back end and then call your own API but honestly that's way

Beyond the scope of this video okay so let's see individual Market page explore markets okay so one thing that would be cool is if we could click on the graphs and see a more detailed version of it so make sure I can click on each of the

graphs on the main page and see a more detailed version with some other stats such as the number of dollars bet on this Market design a custom model for this model model I don't know what to pronounce it I'm not a front end developer I don't know the pronunciation

use the same design principles as the rest of our app so you just describe how you want your app to be it's literally that simple as long as you can type in English you can bu I'm being completely serious and I can say this because I've

done it with my own startup like this was built with vzer in a few hours so I know how to do it I've done it and that's why I'm confident that you no matter how beginner you are no matter if you've never written your code doesn't

matter if if you know nothing about HTML CSS you don't have to with VZ you can build a websites all that has to do is a little bit of like action taking if you can push through the slightest of discomfort if you can challenge yourself to

learn new things, you know. If you have the least amount of work imaginable, you will be able to be so much more successful. Like there is this concept, the smart get smarter, from [inaudible], it's like the rich get richer, right? Everybody understands that. Like the rich invest in

assets, they get richer. Poor people live, you know, month to month, so they get poorer. The people who use AI tools will get more and more done in the coming years, while the people who don't will fall more and more behind because their jobs will be automated and they will do

nothing. They will, with that extra time, they'll watch Netflix and TV while us, hopefully you watching as well, will use AI tools to build stuff that otherwise we could not build before. So make sure you're in the category of the people that get smarter and get more ahead with

AI than the people who fall more and more behind. All right, so one thing I don't like is this like top part. I would just get rid of it. I'll say, 'copy,' get rid of this top part completely. I want our site to look more like Polymarket. So if

you don't know, Polymarket is a prediction market, essentially. And actually, for this, I probably should have used the select, select feature, like you select an element and then talk into V about it. By the way, this feature didn't even exist like two weeks ago, so that's

how fast AI is progressing. Like I'm being completely serious when I say all of us will have custom software. Like there will be a point where I don't really like using Discord, I don't really like using Google Calendar or whatever, you will just build your own software in

30 minutes and that's it, like all of us will have custom software. And I think the sooner you realize this, the sooner you start taking it seriously and building something. Whether that's an AI startup, whether that's a you know, just a tool for yourself and your friends,

whether that's something you will use internally in your company or that you sell to clients, do not sleep on this. Start building custom software and use tools like VZ because they might very well change your life.

Build anything with v0, here’s how

"The greatest danger is not that our aim is too high and we miss it, but that it is too low and we reach it." - Michelangelo

David Ondrej

VZ는 버셀에서 만든 일반 영어로 UI를 구축하는 새로운 AI 도구입니다.

이 동영상은 VZ를 사용하여 10,000달러 규모의 웹 앱을 구축하는 방법을 보여줍니다.

사용자 지정 GPT인 VZero 프롬프터는 VZ에 최적화된 프롬프트를 생성합니다.

VZ의 인터페이스에는 프롬프트용 채팅과 UI 디스플레이가 포함되어 있습니다.

VZ는 Next.js 관행과 Shad CN UI를 사용합니다.

하나의 프롬프트로 초기 웹사이트 생성, 버튼이 작동하지 않음.

VZ는 파일 구조를 개선하여 코드를 관리하기 쉬운 구성 요소로 분할합니다.

스크린샷과 프롬프트를 사용하여 그래프 경계 상자 같은 문제를 해결합니다.

VZ의 선택 도구를 사용하여 UI 요소를 구체화합니다.

큰 그림에서 시작하여 점차 세부 사항을 추가하는 것이 중요합니다.

VZ에서 생성된 코드를 다양한 환경으로 내보낼 수 있습니다.

클라이언트를 위한 빠른 프로토타입을 만드는 데 VZ를 사용합니다.

ChatGPT와 유사한 UI를 사용하여 코드베이스에 코드를 추가합니다.

개인적인 일화: 하루 만에 VZ로 스타트업 UI를 구축했습니다.

후속 프롬프트를 통해 앱 개발을 계속 진행합니다.

일반적인 AI 작업을 위한 사용자 지정 GPT를 구축하는 것이 좋습니다.

AI 도구의 비용 효율성에 대해 논의합니다.

VZ에서 발생한 서버 측 오류 문제 해결 중입니다.

VZ와 커서를 사용하여 프론트엔드 및 백엔드 개발을 처리하는 방법에 대한 조언을 제공합니다.

VZ와 같은 AI 도구를 사용한 작업의 미래

인간은 관리자/CEO로서, AI는 코딩 작업을 처리하는 비전을 제시합니다.

데이터 기능을 위한 백엔드 개발의 필요성에 대해 설명합니다.

클릭 가능한 그래프와 같은 대화형 요소를 앱에 추가합니다.

상세한 시장 통계를 표시하기 위한 사용자 지정 모델 설계.

AI 도구를 수용하고 초기 불편함을 극복할 수 있도록 격려합니다.

AI 도입과 관련하여 '스마트가 더 똑똑해지는' 효과에 대한 비유입니다.

앱 디자인에서 원하지 않는 섹션을 제거합니다.

AI의 빠른 발전과 맞춤형 소프트웨어에 미치는 영향을 강조합니다.

강력한 행동 유도: VZ와 같은 도구를 사용하여 맞춤형 소프트웨어 구축을 시작하세요.

Build anything with v0, here’s how

Build anything with v0, here’s how

스크립트