Screenshot to Code

Treat the screenshot as visual evidence, not merely inspiration. Reproduce its design language and visible behavior while keeping the implementation responsive, accessible, and maintainable.

Operating standard

Work in five gated phases. Do not skip directly from seeing the screenshot to polishing CSS:

1. Discover — understand the screenshots, repository, target route, available assets, and runtime.
2. Specify — turn visual evidence into layout, token, component, content, state, and responsive decisions.
3. Construct — build semantic structure and correct macro geometry before fine styling.
4. Compare — render at controlled viewports and measure differences against the references.
5. Refine — fix the highest-impact mismatch, recapture, and repeat until the completion gate passes.

Favor visual fidelity over personal design preference, and engineering quality over screenshot-only hacks. A strong result must satisfy both.

Start with context