recreate-screenshot

Analyze the screenshot systematically first: extract exact hex colors, font sizes and weights, spacing values, and a component inventory. Then build the screen matching layout, colors, typography, and content exactly, and validate the output against a visual checklist.

Extract colors as hex values directly from the image rather than approximating, covering backgrounds, accents, text colors, borders, and gradients. Define them as CSS custom properties or theme tokens and never substitute close-enough values.

Yes, the build matches the project's existing framework, so React with Vite produces a React component and Expo produces a React Native component. Without project context, a self-contained mockup component is created instead.

Avoid it when you want a functional app merely inspired by a design, a live website cloned by URL, a redesign of an existing component, or a UI described only in words without an image. Those cases call for general development or design-exploration workflows.

Common causes are slightly off hex colors, wrong font weights, incorrect padding or gap values, and missing box-shadows. Re-extract colors from the image, try adjacent font weights, and check border-radius values like 4px, 8px, or 9999px for pills.