What problem does it solve? LLMs produce generic, cliché frontend designs: centered heroes, purple gradients, Inter font, three-column card rows, and static states. This Skill enforces engineered design rules so generated UI code follows consistent typography, color, layout, motion, and performance constraints instead of defaulting to AI slop patterns. ## Core Features & Use Cases - Metric-Driven Design Dials: Configurable DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY levels (1-10) that deterministically control layout asymmetry, animation complexity, and information density. - Bias-Correction Rules: Bans common AI tells such as Inter font, neon glows, pure black, generic names like "John Doe", Unsplash links, and 3-column card layouts, replacing them with curated alternatives like Geist, Satoshi, and asymmetric grids. - Motion & Performance Guardrails: Mandates Framer Motion spring physics, transform/opacity-only animation, min-h-[100dvh] viewport safety, and isolated Client Components for perpetual micro-interactions. - Use Case: Ask for a SaaS dashboard bento grid and receive React components with spring-physics micro-animations, skeleton loading states, and a neutral palette with a single desaturated accent instead of a generic purple-gradient template. ## Quick Start Generate a React landing page for a fintech product using the design taste rules with high layout variance and moderate motion intensity.
