react-screenshot-recreator

React Component Screenshot Recreator

Turn a screenshot of an interface into React code that a designer would look at, next to the original, and struggle to tell apart.

The failure mode this skill exists to prevent is the plausible approximation: code that captures the gist — a card, a heading, a button — while getting every spacing value, weight, radius, and shadow slightly wrong. The result feels like a sketch of the design rather than the design. Slightly wrong everywhere reads as unmistakably wrong.

Two habits prevent it. First, measure before you write — read values off the image instead of reaching for defaults. Second, reason about intent — real interfaces are built on a spacing scale, a type ramp, and a small palette, so when one value is ambiguous, infer it from the system the rest of the design reveals.

Workflow

1. Audit the screenshot — a written pass over layout, type, color, effects, and state. Details you don't name, you won't build.
2. Derive the design system — spacing unit, type ramp, palette, radius scale, shadow scale.
3. Plan the component tree — decide what's reusable before writing any JSX.
4. Write the code — TypeScript, Tailwind, semantic HTML, lucide-react icons.
5. Verify against the image — walk the audit list and check each item landed.

Steps 1 and 5 are what separate a recreation from an approximation. Don't skip them, and don't collapse the audit into a single glance — writing the observations down is what makes them actionable.

---

Step 1 — Audit the screenshot

Look at the image carefully and write out what you see, before any code. If multiple screenshots were provided (different breakpoints, states, or scroll positions), audit each and note what changes between them — that's free information about responsive and interactive behavior.

Zoom mentally into each region. State values as numbers, not adjectives: "24px gap", not "generous spacing". A number can be translated to Tailwind; an adjective can't.