ux-ui-maxpro

A playbook for reproducing a reference UI exactly, on this repo's design system, without drifting into approximation or fabricated content. Optimized for the snapcn stack (Next.js App Router + Tailwind v4 + token-driven app/globals.css, DESIGN.md rules), but the method is stack-agnostic.

The one rule

Measure before you type. Never eyeball a reference straight into code. Extract a written spec first; code against the spec. Guessing produces "close-ish", and "close-ish" is exactly what the user rejects when they say "not even a single change".

1. Extract a spec from the reference

Read the screenshot(s) like a design system and write down concrete numbers before touching any file: