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 code, then deeply analyzes typography, spacing, colors, buttons, and layout. - Extraction-Oriented Regeneration: Creates fresh standalone detail images instead of cropping old ones whenever text or components are too small to analyze. - Faithful Design-to-Code Translation: Implements the frontend to match the generated references closely, avoiding design drift, nested-box layouts, and generic AI-style clutter. - Use Case: Ask for a premium 8-section landing page; the skill generates 8 section images, extracts the design system from each, then implements the page section by section. ## Quick Start Use the image-to-code skill to design and build a premium landing page with a hero, features, testimonials, and pricing section.
