the vibe-coded portfolio / how to build one, 20+ examples, tips + tricks

✋ Before we get started, I need your help. AI Goodies is still a small, independent enterprise, and it needs your help to grow 🌱

so if you enjoy this read + my vibe, please share the article on your platform of choice, send it to friends, recommend others to subscribe ✔️

also, AI Goodies doesn’t feel like a good name anymore. This is not an AI newsletter, and it’s not about “goodies”. It is a platform that studies the future of creative work, design industry transformations, emerging technology, broader society. So it needs a new name. I’m exploring different options, which one of these four resonates most with you right now? 👇🏼

yay, thanks + let's get to it.

/

“Where should I host my portfolio?” invites completely different answers in 2026 than it did in 2020. The portfolio space has significantly transformed and I’m here to explore how.

A couple of weeks ago I made a post on Linkedin asking designers to share their vibe-coded portfolios. So many replies, OMG! and they made one thing very clear: the portfolio is changing.

It's no longer just a collection of polished case studies, Figma screenshots with some context, or a beautiful website that says something generic like "I am a product designer who wants to build delightful experiences” (of course you are).

The new portfolio is becoming a product. A live, interactive version of your thinking: a mini tool, a dashboard, an AI playground, a weird little experiment that renders how you think and what your world looks like.

So, yes, designers are shipping products: not mockups, prototypes, not "concepts" in a Behance case study. Actual, live, deployed software with real users.

And this isn't a handful of early adopters anymore. Replit reported over 2 million applications built on its platform by the end of 2025. 25% of the Y Combinator Winter 2025 batch had codebases that were 95% AI-generated. There are dedicated vibe coding conferences now (Vibe Conf in Gdynia, AI Design Systems Conference with 1,000+ attendees). Job boards tracking 1,000+ open positions that explicitly require vibe coding skills. Collins Dictionary made it their Word of the Year, lol.

This went from meme to paradigm in about eighteen months.

But what I’m more interested in isn’t necessarily the tools or the speed or even the products themselves: it's what this does to the portfolio, and, ultimately, to the way we land jobs as designers. Because the portfolio has always been how designers prove who they are, and what counts as proof just changed.

/

the old portfolio: process as proof

A design portfolio has meant one thing for the last decade: a collection of case studies. Each one follows roughly the same arc. Here's the problem, here's the research, here's the wireframes, here's the final UI, here's the outcome (usually a metric you had partial influence over).

The format rewards storytelling. It rewards process documentation. It rewards the ability to narrate your contribution to a team effort. Sure, for a long time, this made sense, because design was a team sport and the artifact was a Figma file that needed engineers to become real.

Buuuut, some less-than-great things ended up happening: everyone's case studies started looking the same; same double diamond, same empathy maps, same made-up personas (oops 🤭🔥), same polished hero screens. I even came up with a name for this: The Checklist Portfolio. This model pushed hiring managers to start skimming, and the format became a checkbox, not a differentiator.

Well now, with vibe coding, designers can show something different. We can go from "here's my process for arriving at a solution” to “here's the solution and here’s how I think about problems, design, and technology” it's live! click it! use it! it works. 🙃

/

the new portfolio: shipping as proof

Many designers are already doing this. The transformation I'm seeing is designers whose portfolio takes the shape of a collection of live products, and a playground where they share outside-of-work experimentation.

When I asked my community to share their vibe-coded portfolios, the responses were indicative of something much bigger than a trend: the archetype of what's coming. 👾

Here are some of the most documented examples I've found / designers who built, shipped, and wrote about how they did it. Every link works. Every site is live.

Gin Ouyang, a UX/Product Designer, vibe coded her entire portfolio site in one week using Next.js, Windsurf, and ChatGPT. Before she built it, she shipped a headless Shopify storefront for her e-commerce startup. Her portfolio doesn't just describe her skills, but it becomes the evidence, it instantiates the skills: the site itself is proof she can ship.

Matt Trice is another example of a designer who vibe coded his portfolio using Three.js, GSAP, and AI assistance, with the GitHub repo public. Documented the entire process including what broke and what he learned. His key heuristic: "design your app as far as you can in Figma first. This will help establish a solid design language when you start coding."

Felipe Domeneghetti also documented the journey of building his portfolio (which I love) in a very useful and educational article.

Through my Linkedin post I discovered dozens of amazing vibe-coded portfolios, I encourage you to go through all the comments and meet the real-world builders and their work. Some of my favourites:

💻 Stan Reimgen’s OS, made in Figma + Cursor

💻 Saira Khan’s beautiful Desktop-Core-aesthetic-infused portfolio,

made in Claude Code

💻 Sankalp Sinha’s statuesque website

💻 Michal Krzton, exemplifying a journey from Lovable to Cursor to Claude Code (to quote his Why: “first draft was made with Lovable because I wanted the core structure set up real quick. Then Lovable wasn't enough for editing so I switched to Cursor and moved it to Vercel for hosting. Eventually, i kept hitting api limits with Cursor so i moved to Claude that doesn't stop you, just drains your wallet”)

