How to make a vibe coding portfolio in 6 steps

To make a vibe coding portfolio, pick three to five projects you built with AI, write up how you built each one, and put them on a portfolio site you vibe code yourself. You describe the site in plain language to a vibe coding tool or an AI portfolio builder, refine it in conversation, add a case study and live demo for every project, and share the link on your resume and profiles.

A vibe coding portfolio does a job a normal portfolio can't: it proves you can take an idea to a working product with AI, and that you have the judgment to steer it. That matters whether you're a designer, a product manager, a marketer, a career switcher or a developer. This guide covers what to include, how to build the site and how to present each project so it's taken seriously. If you're new to the approach, start with what vibe coding is.

TL;DR: How to make a vibe coding portfolio

Decide who the portfolio is for, choose three to five projects that solve real problems, vibe code a simple site to hold them, and write a short case study for each one. Add live demos and results, then go live and keep it current.

Step	What you do	What the vibe coding tool handles
01. Decide who it's for	Pick the role or clients you want to reach	Nothing yet, this is your plan
02. Pick your projects	Choose three to five that solve real problems	Nothing yet, this is your plan
03. Vibe code the site	Describe the pages, style and sections	Layout, pages, hosting and mobile design
04. Write case studies	Explain the problem, your process and the result	Case study pages and galleries
05. Make projects easy to check	Add live demos, videos and links	Embeds, links and contact forms
06. Go live and keep it current	Share it and add each new project	Publishing and updates by chat

Want to build the site without code? Build your portfolio with Base44.

What is a vibe coding portfolio?

"Vibe coding portfolio" means two things, and the best portfolios are both at once.

A portfolio site you vibe coded. Instead of fighting a template or writing HTML, you describe the site you want and an AI tool builds it. The site itself becomes your first proof that you can build with AI.

A collection of vibe-coded projects. Apps, tools and websites you built by describing them to AI, each presented with the problem it solves and how you got it working. This is the part hiring managers and clients actually read.

AI-assisted building is now normal practice, so showing you can do it well is a real advantage:

For anyone outside engineering, that shift is the opening. A designer who builds a working prototype, a PM who builds an internal tool or a marketer who builds a lead app stands out in a way a slide deck doesn't.

How to make a vibe coding portfolio in 6 steps

01. Decide who it's for and what it needs to prove

Start with the person you want to impress: a hiring manager for a specific role, a client in a specific industry, or investors for your own product. Then write down the one thing the portfolio has to prove to them. For example:

• Product designer: "I can take my designs all the way to a working product."
• Product manager: "I can prototype and test ideas without waiting for engineering."
• Marketer: "I can build the tools and pages my campaigns need."
• Career switcher or junior developer: "I can build complete, working apps and explain how."

Three to five strong projects beat a wall of small ones. Every weak or half-finished project makes the strong ones harder to find, and reviewers rarely look past the first few. If a project doesn't support the one thing your portfolio needs to prove, leave it out or save it for later.

02. Pick three to five projects worth showing

The best portfolio projects solve a real problem, ideally one you or someone you know actually had. Look for moments of friction: a spreadsheet you update every week, a process your team runs by email, a tool you wished existed. A small app that fixes a real problem says more than a clone of a famous product.

Aim for a mix that shows range:

• One tool you use yourself. A tracker, dashboard or planner for your own work.
• One app for other people. A booking app, a directory or a client portal with logins and data.
• One public site or page. A landing page or site with a clear goal, like sign-ups.
• Optional: one experiment. A game, an AI feature or something playful that shows curiosity.

Stuck for ideas? These vibe coding project ideas and vibe coding examples are a good place to start.

03. Vibe code the portfolio site itself

With your projects chosen, build the site to hold them. When you compare vibe coding tools for this, look for:

• Built-in hosting, so the site is live and shareable as soon as it's built.
• Editing by chat, so you can change layout and copy by describing it.
• Galleries and case study pages that handle images, video and long text well.
• A custom domain option, because yourname.com looks more serious than a tool's subdomain.
• Mobile layouts that work without extra effort, since many reviewers open links on a phone.
• SEO basics like page titles and descriptions, so your name leads to your portfolio.

Vibe coding tools such as Base44 cover this list from a plain-language description. Whichever you choose, describe the site the way you'd brief a designer:

Build a clean, minimal portfolio site for a product designer who builds with AI. A homepage with my name, a one-line intro and a grid of five project cards with a thumbnail, title and one-sentence summary. Each card opens a case study page with a hero image, the problem, my process, what I built, the result and a button to the live demo. Add an about page and a contact form.

Keep the site simple. It's a frame for your projects, not the main event. For more on the build itself, see how to vibe code a website and these prompts for vibe coding.

04. Write a case study for each project

A link alone doesn't tell a reviewer much. A short case study does. Keep each one to a few hundred words, in this order:

• The problem. Who had it and why it mattered, in two or three sentences.
• What you built. The main features, with one or two screenshots.
• How you built it. The tool you used, the key descriptions you gave the AI, and the decisions you made along the way.
• What you fixed. Where the AI got it wrong and how you spotted and corrected it.
• The result. Who uses it, what changed, or what you learned.

Show your judgment, not just the output. Anyone can generate a first draft with AI, so what sets you apart is how you steered it: how you broke the problem down, which suggestions you rejected, what you tested and what you changed. A reviewer who sees that you caught a permissions gap or rethought a confusing flow trusts the project far more than one who only sees a polished screenshot.

05. Make every project easy to check

Reviewers want to see it work. For each project, give them at least one of these:

• A live demo they can click through, with a test login if the app needs one.
• A short video or GIF of the main flow, for when they won't click.
• The code, if your tool lets you export it or sync it to a code repository.
• Evidence of use, like the number of people using it, a quote from a user or a before-and-after.

Keep every demo working and keep real data out of it. A broken link or an error page undoes the best case study, so check your demos every few weeks and after any tool update. Load demos with sample data only, never real customer or personal details, and lock down anything that edits data. These common vibe coding mistakes cover what else to check before you share.

06. Go live, share it and keep it current

When the site is ready, publish it, connect your own domain if you can, and put the link everywhere reviewers look: your resume, LinkedIn headline and featured section, job applications, GitHub or design profiles, and your email signature.

Then treat it as a living project. Add each new project as you finish it, retire the weakest one when you pass five, and update your case studies when a project gains users or a new feature. If you're job hunting, tailor the order of projects to each role. The guide to vibe coding jobs covers where these skills are in demand.

Vibe coding portfolio examples by role

Product designer

Four case studies that start with a Figma design and end with a working product: a booking app, a habit tracker, a small marketplace and a redesigned onboarding flow. Each shows the original design, what changed when it met real users and the live result.

Product manager

Three prototypes built to test ideas before engineering time was spent: an internal feedback tool, a pricing calculator and a customer portal. Each case study leads with the hypothesis, what the prototype showed and what the team decided next.

Marketer

A set of tools built for real campaigns: a quiz-style lead generation app, an event sign-up page with automated emails, and a dashboard that pulls campaign results into one view. Each shows the goal, the build and the numbers.

Career switcher or junior developer

Five complete apps with logins, data and clear use cases, from a personal finance tracker to a volunteer scheduling app. Each case study explains the data model, the trickiest problem and how it was solved, with a live demo and exported code. For a more general guide to the site side, see how to make a portfolio with AI.