What problem does it solve? Building web interfaces often results in generic, cookie-cutter designs with overused fonts, cliched color schemes, and predictable layouts. This Skill guides the creation of distinctive, production-grade frontend code that commits to a clear aesthetic direction instead of defaulting to generic AI-generated looks. ## Core Features & Use Cases - Aesthetic Direction Planning: Defines purpose, tone, constraints, and differentiation before writing any code, covering styles from brutalist minimalism to maximalist chaos. - Design System Guidance: Provides concrete rules for typography pairing, cohesive color themes with CSS variables, motion and micro-interactions, spatial composition, and atmospheric backgrounds. - Anti-Generic Safeguards: Explicitly avoids overused fonts (Inter, Roboto, Arial), cliched purple-gradient palettes, and predictable component patterns. - Use Case: Ask for a landing page for a coffee brand, and receive a complete HTML/CSS/JS or React implementation with a distinctive editorial aesthetic, staggered load animations, and custom typography rather than a template-looking page. ## Quick Start Ask the AI to build a landing page, dashboard, or React component with a specific aesthetic direction, such as a brutalist portfolio site with bold typography and scroll-triggered animations.
