What problem does it solve?
Turning a visual design idea into a real, high-fidelity web page usually requires guessing at layout, typography, and spacing. This Skill enforces an image-first workflow: it generates four distinct design concepts, waits for your selection, writes a granular build prompt, and iterates against screenshots until the coded page closely matches the reference.
Core Features & Use Cases
- Four-Concept Image Generation: Uses the $imagegen skill to produce four meaningfully distinct website/page design images before any code is written.
- Detailed Build Prompts: Converts the selected image into a precise implementation prompt covering canvas, grid, typography, color tokens, components, motion, and acceptance criteria.
- Screenshot Iteration Loop: Builds the page as real HTML/CSS/React and repeatedly compares screenshots against the reference across desktop, tablet, and mobile widths.
- Use Case: Ask for a landing page for a new product; review four generated design directions, pick one, and receive a working responsive page refined until it visually matches the chosen mockup.
Quick Start
Use the img-to-frontend skill to generate four design concepts for my SaaS landing page, then build the one I select and iterate until it matches the reference.
