Frontend Design
Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics.
Design Thinking
Before coding, understand context and commit to a BOLD aesthetic direction:
- Purpose: What problem does this interface solve? Who uses it?
- Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian
- Constraints: Technical requirements (framework, performance, accessibility)
- Differentiation: What makes this UNFORGETTABLE?
Aesthetics Guidelines
- Typography: Choose distinctive fonts. Avoid generic fonts like Arial and Inter. Pair a distinctive display font with a refined body font.
- Color & Theme: Use CSS variables. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
- Motion: CSS-only animations for HTML. Motion library for React. Focus on page load reveals with staggered animation-delay.
- Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space.
- Backgrounds & Visual Details: Gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, grain overlays.
NEVER use: overused font families (Inter, Roboto, Arial), cliched purple gradients, predictable layouts, cookie-cutter design.
Interpret creatively. No design should be the same. Vary between light/dark themes, different fonts, different aesthetics.