image-to-code

Generate section-specific design images first, then deeply analyze them for typography, spacing, colors, buttons, and layout before writing code. The generated images serve as the visual source of truth, and the implementation should preserve the design language rather than drift into generic templates.

The workflow is image generation first, deep image analysis second, and implementation third. For each requested section you generate a dedicated readable image, extract the design system from it, and only then write the frontend code to match.

Generate one large image per section so text, buttons, and spacing stay readable and analyzable. If a section lacks detail, generate an additional closer extraction image or regenerate it as a fresh standalone image rather than cropping from a larger board.

Design drift happens when implementation simplifies distinctive sections into generic templates or compresses generous spacing. Prevent it by preserving layout logic, typography mood, color palette, and component family exactly as extracted from the reference images.

Direct coding is acceptable when the task is mostly technical, such as a bug fix, when the user provides a precise design system, or when the work is structural rather than visual. For visually driven requests, image generation should come first whenever it is available.