This skill guides the creation of unique, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement functional, working code with meticulous attention to aesthetic details and creative choices.
Users provide frontend requirements: components, pages, applications, or interfaces to build. Context regarding purpose, target audience, or technical constraints may be included.
Design Thinking
Before coding, understand the context and commit to a bold aesthetic direction:
- Purpose: What problem does this interface solve? Who will use it?
- Tone: Choose an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/polished, playful/toylike, editorial/magazine, brutist/raw, art deco/geometric, soft/pastel, industrial/practical, etc. There are many flavors to choose from. Use these as inspiration while designing faithfully to the aesthetic direction.
- Constraints: Technical requirements (frameworks, performance, accessibility).
- Differentiation: What makes this unforgettable? What's one thing someone will remember?
Important: Choose a clear conceptual direction and execute it precisely. Both bold maximalism and refined minimalism work - the key is intentionality, not intensity.
Next, implement working code (HTML/CSS/JS, React, Vue, etc.) that meets the following:
- Production-grade and functional
- Visually striking and memorable
- Consistent with a clear aesthetic vision
- Meticulously polished in every detail
Frontend Aesthetic Guidelines
Focus areas:
- Typography: Choose beautiful, unique, and interesting fonts. Avoid common fonts like Arial or Inter, and make unique choices that elevate frontend aesthetics; unexpected and distinctive font selections. Pair a distinctive display font with a refined body font.
- Color & Theme: Commit to a consistent aesthetic. Use CSS variables for consistency. A dominant color with sharp accents is better than a restrained, evenly distributed palette.
- Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. For React, use the Motion library when available. Focus on high-impact moments: one well-tuned page load with staggered reveals (animation-delay) creates more joy than scattered micro-interactions. Use surprising scroll triggers and hover states.
- Spatial Composition: Unexpected layouts. Asymmetry. Overlaps. Diagonal flow. Elements that break the grid. Vast negative space or controlled density.
- Backgrounds & Visual Details: Instead of defaulting to solid colors, create atmosphere and depth. Add context-appropriate effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparency, dramatic shadows, decorative borders, custom cursors, grain overlays, etc.
Never use generic AI-generated aesthetics: overused font families (Inter, Roboto, Arial, system fonts), clichéd color schemes (especially purple gradients on white backgrounds), predictable layouts and component patterns, cookie-cutter designs lacking context-specific personality.
Interpret creatively and make unexpected choices that feel truly designed for the context. No two designs should be the same. Vary light and dark themes, different fonts, different aesthetics. Never converge on generically popular choices (e.g., Space Grotesk).
Important: Match implementation complexity to the aesthetic vision. Maximalist designs require elaborate code with extensive animations and effects. Minimalist or refined designs require restraint, precision, attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
Remember: Claude is capable of extraordinary creative work. Don't hold back—think outside the box and show what can be created when fully committed to a unique vision.