What problem does it solve? AI-generated web interfaces often look generic, using overused fonts, cliched purple gradients, and predictable layouts. This Skill guides the creation of frontend code with a deliberate, distinctive aesthetic direction so every interface feels intentionally designed rather than templated. ## Core Features & Use Cases - Aesthetic Direction First: Commits to a bold conceptual direction (brutalist, editorial, retro-futuristic, maximalist, etc.) before writing any code, ensuring cohesive typography, color, motion, and layout choices. - Production-Grade Implementation: Generates working HTML/CSS/JS, React, or Vue code with refined typography pairings, CSS variables, animations, scroll triggers, and layered visual details like grain overlays and gradient meshes. - Anti-Generic Guardrails: Explicitly avoids overused fonts (Inter, Roboto, Arial), cliched color schemes, and cookie-cutter component patterns. - Use Case: Ask for a landing page for a coffee brand, and receive a complete page with a distinctive editorial layout, characterful font pairing, staggered load animations, and textured backgrounds instead of a generic template. ## Quick Start Build a landing page for a specialty coffee brand with a bold editorial aesthetic using the frontend-design skill.
