frontend-design

name	frontend-design
description	Create distinctive, production-grade frontend interfaces. Use when building web components, pages, dashboards, React components, HTML/CSS layouts, or styling any web UI. Generates creative, polished code that avoids generic AI aesthetics.

Frontend Design

Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics.

Design Thinking

Before coding, commit to a BOLD aesthetic direction:

Aspect	Questions
Purpose	What problem does this solve? Who uses it?
Tone	Minimal? Maximalist? Retro? Luxury? Playful?
Differentiation	What makes this UNFORGETTABLE?

Aesthetics Guidelines

Typography

• Choose distinctive fonts (avoid Arial, Inter, Roboto)
• Pair display font with refined body font
• Use unexpected, characterful choices

Color & Theme

• Commit to a cohesive aesthetic
• Use CSS variables for consistency
• Dominant colors with sharp accents > timid palettes

Motion

• Focus on high-impact moments
• Staggered reveals on page load
• Scroll-triggered and hover surprises

Spatial Composition

• Unexpected layouts, asymmetry, overlap
• Grid-breaking elements
• Generous negative space OR controlled density

Backgrounds & Visual Details

• Gradient meshes, noise textures
• Layered transparencies, dramatic shadows
• Custom cursors, grain overlays

Anti-Patterns (NEVER)

❌ Generic fonts (Inter, Roboto, Arial, system fonts) ❌ Cliched purple gradients on white ❌ Cookie-cutter layouts ❌ Same design across generations

Implementation

Match complexity to vision:

• Maximalist → Elaborate code, extensive animations
• Minimalist → Restraint, precision, typography focus

Remember: Claude is capable of extraordinary creative work. Commit fully to a distinctive vision.