What problem does it solve? Visual website builds often drift into generic, cluttered layouts when coding starts without a concrete design reference. This Skill enforces an image-first workflow so the generated design images act as the source of truth before any frontend code is written. ## Core Features & Use Cases - Image-first workflow: Generates one large, readable reference image per website section, then deeply analyzes typography, spacing, colors, buttons, and layout before implementing code. - Extraction and regeneration rules: Creates fresh standalone detail images instead of cropping, and regenerates unclear sections to keep text readable and implementation faithful. - Anti-slop design discipline: Applies hero minimalism, anti-nested-box, micro-UI clutter reduction, and responsive first-view rules to avoid generic AI-looking output. - 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 frontend matching the references. ## Quick Start Use the image-to-code skill to design and build a premium landing page with a hero, features, testimonials, and pricing section.
