← portfolio case study 01
facelift · ai website redesign pipeline

Point it at a website. Get a better one back — provably.

A tool that extracts any site’s real, rendered design language and generates a modern redesign. The interesting part isn’t the AI — it’s the measurement: an adversarial 18-site audit showed the first version botched 11 of 18 sites. One root-cause fix later, the same audit read 2 of 18 — and that audit is now the permanent regression suite.

botched sites, same 18-site audit11 → 2
mean failure severity / 53.4 → 1.6
cheaper per premium run13×
automated tests, all green203
render modes6
public at /facelift/LIVE
facelift before/after — a dated site on the left, the generated modern redesign on the right
before → after on a real site, generated by the pipeline (self-captured)

The challenge

Most sites don’t look dated because of one bad choice — it’s font sprawl, low contrast, flat spacing, no depth, all at once. The goal: paste a URL and get back a redesign that keeps the brand but fixes the system. Extraction had to read the rendered truth (Playwright walking computed styles element by element), not the declared CSS; generation had to preserve the brand hue and repair every key pairing to WCAG-AA; and the whole thing had to survive the modern web — SPAs, theme builders, CSS-in-JS.

The dead end — shipped it, then measured it

Version one stripped the site’s CSS and reskinned the bare DOM. It demoed beautifully on simple pages. Then an 18-site adversarial audit (news, gov, edu, SPAs, theme-built shops) graded every output: 5 wins, 2 acceptable, 11 botched — mean failure severity 3.4/5. One root cause explained nearly everything: author CSS holds load-bearing layout and visibility state, and deleting it meant:

11 siteshidden mobile-menu chrome un-hid and rendered as duplicate navigation 9 sitesflex/grid navs collapsed into vertical bulleted lists 11 sitesCSS-painted hero imagery vanished entirely

The reskin logic itself was fine — the wins proved that. The approach was wrong.

The fix, re-measured on the same 18 sites

Same day: an overlay mode that keeps author CSS and overrides only color, type, radius and shadow — it structurally cannot collapse a page — plus an auto-probe that routes simple semantic pages to the bold reskin and everything else to overlay, and a frozen-DOM capture for app-shell SPAs. Re-running the identical audit: botched 11 → 2, severity 3.4 → 1.6, wins 5 → 11. The two residuals (pure client-streamed SPAs) are now detected and warned about instead of silently broken. The audit harness became the regression suite — every later change gets measured against it.

The ceiling, and the pivot to redesign

Scored against a quality rubric, no reskin broke ~5.5/10 — preserving a mediocre structure preserves mediocrity. So the pipeline gained a rebuild mode: extract the site’s actual content (headings, sections, images, social links, even on-chain contract addresses) and have a vision model design a brand-new page from it. Premium runs three art-direction personas in parallel and a vision judge ranks them. Every AI output must pass deterministic render gates — blank-page, content-loss, duplicate-text — with automatic fallback down the mode ladder, so the pipeline degrades gracefully instead of hard-failing.

Never trust the judge

A premium champion once scored 91/100 from the vision judge while its headlines rendered visibly doubled — a CSS pseudo-element trick the generator loved re-wraps independently of its host text. The judge missed it twice. The fix went in at four layers: a deterministic duplicate-text gate, a prompt-level ban on the technique, a judge rubric that scores echoed text as broken, and a code-level score cap. The durable lesson: every “the AI made it worse” complaint traced to a mechanical bug, not taste — so verify the rendered output; never take the judge’s word for it.

Cost engineering & hardening

All LLM calls sit behind one adapter that routes by model id, so swapping vendors is an env var. Migrating generation off a frontier model to a cheaper one took a premium run from $1.55 to $0.12 (~13×) — after banking the gotcha that reasoning models bill their thinking tokens inside the output budget, which was silently truncating generated pages. Model choices are bake-offs, not vibes: the bigger frontier model lost its head-to-head on redesign quality, and a fashionable alternative went 0-for-6 against the incumbent. A five-agent adversarial security audit added ~30 fixes — an SSRF bypass via IPv4-mapped IPv6 found live, a </style> breakout, iframe sandbox de-escalation — and the suite now stands at 203 tests, all green (re-verified today).

What’s next

Richer content extraction (testimonials, pricing, structured sections), per-section imagery, and stronger CTA promotion — the current redesign ceiling is ~8/10 on the internal rubric, and the next points live in information architecture, not styling.