What problem does it solve? Visually important website builds often drift into generic, cluttered, low-quality frontend output when coding starts without a concrete visual reference. This Skill enforces an image-first workflow so the implemented site faithfully matches a deliberate, art-directed design. ## Core Features & Use Cases - Image-First Workflow: Generates section-specific design images first, deeply analyzes typography, spacing, color, and components, then implements the frontend to match. - Section-by-Section Generation: Produces one large readable image per section plus optional detail/extraction images, avoiding unreadable compressed multi-section boards. - Anti-Drift & Anti-Slop Rules: Prevents nested-box layouts, micro-UI clutter, generic gradients, and design drift between the reference images and the coded result. - Use Case: Ask for a premium 8-section SaaS landing page; the Skill generates 8 section images, extracts the design system from them, and builds a faithful, clean, responsive frontend. ## Quick Start Use the image-to-code skill to design and build a premium landing page with a hero, features, testimonials, and pricing section.
