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