Vibe Coded Portfolio

• Goal. Ship a live portfolio that looks and feels custom-built, without hand-coding it from scratch or hiring a developer, and use it to show I can bring AI into the design process and vibe code the result myself.
• Process. I designed the whole thing first, then used Lovable to build it. I treated the AI the way I'd treat a fast junior developer: a clear brief, a design system to follow, and finished content to place, so it spent its time assembling instead of guessing. Where I wanted tighter control, I moved into Claude Code and Cursor.
• Impact. A responsive, accessible portfolio live at surbhihote.com, built inside a single month of Lovable's Pro plan by keeping credit use tight, using a workflow that scales down to the free plan for anyone on a smaller budget.

The biggest credit saver isn't a Lovable trick. It's finishing the thinking before the AI starts building. Every vague prompt turns into two or three follow-ups, and on Lovable every follow-up costs credits. So I did the slow part offline.

If you use a free chat tool like Claude to pressure-test your structure and write your copy first, that planning costs nothing. You walk into Lovable with a finished plan and spend credits on the build, not the brainstorm.

Open with one strong prompt, not ten small ones. My first prompt described the whole site in a single pass: the vibe, the audience, the structure, the accent colors, light and dark mode, and the tone. A specific opening prompt gets you most of the way there in one build instead of a dozen. A version of what I used:

Build a portfolio site for a senior product designer. Audience: recruiters and hiring managers at design-led and AI-first teams. Aesthetic: minimal, modern, confident, with one or two accent colors and subtle motion. Light and dark mode for accessibility. Pages: home, work index, individual case studies, about, contact. Case studies should read as clear problem-to-solution narratives. Use my design tokens for all colors, type, spacing, and radius.

• Lock in your design tokens early. Once the shell existed, I had Lovable set the tokens in three layers: primitive values (the raw colors and sizes), semantic tokens (background, surface, primary, muted), and component-level tokens. Getting this in place first means later changes are one edit to a token instead of a hunt across every page.
• Build page by page, not all at once. I finished one page before moving to the next. Small changes are easier to check, and it keeps the AI from touching things you already got right.
• Edit in the preview instead of prompting. For copy fixes, spacing nudges, and color swaps, I edited directly in the preview. That's where most of the saving happens.
• Move to Claude Code or Cursor for the fiddly parts. When I wanted precise control over an animation, or a layout the builder kept fighting me on, I worked in code instead. A common pattern now is to prototype most of a project in Lovable, then finish in Cursor or Claude Code. That's not a failure of the tool, it's just using each one for what it does best.

Running two tools on one site is simpler than it sounds, because they don't have to talk to each other. Lovable and Claude Code both connect to the same GitHub repository. Lovable syncs to the repo automatically in both directions, and Claude Code pushes and pulls to the same place. The repo is the single source of truth, so a change I make in one tool shows up in the other after a sync.

This is where most people overspend, so here's how the credits actually work and how I stretched them.

I built on the Pro plan, which starts at $25 a month with a monthly pool of credits that roll over, so my goal was simple: finish inside one month's credits and never touch a top-up. That's very doable for a portfolio, which isn't a complex app. If you're on a tighter budget, the free plan gives you 5 build credits a day, capped at 30 a month, resetting daily instead of rolling over, which is enough to finish a portfolio slowly if you're disciplined. (Verify the current numbers on Lovable's pricing page before you plan, since they change these.)

Images are where a portfolio gets slow, and where credits get wasted if you let the AI handle them.

• Prepare images yourself. Export them at the size they'll actually display, compress them, and hand them over ready to place. Don't spend credits asking the AI to generate or fix imagery you can prep in seconds in your own tools.
• Use modern formats. webp for images and webm for video give you much smaller files than png, jpg, or mp4, with no visible loss. Smaller files mean a faster site and a stronger first impression.
• Right-size before upload. A 4000px hero on a section that renders at 1200px is wasted weight. Resize first.
• Lazy-load anything below the fold. Images and embeds that aren't on screen at load should load only when scrolled to. Ask for loading="lazy" on them.
• Name your files and write alt text. Descriptive file names and alt text help accessibility and image SEO, and they cost you nothing.
• Mind the badge and the domain. On the free plan you can't remove the "Edit with Lovable" badge or connect a custom domain. Getting surbhihote.com instead of a lovable.app subdomain, plus a clean footer, was the main reason I went Pro.

Lovable is fast, but it isn't obedient. Being honest about that is part of using it well, so here's what to expect.

• It doesn't always follow instructions. You'll ask for one specific change and get a looser interpretation, or watch it quietly ignore a constraint you set clearly. Restating the instruction more narrowly usually fixes it, but that's another credit spent.
• It makes changes you didn't ask for. While fixing one component, it sometimes restyles another or "improves" a section you'd already finished. Then you spend credits putting it back, which is the most frustrating way to burn them.
• Undoing its mistakes costs you twice. Because dropped instructions and unrequested changes both take credits to reverse, a bad build can cost you once to make and again to unmake.

The honest takeaway: Lovable gets a real site standing up remarkably fast, but it needs supervision. Budget for the occasional cleanup, protect your good versions, and it stays cheap and worth it.

• Direct the AI, don't hope at it. The designers who get good results write briefs, not wishes. Give it the constraint, the token, the exact outcome. It behaves like a fast junior who does exactly what you say, which is a gift when what you say is precise.
• Your design system is your leverage. Tokens are the difference between "change the blue everywhere" being one edit or fifty. Set them up first, and every later change stays cheap and consistent.
• Build accessibility in from the first prompt. Light and dark mode, color contrast, focus states, semantic structure. Retrofitting these later costs more time and more credits.
• Keep your content in your own files. Copy, image lists, and structure should live in a doc you control, not only inside one tool. If you rebuild or switch platforms, your content comes with you.
• Learn where each tool ends. Lovable is fast for standing up a real site. Cursor and Claude Code give you fine control. Claude Design helps you explore the look. Knowing which to reach for, and when to switch, is the actual skill.
• Show the work. Building your portfolio with these tools and then writing up how you did it is itself proof to an AI-first team that you can design and ship with them. Screenshot your prompts, your token setup, and your before-and-afters. That's the case study.