What problem does it solve? AI-generated frontend code tends to look templated and generic, repeating the same purple gradients, centered heroes, and card grids. This Skill forces the agent to infer the right design direction from the brief, pick an appropriate design system or aesthetic, and audit the output against strict layout, typography, color, and accessibility rules before shipping. ## Core Features & Use Cases - Brief Inference & Design Read: Analyzes page kind, vibe words, references, audience, and constraints to declare a one-line design direction before writing code. - 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, Polaris, GOV.UK Frontend, shadcn/ui, Tailwind v4) when the brief matches a real system, and gives honest implementation guidance for aesthetics like glassmorphism, bento, and brutalism. - Pre-Flight Audit Rules: Enforces hard constraints on hero layout, eyebrow frequency, CTA contrast and wrapping, palette consistency, corner-radius discipline, and responsive fallbacks. - Use Case: Ask for a redesign of a premium cookware landing page and receive a React/Tailwind implementation with a non-default palette, real image assets, and a layout that passes the built-in anti-slop checklist. ## Quick Start Redesign my SaaS landing page so it looks like a Linear-style minimalist site, and audit it against your pre-flight checklist before showing me the code.
