Screenshot to Code

Recreate the UI in the image as clean, responsive, accessible code, then check the render against the image.

Workflow

1. Pick the target stack. If the user is inside a project, match it: read package.json for React/Next/Vue and the Tailwind version, and reuse existing components, tokens, and icon libraries. Do not ask when the repo already answers it. With no project:

   • Single screen or quick prototype: one self-contained index.html (Tailwind via the browser build, see references/stack-setup.md).
   • App or multi-screen: React + TypeScript + Tailwind v4 on Vite.
   • User mentions Next.js, SSR, or routing: Next.js App Router.

2. Write a short spec before coding. Looking at the image, note:

   • Layout regions top to bottom (nav, hero, sidebar, grid, footer) and the grid or flex structure of each
   • Design tokens: 3-6 colors as hex, font family guess and the type scale, spacing rhythm (usually multiples of 4px), corner radius, shadow style
   • Repeated components (cards, list rows, buttons) that should be one component with props
   • What the image cannot show: hover and focus states, mobile layout, real data, content below the fold

   Estimate sizes from the image resolution. If the screenshot is 2x (a Retina capture 2880px wide is a 1440px layout), halve the pixel measurements.