What problem does it solve? AI-generated frontend code tends to look templated: purple gradients, centered heroes, generic cards, and default fonts. This Skill forces the agent to read the brief first, infer the right design direction, and ship landing pages, portfolios, and redesigns that avoid recognizable AI design clichés. ## Core Features & Use Cases - Brief Inference and Design Read: Analyzes page kind, vibe words, references, audience, and constraints before writing code, then declares a one-line design direction. - Three-Dial Configuration: Tunes DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY based on the brief, with presets for SaaS landings, portfolios, editorial sites, and public-sector pages. - Design System Mapping: Selects official packages (Fluent, Material, Carbon, Polaris, GOV.UK, shadcn/ui, Tailwind v4) when the brief matches a real system instead of hand-rolling CSS. - Pre-Flight Layout Rules: Enforces hard constraints on hero sizing, eyebrow frequency, CTA contrast, bento rhythm, zigzag alternation, and palette consistency. - Use Case: Ask for a redesign of a premium consumer brand landing page and receive a Next.js + Tailwind page with a non-default palette, real image assets, and a passed pre-flight audit. ## Quick Start Redesign my landing page for a premium cookware brand using this skill and avoid the usual beige-and-brass AI look.
