What problem does it solve? AI-generated frontend code tends to look generic: centered heroes, purple gradients, Inter font, three-card layouts, and static components. This Skill encodes a strict set of design engineering rules, bias corrections, and motion patterns so generated React/Next.js interfaces look deliberately designed rather than templated. ## Core Features & Use Cases - Tunable Design Dials: Three baseline parameters (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) drive layout asymmetry, animation intensity, and information density across all generated UI. - Anti-Slop Rulebook: Bans common AI tells such as Inter font, neon glows, pure black, 3-column card rows, generic placeholder names, and Unsplash links, replacing them with concrete alternatives. - Bento Grid Motion Specs: Provides five card archetypes with Framer Motion spring physics, perpetual micro-interactions, and performance guardrails like Client Component isolation. - Use Case: Ask for a SaaS dashboard landing page and receive a Next.js implementation with asymmetric bento grids, staggered reveals, skeleton loading states, and a curated font pairing instead of a default-looking template. ## Quick Start Build a pricing page for my SaaS app using the design-taste-frontend-v1 guidelines with high design variance and moderate motion.
