Vibe Coding (5) — Polish the Design With References From Dribbble, Aura.build, Awwwards, and Land-book

Vibe Coding (5) — Polish the Design With References From Dribbble, Aura.build, Awwwards, and Land-book

In this guide, you will transform the structurally-sound portfolio you built in Article 04 into a polished, professional-looking site that stands out from the sea of AI-generated portfolios. You'll learn how to use four reference sites (Dribbble, Aura.build, Awwwards, Land-book) strategically — not as templates to copy, but as visual vocabulary to translate into specific v0 prompts. By the end, your portfolio looks intentional, not generic.

Difficulty: ★★★☆☆ (Approachable but requires design judgment — the harder skill is knowing what not to copy)
Required Tools: v0 + access to the 4 reference sites (all free)
Updated: May 2026

Overview

Article 04 built the skeleton — a portfolio with all the right sections, populated with your real content, published to a .vercel.app URL. The output was functional, but it had the unmistakable "AI-generated" feel: generic typography, default colors, predictable layouts. The single biggest factor that separates "looks like AI made it" from "looks like a thoughtful designer made it" is reference quality. Without strong references, even the best vibe coding tool produces output that converges on a beige mean. With strong references, the same tool can produce output that looks intentional, distinctive, and professional.

This article does four things. First, it explains why references matter and how to use them right (it's not "show v0 a picture and ask for an exact copy"). Second, it tours the four reference sites and what each one is best at. Third, it teaches the skill that matters most — translating visual inspiration into specific v0 prompts that produce on-brand output. Fourth, it walks you through a real polish session on the portfolio you built in Article 04, in the right order (typography first, then colors, then layout, then animations). By the end, your portfolio at the same .vercel.app URL looks dramatically better — and you have a reusable polish process you can apply to every future v0 project.

The honest goal: your portfolio after this article should produce a "where did you get this designed?" reaction from people, not a "this looks AI-generated" reaction. Both are signals. The first means you've successfully applied taste to the build; the second means you skipped this step or applied references poorly.

Who This Is Useful For

What You Will Learn

By the end of this article, you'll be able to do five things:

What You Need

Step 1 — Why References Matter (And How to Use Them Right)

There's a wrong way to use references and a right way. The wrong way is to find a site you love and ask v0 to copy it. This fails for three reasons: v0 can't perfectly replicate someone else's design system; copying produces uncanny imitations rather than coherent designs; and your content is different from theirs, which means their layouts won't fit you anyway.

The right way is to use references as visual vocabulary. Instead of "make my portfolio look like brittanychiang.com," you extract specific elements you like — the way a single accent color punctuates a monochrome palette, the choice to use serif headings instead of sans, the rhythm of how sections transition, the typography weight contrasts. Then you translate those specific observations into v0 prompts. This produces output that's informed by your references without being derivative of them.

The mental model that helps: a designer with strong taste doesn't look at a great portfolio and try to redo it. They look at it, identify three or four specific things working well, and apply those principles to a different project with different content. That's the skill — distilling references into transferable principles.

Step 2 — Tour the Four Reference Sites

Each of the four sites has a different strength. Knowing which one to consult for which kind of question makes browsing 5x more efficient.

Dribbble — designer-uploaded showcase, sortable by category. Strengths: massive variety, easy to browse, great for color palette and small detail inspiration (cards, buttons, hover states, micro-illustrations). Weaknesses: many shots are aspirational mockups rather than shipped products, so the design might not actually work in a real responsive layout. Best use: collect 3 small-detail references — a specific card style you like, a button treatment, a color palette.

Aura.build — curated collection of real personal websites, all of which are live and shippable. Strengths: 100% real sites that someone actually uses, strong curation, all in the personal-portfolio category. Weaknesses: smaller library than Dribbble. Best use: 2–3 full-site references — sites whose overall feel you want yours to share, that you'd be willing to model your structure after.

Awwwards Portfolio Sites — award-winning portfolios, juried by industry pros. Strengths: high design quality bar, strong on interactions and animations, filterable by category. Weaknesses: some are overdesigned (lots of unnecessary animation), which can be tempting to copy badly. Best use: 1–2 references for premium-feeling micro-interactions and animations.

Land-book — curated landing page directory. Strengths: focuses on what actually converts, includes personal sites alongside SaaS landing pages, great for understanding hero-section patterns. Weaknesses: skews marketing-oriented. Best use: 1–2 references for hero section structure and content hierarchy.

Spend 30 minutes browsing across all four. For each site you save, capture:

Step 3 — Build Your Reference Board

A reference board is a single document where you list your selected references with structured notes. Without it, you'll forget what you saw and end up making design decisions from foggy memory. With it, every polish decision has explicit visual support.

Open a Notion page (or any document). Create a table or list with this structure:

Aim for 9 references total: 3 from Dribbble (small details), 2 from Aura.build (full-site feel), 2 from Awwwards (animations / interactions), 2 from Land-book (hero patterns). More than 9 becomes overwhelming; fewer than 6 leaves you under-supplied with vocabulary.

Once your board is complete, look across it and identify the 3–4 cross-cutting principles — the patterns you saw in multiple references. Examples:

These cross-cutting principles are your "design system" for this project. They're more important than any single reference because they're what makes the result coherent.

Step 4 — Translate Visual References Into v0 Prompts

This is the most important skill in the entire article. v0 doesn't see your reference site (unless you paste a screenshot — covered below). It works from your text prompts. The skill is describing what you see precisely enough that v0 can produce something similar in spirit.

The bad way to translate references: "Make my portfolio look like brittanychiang.com."

The good way: extract specific properties and describe them. Each visual property has a specific vocabulary:

A prompt that translates multiple references into one design direction:

Update the design of my portfolio with these specific changes,
drawing inspiration from my reference set:
Typography:
Headings: use a refined serif (Playfair Display or

  Cormorant Garamond), weight 600, tight tracking
Body: Inter or Geist Sans, regular weight, line-height 1.75

Hierarchy: Hero name should be very large (clamp(3rem, 8vw,

  6rem)), section headings should be 2.5rem, body 1rem
Color palette:
Background: warm off-white #FAF7F2

Primary text: deep brown #2A2A24

Secondary text: muted brown #6B5D52

Single accent: sage green #849F8C, used ONLY for primary

  CTAs and inline links
Spacing:
Generous vertical spacing between sections (minimum 120px

  desktop, 80px mobile)
Generous internal padding inside cards and containers
Layout adjustments:
Hero: left-aligned, text-only (no image), with a small

  "open to work" indicator dot near my name
Projects: single-column list (not grid), with each project

  taking a full-width tile with large typography
Remove any unnecessary borders or boxes; let whitespace

  define structure instead
Interactions:
Subtle fade-in on scroll (250ms transition)

Hover states: links transition color to the accent over

  150ms, no underline movement
No bouncy or aggressive animations
Don't change any content — only the visual presentation.

This kind of prompt is dense — but every line is specific and translates a real reference observation into something v0 can execute. The output will feel coherent in a way that vague "make it nicer" prompts never produce.

Step 5 — The Polish Order That Works

The order in which you polish matters. Random order produces unintended changes — fix the typography after fixing animations and you might break the animations. The order that produces clean results, every time:

1. Typography — set the font families, weights, and hierarchy first. Everything else builds on top of typography.
2. Color palette — establish your background, text colors, and single accent. Resist using more than 4–5 colors.
3. Spacing and rhythm — set generous spacing rules; consistent rhythm between sections.
4. Hero section — the highest-stakes section; spend extra time on first-impression details.
5. Sections in order — refine About, Projects, Experience, Skills, Contact, Footer, one at a time.
6. Interactions and animations — subtle, purposeful, never gratuitous.
7. Dark mode (optional) — many portfolios benefit from a dark mode toggle; do this last.
8. Micro-details — favicon, OG image for social sharing, the cursor style, mobile-specific tweaks.

Each step is a separate prompt. After each prompt, look at the result, decide if you're satisfied, and move to the next. Don't merge multiple polish layers into one prompt — the output gets messy fast.

Step 6 — A Real Polish Walkthrough: From Generic to Intentional

Let's walk through a concrete example of polishing one section — the Hero — using the references we've discussed.

Starting point (after Article 04): A generic centered hero with the user's name in default sans-serif, a brief tagline, and a primary blue CTA button. Functional but unremarkable.

Reference observations from your board:

Polish prompt:

Polish the Hero section with these specific changes:
Layout:
Switch from centered to left-aligned (text reads left, no

  centered content)
Remove the placeholder image; keep it text-only
Typography:
My name: very large serif (Playfair Display, 600 weight),

  size clamp(3.5rem, 9vw, 7rem), with tight line-height (1.0)
Tagline: sans-serif (Inter regular), size 1.25rem, line-

  height 1.6, in slightly muted color
Position both with generous left padding (matching the rest

  of the page's left margin)
Status indicator:
Add a small dot indicator above the name, with text like

  "Currently open to senior PM opportunities" — small text,
  with a tiny pulsing green dot (#10B981) before the text
The whole indicator should be subtle, ~0.875rem text size
Primary CTA:
A "Schedule a call" button in the sage green accent color

  (#849F8C), with the text in white
Just below the button, in much smaller text, a secondary

  link: "Or email me directly" linking to mailto:
Button has subtle hover: darken by ~10% on hover, no

  scale or movement
Spacing:
Hero should take 80vh minimum height (gives it presence

  without being a full-screen takeover)
Generous spacing between name, tagline, status indicator,

  and CTA
Don't change other sections in this prompt.

Result: The hero now feels intentional. The serif name carries authority. The status indicator with a small dot signals "available without screaming about it." The sage CTA punctuates the otherwise restrained palette. The left alignment matches reference sites you respected.

Repeat this approach for each remaining section. After about 90 minutes of focused work, your entire portfolio has been polished section-by-section, with each polish decision grounded in your reference observations.

Step 7 — Publish to Production

Once you're satisfied with the polish across all sections, it's time to publish to Production.

Click Publish in v0's top-right. If you've been publishing to Preview during iteration, click Publish to Production to promote your latest work to the production deployment.

Your portfolio is now live at one of two URLs:

Take three minutes to verify:

That last question is the truest test of whether your polish work succeeded. If the first-impression answer matches your goal statement from Article 04, you've done it.

Common Mistakes to Avoid

Three patterns that derail polish work.

Mistake #1: Trying to copy a single reference too closely. Beginners often pick one favorite reference and try to clone it. The result feels uncanny — close to the original but missing the original's coherence. Stronger approach: extract principles from 5–9 references and apply the principles, not the specifics. Your portfolio will feel original because the combination is yours alone.

Mistake #2: Polishing in random order. Adjusting animations before typography means you'll redo the animations after changing typography. The order in Step 5 — typography → colors → spacing → hero → sections → animations → dark mode → details — saves significant rework.

Mistake #3: Over-designing the small details. Custom cursors, gratuitous animations, novel layouts that break common conventions. Each one of these has a cost (slower load time, accessibility issues, distraction from content). The strongest portfolios are restrained — they have one or two distinctive details, not seven.

Going Further

Buy a custom domain if your portfolio is ready for it. Article 02's domain workflow takes 15 minutes and costs $10. A custom domain signals "this is serious" in a way .vercel.app URLs don't. If your portfolio is part of an active job search or freelance pitch, this is the right time to commit.

Set up Vercel Analytics. Free, one-click integration in v0. You'll see how many people visit your portfolio, where they come from, and which sections they engage with. Real data is much more useful than guessing about whether your portfolio is working.

Plan a refresh cycle. Portfolios go stale. Pick a recurring time (every quarter, or every job change) when you'll spend 30 minutes updating the latest project, sharpening the About section, and re-checking the design feels current. Coming back to a v0 project is far easier than rebuilding from scratch.

Read the next article — Article 06 starts App #2 with the SaaS Waitlist Landing Page. Different goal (lead capture instead of personal branding), different design language (more product-marketing), different complexity (forms + data). Most patterns from Articles 04–05 carry over.

Key Takeaways

Here's what you learned in this guide:

Your portfolio is now substantially better than the version from Article 04 — and substantially better than the generic AI-generated portfolios that recruiters now see weekly. The skill you built in this article — translating visual references into specific v0 prompts — transfers to every future v0 project. Landing pages, dashboards, marketing sites, internal tools: the polish process is the same. Master it on your portfolio; apply it everywhere.