majiayu000 Frontend Design
Overview
Craft visually striking frontend interfaces by committing to bold, intentional aesthetic directions rather than defaulting to common patterns.
Design Strategy
Before coding, analyze:
- Purpose and intended audience
- Tone and emotional impact
- Technical constraints
- What will make the interface memorable through a specific conceptual lens
Aesthetic Focus Areas
Typography
Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter.
Color & Theme
Establish cohesive palettes using CSS variables with:
- Dominant colors
- Sharp accents
- Considered contrast ratios
Motion
Prioritize high-impact animations:
- Page-load sequences
- Scroll-triggered effects
- Micro-interactions
Spatial Composition
- Asymmetry
- Overlap
- Diagonal flow
- Grid-breaking elements
Visual Details
Create atmosphere through:
- Gradients
- Textures
- Patterns
- Contextual effects
Critical Avoidance
Do NOT create "generic AI-generated aesthetics":
- Overused typefaces
- Predictable layouts
- Cookie-cutter design lacking context-specific character
- Excessive centered layouts
- Default purple gradients
- Uniform rounded corners
Implementation Approach
Match code complexity to the vision:
- Maximalist designs require elaborate animations
- Minimalist designs demand restraint and precision in spacing and typography
Output
Production-ready code using:
- React components
- Tailwind CSS
- Modern CSS features
- Accessibility best practices