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.