What problem does it solve? Visually important website builds often drift into generic, cluttered, or low-fidelity frontend code because the design intent is never captured as a concrete reference. This Skill enforces an image-first workflow so the generated design images act as the source of truth before any code is written. ## Core Features & Use Cases - Image-First Workflow: Generates one large, readable reference image per website section, deeply analyzes typography, spacing, color, and components, then implements the frontend to match. - Anti-Drift and Anti-Slop Rules: Prevents nested-card layouts, micro-UI clutter, unreadable compressed boards, and generic coded reinterpretations through explicit design constraints. - Extraction-Oriented Regeneration: Creates fresh standalone detail images instead of cropping when text, buttons, or spacing are too small to analyze. - Use Case: Ask for a premium 8-section SaaS landing page; the Skill generates 8 section images, extracts the design system from each, and produces a faithful, breathable, responsive implementation. ## Quick Start Use the image-to-code skill to design and build a premium landing page with a hero, features, testimonials, and pricing section.
