Design — Image To Code

Reproduce a reference image as a real, runnable frontend — verified by screenshot diff, not "looks roughly like it". The discipline that separates this from generic codegen: you measure the result against the reference and iterate until the gap is minor and explainable.

When to use

• You have a mockup/screenshot (from a designer, design-ideate, or generated) to implement.
• "Build this design", "code this screenshot", "make this real".
• Recreating a UI you can see but don't have code for.

When NOT to use

• The source is a live site (you can hit its URL/HTML) → design-url-to-code (it can extract real CSS).
• No image yet, just an idea → design-ideate.
• You need interactivity/flow wiring, not a static match → design-prototype (run this first to build screens).

Inputs

• The reference image(s) (path).
• Target stack: ask; default to matching the repo, else React + Vite + Tailwind + TS.
• ./design/context.md constraints if present.