What problem does it solve? LLM-generated frontend code tends to fall back on generic defaults like purple gradients, centered dark heroes, and three-column card grids. This Skill enforces deliberate design decisions for landing pages, portfolios, and redesigns so output avoids recognizable AI patterns. ## Core Features & Use Cases - Three Dials System: Configures DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY based on brief inference, mapping vibe words and audience signals to concrete design parameters. - Design Directives & Pre-Flight Check: Applies hard rules for typography, color, layout, hero composition, and interactive states, then validates output against a mandatory checklist covering WCAG AA contrast, eyebrow counts, and theme locks. - Real Design System Mapping: Maps briefs to established systems like shadcn/ui, Radix, Carbon, Polaris, and Tailwind v4, with a companion reference for generating per-section image art direction. - Use Case: Ask for a premium SaaS landing page redesign and receive a React/Next.js + Tailwind implementation with asymmetric layouts, a locked accent palette, Motion-based spring animations, and real image placements instead of placeholder gradients. ## Quick Start Redesign my portfolio landing page to look premium and avoid generic AI design patterns.
