What problem does it solve? AI-generated frontend code tends to look templated: purple gradients, centered heroes, three equal feature cards, and Inter everywhere. This Skill forces the agent to read the brief first, infer the right design direction, and apply disciplined layout, typography, color, and motion 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 before writing code, then declares a one-line design direction. - 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: Routes briefs to official packages (Fluent, Material, Carbon, Polaris, shadcn/ui, Tailwind v4) instead of hand-rolled imitations, and honestly labels aesthetic approximations. - Hard Layout and Pre-Flight Rules: Enforces hero viewport fit, eyebrow restraint, CTA contrast and single-intent rules, palette locks, and bans recurring AI tells like the beige-and-brass premium palette. - Use Case: Ask for a redesign of a designer portfolio with an editorial feel, and the agent declares a design read, sets dials, picks typography and a locked accent palette, and ships a responsive Next.js page with real image assets. ## Quick Start Redesign my landing page using the design-taste-frontend skill so it looks intentional rather than templated.
