Rebuilding Vantage Fit
entirely in code.

01 — Overview

I stopped handing off designs — and built them.

For years my work ended at handoff: design a screen, pass it to engineers, wait. This project broke that wall. In March 2026 our engineering lead migrated the old Gatsby site's blog into a fresh Astro repo. I joined eight days later — and then rebuilt nearly every marketing surface of vantagefit.io myself, in code, learning as I went through AI-assisted vibe coding. I designed this site originally, so I knew exactly how every page should look. Now I could make it look that way with my own hands.

Between March 29 and July, I made ~350 commits and added around 50,000 lines — the most of any of the repo's fifteen contributors. Going from "I design websites" to "I ship websites" is the biggest leap of my career so far.

02 — The challenge

Learn to build — without losing the design.

I was a designer, not an engineer. Every concept was new: semantic HTML, how layout actually works in CSS, what JavaScript does, version control, deployments. And I wasn't learning on a toy project — this is the live marketing site for a real product, with traffic, SEO history, and four languages to keep intact.

• Learn HTML, CSS & JS well enough to build a real site
• Match the live Gatsby site page by page, then surpass it
• Hold my own design bar while writing the code myself
• Use AI as a teacher and a pair, not a crutch
• Keep it maintainable for the team, not just working

03 — Process

Vibe coding, one concept at a time.

The git history doesn't hide the learning curve, and I like that. Early April was trial and error: one day I made about twenty-five single-property CSS commits on one page. It once took me five commits just to get a "Most Popular" badge to sit where I wanted. I built a scroll parallax for the homepage, evaluated it honestly, and deleted it. Slowly the unfamiliar words became everyday tools — a class, a flexbox, a commit, a deploy — and the commits got bigger while the fixes got smaller.

• Learn — HTML & CSS structure first, then JS behaviour
• Build — rebuilt the site page by page against the live one
• Systemise — wrote a 2,900-line style guide as I went, so every decision stuck
• Version — learned Git properly: branches, rebases, real commit messages
• Iterate — refined with AI alongside me, but shipped it myself

04 — The build

Nearly every page on the site, plus things a designer shouldn't be able to ship.

The homepage, the whole blog platform (search, tags, pagination, article typography), the pricing page — twice — case studies, guides, feature and solution pages, the wellness-challenge pages, five competitor comparison pages plus two brand-new ones, around twenty tools-and-templates pages, and campaign landing pages like HR Challenge League. I also brought the Spanish, German, and French versions up to design parity with the English site.

Then it went past pages. I built an interactive Employee Wellness ROI calculator with a results dashboard, and a serverless function that emails users a branded PDF report — actual backend code. I cut page weight roughly in half on the heaviest pages. And I wrote my own tooling: a Puppeteer-based "brand police" script that loads pages and checks their computed styles against my style guide, so brand drift gets caught by a robot instead of my eyes.

05 — Outcome

A live site — built by the person who designed it.

The rebuilt site is live at vantagefit.io today, and I'm the one shipping changes to it. The style guide I wrote keeps the design consistent whether it's me or someone else committing, and the brand-audit tooling checks the whole site automatically. What started as "can a designer learn to code?" ended with me owning the front end of the product's marketing site.

06 — What I learned

The wall between design and code was never real.

Building my own designs taught me things no handoff ever could — why a layout that's easy to draw can be hard to build, how spacing really behaves in a browser, and where my design decisions cost or save effort in code. AI turned out to be an incredible teacher if you stay curious and do the work yourself. Shipping teaches you things designing alone never will. This is the pivot the rest of my work now flows from.

I wrote about the whole journey on Medium: From UI Designer to Design Engineer ↗ and One Designer. One Terminal. An Entire Website. ↗