What problem does it solve?
Turning a screenshot, mockup, or generated design image into working frontend code is slow and error-prone, often producing static pages with placeholder art that miss the original design. This Skill converts a confirmed visual target into a faithful, interactive React prototype with generated image assets and a blocking design QA gate.
Core Features & Use Cases
- Faithful visual recreation: Measures layout, spacing, typography, and sections from the reference image, then rebuilds them in a Vite + React prototype.
- Real asset generation: Catalogs every image in the design and generates matching assets with the Image Gen tool, forbidding CSS art, inline SVGs, and placeholder boxes.
- Interactive build with QA gate: Implements functional controls, hover states, and navigation, then runs a design-qa comparison against the reference until the report passes.
- Use Case: A designer shares a landing page mockup; the Skill bootstraps a local prototype, generates hero and thumbnail imagery, builds the interactive page, captures screenshots, and iterates until the QA report matches the source.
Quick Start
Provide a screenshot or mockup and ask the agent to recreate it as a working responsive web app after confirming the design brief.
