What problem does it solve? AI-generated frontend code tends to look templated: purple gradients, centered heroes, three equal cards, and Inter everywhere. This Skill forces the agent to read the brief first, infer the right design direction, and ship landing pages, portfolios, and redesigns that avoid recognizable LLM defaults. ## Core Features & Use Cases - Brief Inference and Design Read: Analyzes page kind, vibe words, references, audience, and constraints, then declares 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: Routes briefs to official packages like Fluent UI, Carbon, Polaris, GOV.UK Frontend, shadcn/ui, or Tailwind v4 instead of hand-rolled approximations. - Pre-Flight Layout Rules: Enforces hard constraints on hero sizing, eyebrow frequency, CTA contrast, bento rhythm, palette consistency, and responsive collapse. - Use Case: Ask the agent to redesign a premium cookware brand landing page; it infers the audience, picks a non-default palette, selects typography, generates real imagery, and audits every section before shipping. ## Quick Start Ask the agent to build a landing page or portfolio from your brief and let it declare its design read before generating the code.
