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.