Img to Frontend

Overview

Use this skill to run an image-first design-to-code workflow for visually appealing awwward winning websites. It must adapt to the user's brief, audience, content model, interaction needs, and brand intent rather than forcing a fixed category or visual trope.

The workflow is intentionally staged:

1. Invoke $imagegen to create four distinct website/page design images.
2. Stop so the user can select the image or images to use as the design reference.
3. Translate only the selected image into a precise implementation prompt.
4. Build the real page and iterate against screenshots until structure, hierarchy, typography, spacing, color, media treatment, component geometry, interactions, and responsive behavior are close to the reference.

Load references/visual-iteration-checklist.md for design variety, implementation, close visual replication, premium website work, complex UI sections, or repeated visual refinement.

When To Use

Use this skill when the user asks to: