What problem does it solve? Visually important website builds often drift into generic, cluttered, low-quality frontend output when coding starts without a concrete visual reference. This Skill enforces an image-first workflow so the implemented site faithfully matches a deliberate, art-directed design. ## Core Features & Use Cases - Image-first workflow: Generates section-specific design images first, deeply analyzes typography, spacing, color, and components, then implements the frontend to match. - Section-by-section generation: Produces one large readable image per section (plus optional detail images) instead of one compressed unreadable board, and regenerates unclear sections as fresh standalone images rather than cropping. - Anti-slop design discipline: Applies rules against nested card layouts, micro-UI clutter, generic gradients, overlong hero headlines, and design drift during implementation. - Use Case: Ask for a premium 8-section SaaS landing page; the Skill generates 8 section images, extracts the design system from them, and builds a faithful, breathable, responsive frontend. ## Quick Start Use the image-to-code skill to design and build a premium landing page with a hero, features, testimonials, and pricing section.
