What problem does it solve? Visual website builds often drift into generic, cluttered, low-quality frontend output when coding starts without a concrete design reference. This Skill enforces an image-first workflow so the generated design images act as the visual source of truth before any code is written. ## Core Features & Use Cases - Image-First Workflow: Generates one large, readable design image per website section, deeply analyzes typography, spacing, color, and components, then implements the frontend to match. - Extraction-Oriented Regeneration: Creates fresh standalone detail images instead of cropping old ones when text, buttons, or spacing are too small to analyze. - Anti-Slop Design Discipline: Enforces clean heroes, generous spacing, no nested card stacks, no micro-UI clutter, and consistent multi-image design language. - Use Case: Ask for a premium 8-section SaaS landing page; the Skill generates 8 section images, extracts the design system from each, and implements a faithful responsive website. ## Quick Start Use the image-to-code skill to design and build a premium landing page with a hero, features, testimonials, and pricing section.
