What problem does it solve? AI-generated frontend code often looks generic, with clichéd layouts, default fonts, purple gradients, and missing loading or error states. This Skill enforces a strict set of design engineering rules so generated React and Next.js interfaces look distinctive, polished, and production-grade. ## Core Features & Use Cases - Design Bias Correction: Bans common AI tells such as Inter font, neon glows, pure black, centered heroes, and generic 3-column card layouts, replacing them with asymmetric grids, curated font stacks, and calibrated color palettes. - Tunable Design Dials: Configures DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY levels that drive layout asymmetry, animation richness, and information density across all generated UI. - Motion & Bento Patterns: Provides concrete Framer Motion specifications including spring physics, layoutId transitions, staggered reveals, magnetic buttons, and perpetual micro-interactions for Bento-style dashboards. - Use Case: Ask for a SaaS analytics dashboard and receive a complete Next.js implementation with Tailwind styling, skeleton loading states, empty states, and animated Bento cards instead of a static generic layout. ## Quick Start Build a modern SaaS dashboard page in Next.js with Tailwind CSS, animated Bento cards, and full loading and empty states following the design taste rules.
