Image to Code

Translate visual references into a working interface while preserving the user's content, product requirements, repository conventions, and chosen style.

Routing

• If the user asks only for design reference images, use imagegen-frontend-web.
• If the user provides a Figma file requiring design data, use the Figma implementation workflow.
• If no visual reference exists, generate one only when the user requested an image-first workflow or when image generation is already authorized by the task.
• If the user selected a named style, use it as the art direction; do not merge incompatible style mandates from other visual skills.

Workflow

1. Read project instructions and inspect the current frontend stack, routes, tokens, assets, and reusable components.
2. View every supplied reference at useful resolution. If generating references, read references/image-generation.md.
3. Analyze layout, typography, color, spacing, media, components, responsive behavior, and interaction intent. Use references/visual-analysis.md for complex references.
4. Map the visual system onto existing project primitives. Preserve real product copy and behavior unless the user asked for a rewrite.
5. Implement the complete requested surface, including loading, empty, error, focus, hover, and reduced-motion states where applicable.
6. Render at representative viewport sizes and compare with the reference. Fix the largest visible differences first. Read references/implementation-and-verification.md for the fidelity loop.