What problem does it solve? LLM-generated frontend code tends to fall back on the same templated aesthetic: AI-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 ship landing pages, portfolios, and redesigns 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, 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 and Anti-Slop Rules: Selects official design systems (Fluent, Material, Carbon, shadcn/ui, Tailwind v4) when appropriate, and enforces hard pre-flight rules on typography, color, layout, CTAs, eyebrows, and accessibility contrast. - Use Case: Ask for a premium consumer cookware landing page and get a React/Next.js + Tailwind build with a deliberate palette, asymmetric layout, real image assets, and a passing pre-flight audit instead of the default beige-and-brass template. ## Quick Start Ask the agent to design and build a landing page or portfolio from your brief, for example: "Build a landing page for my B2B SaaS product with a Linear-style minimalist feel."
