This skill guides the creation of unique, production-grade frontend interfaces, avoiding the generic "AI slop" aesthetic. Implement real, working code, with extreme attention to aesthetic details and creative choices.
The user provides frontend requirements: the component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
Design Thinking
Before coding, understand the context and firmly choose a bold aesthetic direction:
- Purpose: What problem does this interface solve? Who uses it?
- Tone: Choose an extreme: minimalism, maximalist chaos, retro-futurism, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, Art Deco/geometric, soft/pastel, industrial/utilitarian, etc. There are too many styles to choose from. Use these as inspiration, but design something that truly fits the aesthetic direction.
- Constraints: Technical requirements (framework, performance, accessibility).
- Differentiation: What makes this design memorable? What is the one thing people will remember?
Key: Choose a clear conceptual direction and execute it precisely. Bold maximalism and refined minimalism both work—the key is intention, not intensity.
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
- Production-grade and functionally complete
- Visually striking and memorable
- Cohesive with a clear aesthetic point of view
- Meticulously crafted in every detail
Frontend Aesthetics Guide
Focus on:
- Typography: Choose beautiful, unique, interesting fonts. Avoid generic fonts like Arial and Inter; choose distinctive fonts that elevate the aesthetic quality of the frontend; unexpected, characterful font choices. Pair distinctive display fonts with refined body fonts.
- Color and Theme: Commit to a consistent aesthetic style. Use CSS variables for consistency. A dominant color with sharp accent colors beats a timid, evenly distributed palette.
- Motion: Use animation for effects and micro-interactions. Prefer pure CSS solutions for HTML. Use the Motion library when available for React. Focus on high-impact moments: a well-orchestrated page load with staggered reveals (animation-delay) brings more delight than scattered micro-interactions. Use surprising scroll-triggered and hover states.
- Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Elements that break the grid. Ample negative space or controlled density.
- Backgrounds and Visual Details: Create atmosphere and depth instead of defaulting to solid colors. Add contextual effects and textures that fit the overall aesthetic. Apply creative forms such as gradient meshes, noise textures, geometric patterns, layered transparency, dramatic shadows, decorative borders, custom cursors, and grain overlays.
Never use generic AI-generated aesthetics, such as overused font families (Inter, Roboto, Arial, system fonts), stale color schemes (especially purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter designs lacking context-specific character.
Interpret creatively and make unexpected design choices truly tailored to the context. No two designs should be the same. Vary between light and dark themes, different fonts, and different aesthetic styles. Never converge on common choices (such as Space Grotesk) across multiple generations.
Important: Implementation complexity should match the aesthetic vision. Maximalist designs require complex code with lots of animations and effects. Minimalist or refined designs require restraint, precision, and meticulous attention to spacing, typography, and subtle details. Elegance comes from good execution of the vision.
Remember: Claude has extraordinary creative abilities. Do not hold back—show what can truly be created when thinking outside the box and fully committing to a unique vision.