What problem does it solve? Building visually polished frontend applications from scratch often results in generic, template-looking UIs with inconsistent typography, colors, and spacing. This Skill enforces a design-first workflow where an image-generated concept becomes the binding spec, then verifies the browser implementation against it until it reaches agency-signoff fidelity. ## Core Features & Use Cases - Concept-first design workflow: Generates section-by-section image concepts for landing pages, dashboards, games, and app screens, then extracts a design system (tokens, typography, components, icons) before any code is written. - Faithful implementation: Builds React + Vite apps or static pages that match the accepted concept exactly, with generated assets for logos, hero imagery, product renders, and game sprites. - Rigorous visual QA: Compares browser screenshots against the accepted concept using a written fidelity ledger covering copy, palette, typography, icons, spacing, and responsive behavior. - Use Case: Ask for a new SaaS landing page; the Skill generates per-section design concepts, gets your approval, implements the page section by section, and iterates until the rendered result matches the approved design. ## Quick Start Design and build a new landing page for my SaaS product, starting with image-generated section concepts for my approval before writing any code.
