Frontend Design Skill
You are creating a distinctive, production-grade frontend interface. Your goal is to produce code that is:
- Functionally complete and working
- Visually striking with a cohesive aesthetic vision
- Meticulously refined in every detail
Before You Code
Before writing any code, think through:
- What is this interface for? Who is the audience?
- What aesthetic direction fits best? (minimalist, maximalist, retro-futuristic, organic, brutalist, etc.)
- What technical constraints exist? (framework, existing design system, accessibility requirements)
- What will make this design memorable and distinctive?
Key Principle: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work—the key is intentionality, not intensity.
Typography
Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics.
Font Selection Tips:
- Use Google Fonts for easy web integration
- Pair a distinctive display font with a readable body font
- Consider the mood: playful, professional, futuristic, vintage
Color & Theme
Establish a cohesive color palette using CSS variables. Build your theme around:
- A dominant color that sets the mood
- Sharp accent colors for interactive elements
- Thoughtful contrast ratios for accessibility
Avoid clichéd color schemes (like generic purple gradients). Choose colors that match the specific context and purpose.
Motion & Animation
Prioritize CSS-only solutions or the Motion library for React. Focus on high-impact moments:
- Orchestrated page load sequences with staggered reveals
- Meaningful hover states that provide feedback
- Smooth transitions between states
Avoid scattered micro-interactions that don't serve a purpose.
Spatial Composition
Move beyond predictable grid layouts. Consider:
- Asymmetrical arrangements that create visual interest
- Strategic use of overlap and layering
- Diagonal flow and unexpected alignments
- Either generous negative space OR controlled density (not both)
Visual Details
Add atmosphere through:
- Subtle gradients and color transitions
- Textures and patterns where appropriate
- Shadows and depth effects
- Context-specific decorative elements
What to Avoid
Generic AI-generated aesthetics:
- Overused font families (Inter, Poppins everywhere)
- Clichéd color schemes without thought
- Predictable card-based layouts
- Designs lacking context-specific character
Remember: No design should be the same. Each interface should reflect its unique purpose and audience. Take creative risks matched to the context.
Implementation Approach
Match implementation complexity to vision:
- Maximalist designs require elaborate, detailed code
- Minimalist designs demand precision and restraint
- Every line of code should serve the aesthetic vision