What problem does it solve? AI-generated web interfaces often look generic, relying on overused fonts, cliched purple gradients, and predictable layouts. This Skill guides the creation of distinctive, production-grade frontend code with a committed aesthetic direction instead of cookie-cutter output. ## Core Features & Use Cases - Aesthetic Direction First: Commits to a bold design concept (brutalist, editorial, retro-futuristic, minimal, maximalist) before writing any code. - Design Guidelines: Covers typography pairing, cohesive color themes via CSS variables, motion and micro-interactions, spatial composition, and atmospheric backgrounds. - Anti-Generic Rules: Explicitly avoids overused fonts (Inter, Roboto, Arial), cliched gradients, and template-like component patterns. - Use Case: Ask for a landing page for a coffee brand and receive a complete HTML/CSS page with a distinctive editorial layout, characterful font pairing, staggered load animations, and textured backgrounds rather than a default-looking template. ## Quick Start Ask the agent to build a landing page, dashboard, or React component for your product and specify the mood or audience you want the design to target.
