Frontend Design Skill
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
The user provides frontend requirements: a 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 commit to a BOLD aesthetic direction:
- •
Purpose: What problem does this interface solve? Who uses it?
- •
Tone: Pick an extreme aesthetic direction:
- •Brutally minimal
- •Maximalist chaos
- •Retro-futuristic
- •Organic/natural
- •Luxury/refined
- •Playful/toy-like
- •Editorial/magazine
- •Brutalist/raw
- •Art deco/geometric
- •Soft/pastel
- •Industrial/utilitarian
Use these for inspiration but design one that is true to the aesthetic direction.
- •
Constraints: Technical requirements (framework, performance, accessibility)
- •
Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?
CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
Implementation Standards
Implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
- •Production-grade and functional
- •Visually striking and memorable
- •Cohesive with a clear aesthetic point-of-view
- •Meticulously refined in every detail
Frontend Aesthetics Guidelines
Typography
- •Choose fonts that are beautiful, unique, and interesting
- •Avoid generic fonts like Arial and Inter
- •Use distinctive choices that elevate the frontend's aesthetics
- •Pair a distinctive display font with a refined body font
- •NEVER converge on common choices (Space Grotesk, Inter, Roboto, system fonts)
Color & Theme
- •Commit to a cohesive aesthetic
- •Use CSS variables for consistency
- •Dominant colors with sharp accents outperform timid, evenly-distributed palettes
- •Vary between light and dark themes across different components
Motion & Animation
- •Use animations for effects and micro-interactions
- •Prioritize CSS-only solutions for HTML
- •Use Motion library for React when available
- •Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay)
- •Use scroll-triggering and hover states that surprise
Spatial Composition
- •Unexpected layouts
- •Asymmetry
- •Overlap
- •Diagonal flow
- •Grid-breaking elements
- •Generous negative space OR controlled density
Backgrounds & Visual Details
Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic:
- •Gradient meshes
- •Noise textures
- •Geometric patterns
- •Layered transparencies
- •Dramatic shadows
- •Decorative borders
- •Custom cursors
- •Grain overlays
What to AVOID
NEVER use generic AI-generated aesthetics:
- •Overused font families (Inter, Roboto, Arial, system fonts, Space Grotesk)
- •Cliched color schemes (particularly purple gradients on white backgrounds)
- •Predictable layouts and component patterns
- •Cookie-cutter design that lacks context-specific character
Design Variation
- •No design should be the same
- •Vary between light and dark themes
- •Use different fonts for different projects
- •Apply different aesthetics to different components
- •Interpret creatively and make unexpected choices that feel genuinely designed for the context
Implementation Complexity
Match implementation complexity to the aesthetic vision:
- •Maximalist designs: Need elaborate code with extensive animations and effects
- •Minimalist designs: Need restraint, precision, and careful attention to spacing, typography, and subtle details
- •Elegance comes from executing the vision well
Remember
Don't hold back. Show what can truly be created when thinking outside the box and committing fully to a distinctive vision. Create extraordinary, creative work that is genuinely distinctive and memorable.