Quick note from me
I had a conversation last week with a designer who told me they’ve been “thinking about” rebuilding their portfolio for 9 months. The Figma file was 80% done. They just couldn’t ship it.
For years, launching a portfolio meant overthinking every corner. Every line height or pixel of spacing. The build phase would drag on for months and most of us would give up halfway through.
Vibe coding changes the math. We can now test multiple visual directions in an afternoon. See it live and iterate.
There’s another reason to start now. Your portfolio is the safest playground you have for learning vibe coding. Low stakes, you own the brief, mistakes cost nothing, and the skills transfer to every other project you touch.
Below are 5 shifts to help you actually get yours live with real vibe-coded portfolio examples.
*I’m collecting a mix of vibe-coded, no-code, and tradionally built portfolios to celebrate good design work.
Story outline
Shift 01: Do the strategy work before you touch any tool
Shift 02: Pick a method that matches your stack
Shift 03: Match the tool to the complexity
Shift 04: Iterate visually, not just functionally
Shift 05: Treat the deploy stack as part of the craft
Shift 01
Do the strategy work before you touch any tool
Most designers open Cursor or Framer and start building. Then they hit a wall around case studies because they don’t know what this portfolio is actually for.
Sit with these 4 questions for an hour before you prompt anything:
Positioning: what kind of work do you want to attract
Target profile: who is this site for (product designer, design engineer, B2B designer, design lead, freelance, etc.)
Project stories: which 3 to 5 projects best support that positioning
Outcome: what do you want this portfolio to land you
Write the answers down. Keep them open in a tab while you build. Every prompt you write should serve them.
Tools build the site, but it’s strategy that makes it work.
I teach about it in my UX Portfolio Course, if you haven’t yet, check it out below: www.uxportfolio.co
Shift 02
Pick a method that matches your stack
There’s no single best way to vibe code a portfolio. There are many. Each one suits a different starting point. Some examples below:
Framer Wireframer + Workshop AI: stay in Framer the whole time. Wireframe, generate, tweak visually, publish. Best for designers who don't want to deal with code.
Figma → Cursor: draft in Figma, export via Figma MCP, iterate component by component. Best if you love working in Figma.
Figma → Claude Code: design in Figma, connect Cloudflare MCP, build the MVP, test edge cases with Playwright. Best for simple builds you want to ship fast.
Figma Make: start from your Figma file, generate with Figma Make, connect Supabase if you need a database, deploy with Netlify or Cloudflare. Best for pixel-perfect output without leaving Figma.
Bolt + Replit + Claude Code: mix three tools, one for each job. Bolt for components, Replit for structure, Claude Code for production cleanup. Best for designers who don't want to commit to one tool.
Google AI Studio (Antigravity): prompt your portfolio, add Firebase, connect APIs, deploy. Best for those who like Google's stack.
If you’re brand new, start with the 1st or 4th option. If you already write some code, the 3rd or 5th will feel natural.
Shift 03
Match the tool to the complexity
A common mistake: picking the most powerful tool for the simplest job. Designers open Claude Code to build a simple landing page portfolio when Framer Wireframer would have done it quickly, and you’ll have a first draft.
Use the simplest tool that gets you to live.
Static portfolio, no backend → Framer, Framer Wireframer + Workshop AI, Figma Make
Portfolio with a CMS or contact form → Cursor, Claude Code, or Figma Make + Supabase
Portfolio with an interactive playground → Claude Code or the Bolt + Replit stack
Portfolio with a custom domain you want to keep updating → pick a method that exports clean code (Cursor or Claude Code)
The goal is shipped and not impressive in the building process.
Shift 04
Iterate visually, not just functionally
Visual iteration speed is the real superpower of vibe coding. Most designers waste it by treating the first prompt output as the answer.
My approach:
Build the structure first (header, hero, case study, footer)
Generate 3 visual directions before committing to 1 (brutalist, minimal, maximalist etc.)
Test on your phone before deciding
Paste Figma screenshots into your prompts as references (my top method)
Walk away for an hour, come back, look at it fresh
Iterate, iterate, iterate and learn along the way. The key is to also have fun ✨
Shift 05
Treat the deploy stack as part of the craft
Most designers skip this part and then can’t launch their vibe-coded portfolio for six months because this part feels scary. But you know that new experiences always feel scary, so just do it!
The standard vibe coding deploy stack:
GitHub for version control
Supabase if you need a database
Netlify or Cloudflare for hosting and deploys
A CMS like Notion or Sanity if you want to update copy without touching code
Connect your repo to auto-deploy on push to main, so every change goes live in seconds. Push small and often.
Want help with your UX portfolio? 🎁
Build your UX Portfolio with this course
Book a portfolio strategy call with me
Questions? Reply directly.
Keep designing ✨
Aneta
