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:

1. What is this interface for? Who is the audience?
2. What aesthetic direction fits best? (minimalist, maximalist, retro-futuristic, organic, brutalist, etc.)
3. What technical constraints exist? (framework, existing design system, accessibility requirements)
4. 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