image-to-code

Generate section-specific design images first, then deeply analyze each image for typography, spacing, colors, buttons, and layout before writing code. The implementation should preserve the layout logic, spacing rhythm, and visual identity of the reference images rather than drifting into generic templates.

The image-first workflow has three mandatory stages: generate design images, deeply analyze them as a design specification, then implement the frontend. Coding begins only after the visual references exist and have been inspected, since the images are the primary source of truth.

Generate one large, readable image per section rather than compressing many sections into a single board. If a section's text, buttons, or spacing are unclear, generate additional detail images or regenerate the section as a fresh standalone render.

No. Cropping destroys spacing accuracy, type scale relationships, and layout proportions. Instead, generate a fresh standalone image for that section using the same palette, typography mood, and component family, optimized for readability and extraction.

Direct coding is acceptable only when the task is mostly technical, such as a bug fix, when the user provides a precise existing design system, or when the work is structural rather than visual. Any request described mainly in visual terms should trigger image generation first.

This is design drift: implementations collapse into default templates, tight spacing, and plain typography. Prevent it by preserving the reference's layout logic, generous spacing, typography mood, and component style, and by generating extra detail images whenever details are ambiguous.