What problem does it solve? AI-generated websites often collapse into generic layouts with unreadable mockups, nested card clutter, and design drift between the visual concept and the coded result. This Skill enforces an image-first workflow where design reference images are generated, deeply analyzed, and faithfully translated into frontend code. ## Core Features & Use Cases - Image-First Workflow: Mandates generating section-specific design images before any coding, with one large readable image per website section instead of compressed multi-section boards. - Deep Design Extraction: Systematically analyzes typography, spacing, colors, buttons, and component logic from generated images before implementation. - Anti-Drift Implementation: Preserves layout rhythm, spacing generosity, and visual identity during coding, avoiding generic templates and nested-box clutter. - Use Case: When asked to build a premium landing page with hero, features, testimonials, and pricing sections, the Skill generates four separate section images, extracts the design system from each, then implements a faithful frontend. ## Quick Start Use the image-to-code skill to design and build a premium 8-section landing page for a startup product.
