What problem does it solve? LLM-generated frontend code tends to fall back on the same templated aesthetics: purple gradients, centered heroes, three equal feature cards, and generic glassmorphism. This Skill forces the agent to read the brief first, infer the right design direction, and ship interfaces that do not look like default AI output. ## 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 read. - 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, GOV.UK, shadcn/ui, Tailwind v4) instead of hand-rolled imitations, and honestly labels aesthetic approximations. - Hard Layout and Accessibility Rules: Enforces hero viewport fit, eyebrow restraint, CTA contrast checks, palette locks, and a mechanical pre-flight audit before shipping. - Use Case: Ask for a premium consumer cookware landing page and receive a React/Tailwind build with a non-default palette, real image assets, varied section layouts, and a passing pre-flight check. ## Quick Start Ask the agent to build a landing page or portfolio from your brief, for example: create a minimalist B2B SaaS landing page for a code review tool with a Linear-style aesthetic.
