I Used v0 as a Figma Replacement, Not a Code Generator — Here's the Workflow

I'm building HomeAfford, a mortgage affordability calculator, in Next.js with TypeScript and Tailwind CSS.

Before writing any code, I prompted v0 by Vercel to generate the full UI: landing page, calculator interface, pricing page, and feature sections. The result looked great — clean layout, solid component
structure, good visual hierarchy.

Then I looked at the code.

Everything was calculated on the frontend. The code was messy. Files were huge.

So I made a decision: keep the design, rewrite the code.

I treated v0's output exactly like a Figma mockup — a visual reference, not a codebase. Then I built four things from scratch:

** 1. Landing page — based on v0's layout but with real components

1. Google authentication — not generated by v0 at all
2. Mortgage calculator — actual math, real inputs, dynamic results
3. Pricing page — connected to real tier logic**

The 3-step workflow I'm using going forward

**1. Design with AI — use v0/similar tools to explore layouts fast

1. Evaluate the output — keep what works visually, ignore the code
2. Build it yourself — use the design as a reference and write production code**

This isn't an anti-AI take. v0 genuinely saved me time I would've spent in Figma. But knowing where AI helps and where it doesn't is the skill.

I recorded the full process: https://youtube.com/watch?v=YvLX88Fr-y0

This is the first in a series building HomeAfford from scratch. Next up: the technical deep dive into the calculator logic.