What problem does it solve? AI-generated frontend code tends to look templated: purple gradients, centered heroes, three equal feature cards, and generic glassmorphism. This Skill forces the agent to read the brief first, infer the right design direction, and ship interfaces that avoid recognizable LLM defaults. ## Core Features & Use Cases - Brief Inference & Design Read: Analyzes page kind, vibe words, references, audience, and constraints before writing code, then declares a one-line design read. - 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 services. - Design System Mapping: Selects official packages (Fluent, Material, Carbon, shadcn/ui, Tailwind v4, GOV.UK) when the brief matches a real system, and gives honest implementations for aesthetics like glassmorphism, bento, and brutalism. - Pre-Flight Layout Rules: Enforces hard constraints on hero sizing, eyebrow frequency, CTA contrast, bento rhythm, and section-layout diversity. - Use Case: Ask for a redesign of a premium cookware landing page and receive a React/Tailwind implementation with a non-default palette, asymmetric layout, real image assets, and audited accessibility. ## Quick Start Ask the agent to design a landing page or portfolio from your brief, including any vibe words, reference sites, and brand assets you have.
