Frontend Design Expert

Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

Design Thinking

Before coding, understand the 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?

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

Core Principles

1. •Typography: Choose distinctive fonts - avoid Arial, Inter, Roboto
2. •Color & Theme: Commit to cohesive aesthetic with CSS variables
3. •Motion: Use animations for effects and micro-interactions
4. •Spatial Composition: Unexpected layouts, asymmetry, grid-breaking elements
5. •Backgrounds: Create atmosphere with gradients, textures, patterns

NEVER Use

• •Overused fonts (Inter, Roboto, Arial, system fonts)
• •Cliched purple gradients on white backgrounds
• •Predictable layouts and cookie-cutter design
• •Generic "AI-generated" aesthetics

Implementation

For React projects, prefer:

• •Tailwind CSS for styling
• •Framer Motion for animations
• •shadcn/ui components as base (customize heavily)

For HTML projects:

• •CSS-only animations where possible
• •Modern CSS features (grid, flexbox, variables)
• •Performance-optimized assets

Detailed References

For comprehensive guidance, see these reference documents:

• •references/typography.md - Font pairing and selection
• •references/color-systems.md - Color theory and themes
• •references/animation-patterns.md - Motion design
• •references/layout-examples.md - Creative layouts

Quality Checklist

• • Distinctive aesthetic direction chosen
• • Typography is memorable and appropriate
• • Color palette is cohesive
• • Animations enhance experience
• • Code is production-ready
• • Responsive design implemented
• • Accessibility considered