Frontend Image To Code

Frontend Image To Code

Use this skill when visual reference quality matters before implementation.

Routing

• Read references/imagegen-frontend-web.md when generating website section concepts or visual direction.
• Read references/imagegen-frontend-mobile.md when generating mobile app screen concepts or flows.
• Read references/image-to-code.md when implementing a site or app from a provided/generated image.
• Read references/stitch-design-taste.md when producing semantic design system guidance for Google Stitch or similar tools.
• Read references/ui-to-vue.md when converting screenshots/design exports into Vue 3 components.

Workflow

1. Identify whether the task needs image generation, image analysis, implementation, or conversion.
2. Preserve the repo's existing stack and design system unless the user asks for a new direction.
3. Translate visual details into concrete layout, spacing, typography, color, state, and responsive decisions.
4. Implement with accessible native controls and stable responsive constraints.
5. Verify against the reference with screenshots or visual inspection when possible.

Output

Summarize the visual source used, implementation scope, and verification result.