💻 Vlad Chichisan, whose portfolio I simply adore

💻 Alex Giuseppe Ispas (if you click on one portfolio from this list make it this one)

💻 Silke Sonnenberg, for a simple + bold aesthetic

💻 Allen Smith’s amazing story of ending up open-sourcing the design system behind his portfolio over here (built with Claude Code and Codex)

💻 My friend Paavan who is a Product Designer @ Granola

💻 Puja Mahtani’s fun + design UI inspired portfolio / similar aesthetic nicely executed by Simran Koul

💻 Paul Osborn, with a strong example of how to infuse your portfolio with the aesthetic of the industries you’re targeting

💻 Sebastian Narvaez’s portfolio vibe-coded 3 years ago (!) back to back with ChatGPT, recently refined with Claude Code

💻 Taimoor Nasir’s WIP portfolio going for the Desktop Core aesthetic with an opinionated view. Still hungry for Desktop Core? Here’s Sahana’s Bs portfolio

💻 Anna’s vibey portfolio made with Lovable

💻 A very original design + POV from Faílenn Aselta

💻 The “Personal Internet Space” aesthetic exemplified by Sruti Gandreti

💻 I’m obsessed with the hero motion effect in Arthur Kamsky’s portfolio

💻 Clean computer-coding-inspired aesthetic rules Danilo Rojas’s portfolio

and if you want to check out (even!) more examples, here’s the full Linkedin post and the comments that the wonderful people in my community used to share their portfolios.

also, a small note: this issue is supported by Plasma 👾 a next-gen debit card with 3% cashback (and a special 5% cashback offer running right now).

If you're into exploring smarter financial tools, check out their community channel on Telegram: Ranked+, where they discuss new-generation cards with elevated cashback and perks. Now back to portfolios.

/

what this changes about hiring

Let me connect this to what I wrote in the 2026 Design JD issue. The companies I most admire (Anthropic, Vercel, Cursor, Linear, Intercom, Lovable, Stripe) are all asking for designers who prototype in code and ship fast. Vercel says "depth and quality of your experience is more important than years." Cursor says "there's no fixed toolset, no best background." Anthropic says "you'd rather get something in front of users this week than perfect it for a month."

These companies don't want to see your process. They want to see what you shipped.

And that changes the hiring dynamic. A traditional portfolio is easy to fake. You can over-credit your contribution, polish the narrative, cherry-pick the metrics. But a live product is hard to fake. It either works or it doesn't. It either has taste or it doesn't. The code is on GitHub. The thing is deployed. You can click it. 👾

Carly Ayres wrote about this in her "Designers! Designers! Designers!" piece. Founders are looking for "Super ICs" who can own outcomes end-to-end. A live product in your portfolio is the strongest signal you can send that you're that person. Stronger than any case study. Stronger than any testimonial. Because it's not a story about what you did. It's the thing itself.

/

it also changes identity

OK, this next part is less about careers and more about what it means to be a designer right now.

For years, we've had this debate about whether designers should code. And the conclusion was usually: no, we're architects, not bricklayers. We think about the experience, someone else builds it.

Vibe coding dissolved that distinction. No, designers didn’t suddenly learn how to code. But the barrier between "I designed this" and "I built this" is slowly collapsing. My buddy Domingo at Intercom told me he learned front-end as a consequence of vibe coding. He started vibe coding, and to get better results, he had to understand the code. His skills didn't narrow > they expanded.

The Atlassian design team published their entire workflow for designers shipping code, and it doesn’t feel like radical experiment anymore, but moving towards a standard process. Designers vibe code the last 20% of polish directly in the codebase, tuning motion, styles, and layouts, then submit pull requests for engineering review. Their framing is sharp: the last 20% of polish is where 80% of handoff time used to burn. Now designers close that gap themselves.

When you can build the thing you designed, your relationship to your work changes. You're not handing off a vision and hoping it survives 🤞, you're shipping it directly. And that does something to your identity as a designer: it makes you more accountable, more invested, more whole.

/

but let's be honest about the limits

I don't want to be naive about this. There's a critique of the vibe coding portfolio, and it's a fair one.

The Muzli guide put it perfectly: "the most common bug in vibe coding isn't technical. It happens in your head. AI can generate something that looks good, works, and runs fast. Then it becomes dangerously easy to say 'I trust it' and stop thinking like a designer. At that moment, you stop designing and start approving."

Truth is, in 2026, nobody is impressed by "I made a prototype with AI" anymore. Everyone has seen stunning UI generated in an hour that falls apart on the second screen. The questions that matter now: how was it built? Is it consistent? Can it scale? Can someone pick it up in a month?

A fractional CTO who reviewed dozens of vibe-coded applications found that about 6 in 10 ship without major issues / the rest break on authentication, payments, scaling, or security. The pattern is consistent: vibe-coded prototypes are great. Vibe-coded production apps need an engineer to review before launch.

