Frontend Design

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.