What problem does it solve? LLM-generated frontend code tends to look templated and generic, repeating the same purple gradients, centered heroes, and default font choices. This Skill forces the agent to infer the right design direction from the brief before writing code, then enforces concrete layout, typography, color, and accessibility rules so the output does not look like AI slop. ## Core Features & Use Cases - Brief Inference and Design Read: Reads page kind, vibe words, references, audience, and constraints from the brief, then declares a one-line design direction before generating any code. - Three-Dial Configuration: Maps the design read to DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY values that gate every layout, motion, and density decision. - Design System Mapping: Selects official packages (Fluent, Material, Carbon, Polaris, shadcn/ui, Tailwind v4, govuk-frontend) when the brief matches a real system, and gives honest implementation guidance for aesthetics like glassmorphism, bento, and brutalism. - Hard Pre-Flight Rules: Enforces hero viewport fit, eyebrow restraint, CTA contrast and wrap checks, palette locks, zigzag caps, and real-image requirements before shipping. - Use Case: Ask for a premium consumer landing page and receive a React/Next.js page with a deliberate non-default palette, asymmetric layout, real generated imagery, and a passing accessibility audit instead of the usual beige-and-brass template. ## Quick Start Ask the agent to design and build a landing page or portfolio from your brief, including any vibe words, reference links, and brand assets you have.
