What problem does it solve? AI-generated frontend code tends to fall back on the same templated look: purple gradients, centered heroes, three equal feature cards, and Inter on slate. This Skill forces the agent to read the brief first, infer the right design direction, and ship landing pages, portfolios, and redesigns that do not look like default LLM output. ## Core Features & Use Cases - Brief Inference and Design Read: Analyzes page kind, vibe words, references, audience, and constraints, then declares a one-line design read before writing any 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 real official packages (Fluent, Material, Carbon, Polaris, GOV.UK Frontend, shadcn/ui, Tailwind v4) when the brief matches a known system instead of hand-rolling CSS. - Anti-Slop Guardrails and Pre-Flight Audit: Enforces hard rules on typography, color palettes, hero layout, eyebrows, bento grids, CTA contrast, and responsive behavior, with a mechanical pre-flight check before shipping. - Use Case: Ask for a redesign of a premium cookware landing page and receive a Tailwind v4 + Next.js page with a non-default palette, asymmetric hero, real image assets, and a passed pre-flight checklist. ## Quick Start Ask the agent to design a landing page or portfolio from your brief, for example: redesign my SaaS landing page to feel Linear-style minimalist and avoid generic AI design patterns.
