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:

• Create several distinct website or page concepts before coding.
• Turn an image or generated design into a real frontend page.
• Produce a detailed prompt another coding agent can use to build a design.
• Replicate a screenshot as real HTML/CSS/React rather than as an image.
• Iterate on visual details like spacing, scale, typography, media treatment, visual systems, component alignment, interaction states, or responsive breakpoints.

Do not use this skill for ordinary business-logic changes, backend features, simple copy edits, or design critique that will not lead to generated images, a detailed implementation prompt, or frontend code.

Non-Negotiable Image Gate

The first deliverable is always four generated images. Do not jump straight to text prompts, implementation prompts, or code.

Required behavior: