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 reference 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 images, avoiding unreadable compressed multi-section boards and cropped fragments. - Anti-Generic Design Rules: Applies a combinatorial variation engine and anti-slop rules covering hero minimalism, spacing discipline, nested-box avoidance, and typography extraction. - 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 responsive implementation. ## Quick Start Use the image-to-code skill to design and build a premium landing page for my startup, generating section reference images first and then implementing the site to match them.
