image-to-code

Generate section reference images first, then deeply analyze each one for text, typography, spacing, colors, buttons, and layout structure. Implement the frontend only after this analysis, preserving the visible design language instead of drifting into generic templates.

Generate one large readable image per section: four sections means four images, eight sections means eight images. If a section's text or components are too small to analyze, generate an additional detail image or regenerate that 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 when the task is mostly technical, such as a bug fix, when the user already provides a precise design system, or when the work is structural rather than visual. For any visually driven request, the image-first workflow is mandatory.

This is design drift: the implementation simplified distinctive sections into default templates. Prevent it by preserving layout logic, spacing rhythm, typography mood, and component style from the analyzed images, and never reintroduce nested-box complexity the design avoided.