What problem does it solve? AI-generated frontend code often looks generic, with overused fonts, cliched purple gradients, and cookie-cutter layouts. This Skill guides the creation of web components, pages, and applications that commit to a bold, cohesive aesthetic direction instead of defaulting to forgettable designs. ## Core Features & Use Cases - Aesthetic Direction First: Commits to a clear conceptual tone (brutalist, editorial, retro-futuristic, luxury, playful, etc.) before writing any code. - Design System Guidance: Covers typography pairing, CSS variable-based color themes, motion and micro-interactions, spatial composition, and atmospheric backgrounds. - Framework Flexibility: Produces working code in HTML/CSS/JS, React, Vue, or other frameworks, using Motion for React animations when available. - Use Case: Ask for a landing page for a coffee brand and receive a complete, functional page with a distinctive editorial layout, characterful font pairing, staggered load animations, and textured backgrounds rather than a generic template. ## Quick Start Ask the AI to build a landing page, dashboard, or component for your product and specify the mood or audience you want it to target.
