What problem does it solve? Generic, template-looking interfaces undermine product credibility. This Skill guides the design and implementation of distinctive, production-grade frontend interfaces with a clear aesthetic point of view, covering typography, color systems, layout composition, and motion. ## Core Features & Use Cases - Bold Design Direction: Commits to one extreme aesthetic (brutalist, editorial, retro-futurist, luxury, etc.) with a written design direction and signature elements, avoiding generic autopilot looks. - Token-Based Design System: Defines CSS variables for typography, color, spacing, radii, shadows, and motion curves so values stay consistent across components. - Production-Grade Polish: Covers interaction states, responsive fluid layouts, accessibility (semantic HTML, focus states, prefers-reduced-motion), and restrained high-impact animation. - Use Case: Ask for a landing page for a new product in React, and receive working code with a deliberate editorial aesthetic, fluid type scale, orchestrated load animation, and full keyboard accessibility. ## Quick Start Design and build a landing page for my SaaS product in React with a bold editorial aesthetic, including typography, color tokens, and a staggered load animation.
