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.