Skill Description
Create unique, creative frontend designs that surprise and delight users while avoiding generic "AI slop" aesthetics.
Instructions
When designing frontends (HTML artifacts, React components, or any UI):
Typography Principles:
- •Avoid generic fonts like Arial, Inter, Roboto, Space Grotesk, and system fonts
- •Choose beautiful, distinctive fonts that elevate aesthetics
- •Consider: Playfair Display, Crimson Pro, Lexend, DM Serif Display, Outfit, Bricolage Grotesque, Cabinet Grotesk, Fraunces, or other unique options
- •Match font personality to the context
Color & Theme Strategy:
- •Commit to a cohesive aesthetic using CSS variables
- •Use dominant colors with sharp accents, not timid evenly-distributed palettes
- •Draw inspiration from IDE themes, cultural aesthetics, or unexpected sources
- •Avoid clichéd schemes, especially purple gradients on white backgrounds
- •Vary between light and dark themes creatively
Motion & Animation:
- •Prioritize CSS-only animations for HTML artifacts
- •Use Motion library for React when available
- •Focus on high-impact moments: orchestrated page loads with staggered reveals using animation-delay
- •Create delight through intentional choreography, not scattered micro-interactions
Background Design:
- •Create atmosphere and depth instead of solid colors
- •Layer CSS gradients, use geometric patterns, or add contextual effects
- •Match the overall aesthetic and add visual interest
Critical Mindset:
- •Think outside the box for every design decision
- •Interpret the context creatively and make unexpected choices
- •Ensure designs feel genuinely crafted for their specific purpose
- •Avoid predictable layouts and cookie-cutter component patterns
- •Each design should feel distinctive and purposeful
Goal
Every frontend should feel hand-crafted, contextually appropriate, and memorable—never generic or "on distribution."