A timed benchmark — reference URL to deployed structure in 30 minutes.
A timed benchmark, not a deliverable. The question on the table: how fast does the practice go from a reference URL to a deployed structural reimplementation.
~30m
zero to deployed
reference URL → live alias
213 KB
production bundle
gzipped
2
commits, single session
no team, no rework
1×
reference site matched
tier-1 European agency build
— The Brief
A peer asked the question every prospective client eventually asks: "If I gave you a reference site I liked, how close could you get and how fast?" The honest answer is a stopwatch and a URL.
— Diagnosis
A tier-1 European residential developer site was selected — a tightly-art-directed brand artifact built by a flagship global agency. The brief: match the structure, the color system, the typography hierarchy, the section composition, with original copy and stock imagery. Single session, no team, full deploy.
— How I Read It
First-person · operator's note
A peer asked me a stopwatch question and I refused to answer in words. I picked the hardest reference URL I could find — a tier-1 European agency build — because if I beat the reference and the answer was honest, every subsequent timeline question got cheaper. The discipline was order: tokens first, structure second, copy substitution third, deploy last. I was not optimizing for closeness to the original; I was optimizing for non-fakeability. The benchmark holds because I didn't stop the timer, didn't go back to polish, didn't cherry-pick the screenshots. The clean alias is the receipt.
— Process
- 010–5 min
Token extraction
DOM inspection. Color tokens, type scale, spacing rhythm.
- 025–22 min
Structural rebuild
Vite + React + Tailwind. Component-by-component, top to footer.
- 0322–27 min
Substitution
Original German copy. Inter for the proprietary face. Unsplash imagery.
- 0427–30 min
Deploy
Hooks pass. Build clean at 213 KB. Live alias.
— The Build
01 · Token extraction
DOM inspection of the reference site to capture the exact color tokens, type scale, weight stack, spacing rhythm, and layout grid.
02 · Structural rebuild
Vite + React + Tailwind, component-by-component: header, panel-style hero, feature trio, two project grids, four alternating CTA bands, contact, footer.
03 · Original substitution
Original German copy in identical content slots. Inter as substitute for the proprietary display face. Unsplash imagery in identical card frames.
04 · Deploy
Pre-commit hooks passed, build clean at 213KB, deployed to Vercel on a clean alias. Zero to live URL inside the session window.
Match a tier-1 agency in 30 minutes, and every other deadline question gets cheaper.
"Tier-1 European structure, deployed inside the meeting that asked the question."
— Artifacts Delivered
- 01Deployed site at a clean Vercel alias
- 02Private GitHub repo, two commits
- 03Side-by-side comparison screenshots (desktop + mobile)
- 04Component inventory with reuse notes
— Outcome
The benchmark holds. Same playbook applied to a pitch deliverable would land inside one working day with substantial polish budget remaining.
— Receipts
- ✓live URL inside the session window
- ✓pre-commit hooks passed on first run
- ~1dprojected for full polish on a pitch deliverable