What problem does it solve? AI-generated frontends often look generic and templated — system fonts, gray-on-white palettes, uniform grids, and timid CTAs. This Skill supplies opinionated, intentional design guidance so websites, landing pages, and web apps look distinctive and professionally designed instead of like default AI output. ## Core Features & Use Cases - Typography & Color Application: Extreme weight contrast, dramatic size jumps, letter-spacing techniques, CSS custom property token strategies, the 60-30-10 rule, gradient techniques, and dark-mode design guidance. - Component & Layout Recipes: Reference guides covering hero sections, feature cards, pricing tables, bento grids, asymmetric grids, overlapping elements, diagonal dividers, and viewport-unit techniques. - Motion Choreography: Page-load stagger orchestration, scroll-triggered reveals with IntersectionObserver, hover progressions, loading skeletons, and timing/easing guidelines. - Anti-Pattern Catalog: A checklist of 17 common AI design sins (purple gradient syndrome, monotone grids, shy CTAs) with before/after fixes. - Use Case: A user says their landing page "looks too generic." The Skill applies a distinctive font pairing, a committed color palette, an asymmetric hero layout, and staggered reveal animations to transform it. ## Quick Start Redesign my landing page hero section to look more distinctive using the frontend-aesthetics design patterns.
