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 apply explicit anti-default rules so landing pages, portfolios, and redesigns do not look machine-generated. ## 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: Sets DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY from signal tables and use-case presets to drive layout, motion, and density decisions. - Design System Mapping: Routes briefs to official packages (Fluent, Material, Carbon, Polaris, GOV.UK, shadcn/ui, Tailwind v4) instead of hand-rolled imitations, with honesty rules for aesthetics like glassmorphism and bento. - Bias-Correction Directives: Enforces typography discipline, color calibration with palette-rotation rules, layout diversification, accessibility contrast checks, and a mechanical pre-flight audit. - Use Case: Ask the agent to redesign a premium consumer brand landing page; it will declare a design read, pick a non-default palette family, generate real image assets, and ship a page that passes the eyebrow-count, CTA-intent, and contrast pre-flight checks. ## Quick Start Ask the agent to design a landing page or portfolio from your brief and let it state its design read before generating the interface.
