image-to-code

Generate section-specific design images first, then deeply analyze each image for text, typography, spacing, colors, and components before writing code. The skill enforces this image-first workflow so the implementation stays faithful to the visual reference instead of drifting into generic layouts.

Generate one large readable image per section, so a four-section page gets four images and an eight-section page gets eight. Add extra detail images when text, buttons, or spacing are too small to analyze reliably.

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.

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. Visual tasks like landing pages and redesigns require image generation first.

This is design drift, where implementation simplifies into generic templates and compressed spacing. Prevent it by preserving layout logic, spacing rhythm, typography mood, and component style from the analyzed images instead of substituting default patterns.