What problem does it solve? Visual website builds often drift into generic, cluttered layouts when coded directly without a concrete design reference, producing unreadable typography, nested card clutter, and inconsistent spacing. ## Core Features & Use Cases - Image-First Workflow: Generates one large, readable reference image per website section before writing any frontend code, then deeply analyzes typography, spacing, colors, buttons, and layout. - Design Extraction Discipline: Extracts visible text, type scale, palette, component styling, and spacing rhythm from generated images so the coded result stays faithful to the design. - Anti-Slop Guardrails: Enforces clean heroes, generous spacing, no cards-inside-cards, no micro-UI clutter, and consistent multi-image brand coherence. - Use Case: Ask for a premium 8-section SaaS landing page; the skill generates 8 section images, analyzes each, regenerates unclear sections as fresh standalone images, then implements the site to match. ## Quick Start Use the image-to-code skill to design and build a premium landing page with a hero, features, testimonials, and pricing section.
