What problem does it solve? AI-generated frontend code tends to look templated: purple gradients, centered heroes, three equal cards, and the same fonts on every project. This Skill forces the agent to read the brief first, infer the right design direction, and apply strict layout, typography, color, and accessibility rules so the output does not look like generic AI slop. ## 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 official packages (Fluent, Material, Carbon, shadcn/ui, Tailwind v4, GOV.UK) when the brief matches a real system, and gives honest implementation guidance for aesthetics like glassmorphism, bento, and brutalism. - Hard Layout and A11y Rules: Enforces hero viewport fit, eyebrow restraint, CTA contrast checks, single-accent color locks, and a mechanical pre-flight audit before shipping. - Use Case: Ask for a redesign of a premium cookware landing page and receive a React/Tailwind implementation that avoids the banned beige-and-brass palette, uses real generated imagery, and passes the pre-flight checklist. ## Quick Start Use the design-taste-frontend skill to build a landing page for my SaaS product with a Linear-style minimalist feel.
