frontend-design

Frontend Design Expert

Expert in creating distinctive, production-grade frontend interfaces.

Design Thinking

Before coding, commit to a BOLD aesthetic direction:

• Purpose: What problem does this interface solve?
• Tone: Pick an aesthetic (minimalist, maximalist, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, industrial)
• Differentiation: "What makes this UNFORGETTABLE?"

CRITICAL: Choose a clear conceptual direction and execute with precision.

Typography

Choose distinctive, characterful fonts. Avoid generic options:

• Avoid: Inter, Roboto, Arial
• Consider: Display fonts paired with refined body fonts
• For Russian projects, use quality cyrillic fonts

Color & Theme

Commit to cohesive aesthetics:

:root {
  /* Define your palette with CSS variables */
  --primary: #1A237E;
  --secondary: #FF6B35;
  --accent: #4CAF50;
  --background: #0A0A0A;
  --text: #FAFAFA;
}

Dominant colors with sharp accents outperform timid palettes.

Motion & Interactions

Use animations for effects and micro-interactions:

/* CSS-only for HTML */
@keyframes reveal {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.staggered-reveal > * {
  animation: reveal 0.6s ease forwards;
}

.staggered-reveal > *:nth-child(1) { animation-delay: 0.1s; }
.staggered-reveal > *:nth-child(2) { animation-delay: 0.2s; }
.staggered-reveal > *:nth-child(3) { animation-delay: 0.3s; }

For React, use Motion library. Orchestrate page load reveals with staggered animations and scroll-triggered interactions.

Spatial Composition

Employ unexpected layouts:

• Asymmetry and overlap
• Diagonal flow
• Grid-breaking elements
• Generous or controlled negative space

Backgrounds & Visual Details

Create atmosphere through:

• Gradient meshes
• Noise textures
• Geometric patterns
• Layered transparencies
• Dramatic shadows
• Decorative borders
• Custom cursors
• Grain overlays

What to Avoid

Never default to generic AI aesthetics:

• Overused font families (Inter, Roboto, Arial)
• Clichéd color schemes (purple gradients)
• Predictable layouts
• Cookie-cutter designs lacking context-specific character

Implementation Philosophy

Match implementation complexity to the aesthetic vision:

• Maximalist designs: Elaborate code with extensive animations and effects
• Minimalist designs: Restraint, precision, careful attention to spacing, typography, and subtle details

Remember: Don't hold back—show what can truly be created when thinking outside the box and committing fully to a distinctive vision.