Build a Portfolio Website with Just ONE Prompt! | V0 AI UI Builder Tutorial
A step-by-step demo of building a full personal portfolio website in V0 from one natural language prompt, then editing it with follow-up prompts instead of code.
Building a personal portfolio site the traditional way means choosing a template, wiring up sections for about, projects, and contact, and tweaking CSS until it looks right. This tutorial shows a much faster path: typing one natural language prompt into V0 and getting a complete, styled, responsive portfolio site back, ready to edit with more prompts instead of more code.
What V0 actually is
V0 is an AI-driven UI builder designed to help developers and designers create responsive, production-ready interfaces without starting from a blank file. It interprets natural language prompts and turns them into high-quality front-end code, cutting down development time while keeping the design consistent across sections. It is aimed mainly at developers, designers, product teams, and startups who need a working UI fast, and its core strengths are AI-powered generation from plain-language prompts, instant production-ready React and Tailwind CSS components, customizable output, and easy export into existing front-end projects.
Turning one prompt into a full site
Getting started just means visiting v0.dev, creating an account, and describing what you want. The demo prompt was simple and specific: "create a responsive personal portfolio website in a pink theme," with a note that the theme color is entirely up to whoever is building it. From that single prompt, V0 generates a full template: a page.tsx file that pulls together an About Me section, a Projects section, an Experience section, an Education section, and a Contact page, with working navigation between them, all styled consistently in the requested color.
Editing the generated template
The generated site is a ready-made starting point, not a finished product, and the tutorial walks through how each section gets personalized. The About Me section, Contact page, Education file, and Experience file each hold placeholder content that needs to be swapped for real information: your name instead of a placeholder, your own bio, your actual project links pointing to your GitHub, your real contact details. The Projects section ships with dummy example projects that get replaced with real ones by editing the corresponding component and pointing "View Project" links at the right repositories.
Refining the design with follow-up prompts
The more interesting part of the workflow is what happens after the first generation. Rather than hand-editing CSS to change a layout choice, you can describe the change in plain language and let V0 apply it. One example from the demo: asking V0 to "make the hero section text center aligned with a download resume button" produces exactly that change, added directly into the generated code. That same approach adds a working download button for a resume, which then just needs the actual resume file placed in the right spot in the code for it to function. This iterative, prompt-then-refine loop is the real value of the tool: instead of committing to one generated layout, you keep nudging it with natural language until it matches what you want.
One file or many
By default, the tutorial's generated site keeps most content inside a single page.tsx file, with the various sections called from there. V0 can also be prompted to break a design out into separate files per component, so a project, experience, or education section each gets its own file, which is worth requesting explicitly if you plan to maintain the site long-term and want cleaner separation between pieces.
Key takeaways
- V0 is an AI UI builder that turns natural language prompts into production-ready React and Tailwind CSS code.
- A single prompt describing the site and its theme can generate a complete portfolio template with About, Projects, Experience, Education, and Contact sections.
- The generated template ships with placeholder content and dummy projects that need to be swapped out with real personal information and project links.
- Follow-up prompts, not manual code edits, are the intended way to refine layout choices, like centering text or adding a download button.
- V0 can generate everything in one file or be prompted to split components into separate files, depending on how you want to maintain the project.
Try it yourself
If you want a portfolio site up quickly without hand-coding a layout from scratch, this workflow is a practical starting point: one prompt for the initial build, then a series of natural language edits to get it exactly right. It is a good example of how AI UI tools like V0 fit into a broader toolkit for building things fast, the kind of practical, tool-focused content Humanitarians AI shares to help creators and developers move quicker.
Full transcript(auto-generated, with timestamps)
[0:00]I will show you how to make a portfolio website using VO the AI powered UI builder. So what is VO? It is an AIdriven UI builder designed to help developers and designers create responsive and productionready UIs effortlessly. It interprets NLPs to generate highquality front-end code development reducing development time and ensuring design consistency. So who is it for? It is mainly for developers, designers, product teams and for startups. The key highlights of this tool is it is AI powered UI generation from NLP. Instant production ready react and tailwind CSS components. It is customizable design output. Seamless export to front-end frameworks, efficient iteration and prototyping tools. These
[0:52]Are few of the features of the AI tool. These are the use cases and this is how we can start using the tool. So you need to visit to vo.dev and create an account there. Then you need to give a proper prompt about what do you exactly want and it will generate a code. So let's directly jump into it. So what do we exactly need? We need to make a portfolio website. So I am giving it a prompt like create a responsible responsive personal portfolio website in a pink theme. I need a pink theme but you could choose whatever you want. I am giving it
[1:38]Exactly what all I need instead of software and hit on generate. So let's see what it generates. So it gives us a template code. We just need to edit few changes like we need to put our information but this gives us a readym made template. So we could see here it is generating a code. This is a page.tsx. Here in auto section, about me section, we can change it. We can change according to us whatever we need. an already given
[2:49]Uh there. So you could see it has given us page tsx where uh it has called all the pages. This is about me section where uh we have given about me. Uh we need to change this according to us. Just put whatever details about you. This is a contact page. So just change this and give your details here. Same with education.tsx, experience.tsx, header, hero and budget. So review this. So this is the template view. Instead of your name just put your name. We have about page, projects page, experience, education, contact. Get in touch. If you click on get it tuck, you move to that page. Here it is
[3:44]A dummy projects, but put your projects here in view project. Just give your GitHub link here. Let's see what they have given us. You can see here I wanted a pink theme. So it gave me a pink theme. It always give you different layout. So just tweak it. Give according to whatever you like. I like this page better. Now I can just tweak it. For example, um we can give different different prompts here. just like let's try to gift them this make the ego section text center aligned with a download resume button. Let's see how it gets us. It has since in this they have given everything
[4:53]In page.txt txt tsx files. But if you want all components in different pages, we can also give them a proper prompt about it. Like in this we have different pages for all the for different components. But in this they have given everything in one but we can just tweak it. We just we can just give them a prompt accordingly and it will generate. So now you can see since I have given it a prompt like I need a download button download resume and it has given me here. So just to make it work in the code go to that section and just put your resume there
[5:36]So that it works properly. So this is how you can use VO to make your portfolio. It is it is very easy to use. This is a template whole template given to you. Just make changes in this and create your own portfolios. Thank you.
More videos
2:08Bridging the Pixel Gap in Browser Automation.
2:23How One Narrow Safety Rule Can Make an AI Less Safe Everywhere Else.
2:04Why splitting a chunk from its document makes it retrieve for the wrong question
4:20Three You Can Take Back. One You Can't.
2:21Why a 50-turn agent pays for the same screenshot 35 times unless it caches the pixels
1:53