And there's the "anti-vibe coding" movement, designers pushing back against the sameness of AI-generated output. When everyone uses the same models, you converge on the same aesthetic. The AI look is becoming recognizable. And recognizable means generic.

So the vibe coding portfolio isn't all about “shipping”, it’s about shipping with care, intentionality, attention to details, safety guardrails. With the design thinking that makes the difference between a demo and a product.

/

how to build your vibe coding portfolio

OK so here's the practical part. If you're a designer who wants to start building a portfolio of shipped work, here's how I'd approach it. 👾

set the conceptual foundation based on something you actually care about. Don't vibe code a generic landing page to prove you can. Rebuild a case study you've already done, but this time as a live, deployed, interactive experience instead of a static Figma walkthrough, and let it lead the aesthetic. Or take a design system you built and render it as a functioning component library and build your story around it. Or turn your best concept work into a clickable prototype that lives at a URL.

When your portfolio vision has real provenance, when it comes from your actual design practice, the decisions you made throughout the build become self-evident. That's what hiring managers parse in a portfolio: having a point-of-view, having personality.

pick one tool and commit for a month. Don't tool-hop. It honestly doesn't matter which one. What matters is that you get deep enough to hit the walls and learn to work around them. I’m personally a fan of Replit or I would use Claude Code / Design.

build in layers, not all at once. The number one mistake every writeup mentions: describing your entire portfolio in one prompt and expecting a finished product. Instead, start with the foundation: structure, navigation, one complete case study. Make sure it works. Then layer on the next piece. Then the next. Each layer adds fidelity, detail, craft. Matt Trice broke his project into "smaller, intuitive chunks." The layering is what evolves a basic scaffold into a carefully crafted experience.

deploy everything. Even if it's rough. Even if it's unfinished. Get it on Vercel or Netlify, get it on a live URL, share the link. The moment your work exists at a URL instead of a Figma link, the feedback loop changes. You'll locate five things to fix in the first ten minutes of seeing it live, and that's more useful than another hour of prompting.

add a playground. This is my fav part ♥️ Have a section that's purely experimental: visual play, technology explorations, weird little prototypes, generative experiments, things you built just because you were curious. It doesn't need to be polished. It doesn't need to be a case study. It just needs to render who you are beyond the professional work. The playground is where your sensibility lives. It's where someone hiring you gets to see how you think when nobody gave you a brief. Some of the most memorable portfolios I've seen had a corner that was essentially a sketchbook, and that corner told me more about the designer than any case study ever could.

document the build, not just the result. This is where the vibe-coded portfolio becomes more than live URLs. Write about what you built, why, what broke, what you learned, what decisions you made that the AI couldn't make for you. That narrative is what separates your work from everyone else's. The product is the proof, but the story is the rationale and is the most interesting part.

treat your portfolio site itself as product #1. Build it with vibe coding. Deploy it. Let it be evidence of the skill you're claiming to have. If your portfolio says "I can ship" but the site itself is a Squarespace template, there's a credibility gap that no case study can close.

and keep shipping. One project is a novelty, three is a pattern. 🙃 Treat it like a garden: always growing, always being tended to, never "done."

/

the portfolio that screams "I can ship"

So here's where I think we are. The design portfolio is splitting into two tracks.

Track one: the traditional case study portfolio. Still valid. Still works at enterprise companies, agencies, and organizations with established design processes. Still rewards process thinking and storytelling. Not going away.

Track two: the vibe coding portfolio. A collection of live products, deployed prototypes, working tools, and side projects with real URLs. Rewards building, taste, and the ability to go from insight to artifact without waiting for anyone. Increasingly what frontier tech companies are looking for.

You don't have to choose one track. But you should know which game you're playing. And if you want to play at the companies defining the future of design (the Anthropics, the Vercels, the Cursors, the Linears), they want to see what you shipped. Not what you would have shipped if engineering had bandwidth.

The bar moved. The portfolio moved with it. And I think a portfolio full of things you built and shipped yourself is a more honest representation of who you are as a designer than any case study ever was.

Build something this weekend. Deploy it. Put it at a URL.
That's your first portfolio piece for 2026. 🧡

/

Have you started building your vibe coding portfolio? What did you ship? Drop your URLs in the comments / I want to see what you're making.

If you found this useful, share it with a designer who's been meaning to start building ❤️‍🔥

*aaaand it you want to prepare for the next stage of design jobs, take my course on AI for Designers with The Interaction Design Foundation. 👇

🔥 let's collaborate 🤝 get featured in my newsletter

We have the coolest audience that you can get yourself in front of.
Reach out at [email protected] if interested 💋

✨ for more goodies, follow me on:

UX Goodies on Instagram

Ioana Teleanu on Linkedin

thanks + AI & Design Love,

hugs hugs,

Ioana 🪩

/ soft machines