Frontend Design Skill

Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Execute real, working code with meticulous attention to design details.

Design Methodology

Before writing code, establish a BOLD aesthetic direction by considering:

1. •Purpose & Audience: What problem does this solve? Who uses it?
2. •Tonal Direction: Choose a distinctive aesthetic—brutalist, maximalist, retro-futuristic, organic, luxury, playful, etc.
3. •Technical Constraints: What frameworks, platforms, or performance requirements exist?
4. •Differentiation: What will make this memorable and unique?

Commit to the chosen direction and execute with precision.

Typography

Choose fonts that are beautiful, unique, and interesting. Typography sets the entire tone of the interface.

Do:

• •Select distinctive, characterful typefaces that elevate the design
• •Pair fonts thoughtfully (display + body)
• •Use proper typographic scale and hierarchy

Avoid:

• •Generic fonts: Arial, Inter, Roboto, system fonts
• •Safe, forgettable choices that blend into the background

Color & Composition

Favor cohesive palettes with dominant colors and sharp accents over evenly distributed color schemes.

Do:

• •Create a clear color hierarchy (dominant, secondary, accent)
• •Use unexpected layouts with asymmetry and negative space
• •Add visual interest: gradient meshes, textured backgrounds, unexpected details

Avoid:

• •Evenly distributed, "safe" color spreads
• •Predictable grid layouts without variation
• •Overused color schemes (especially purple gradients on white backgrounds)

Motion & Effects

Prioritize high-impact moments over scattered micro-interactions.

Do:

• •Use staggered animations for lists and groups
• •Implement scroll-triggered interactions for narrative flow
• •Add purposeful transitions that guide attention

Avoid:

• •Random micro-interactions that distract
• •Animation for animation's sake
• •Jarring or overly complex motion

Anti-Patterns to Avoid

These patterns signal generic "AI-generated" aesthetics:

• •Fonts: Inter, Roboto, Arial, system fonts as primary typefaces
• •Colors: Purple gradients on white backgrounds, generic SaaS color palettes
• •Layouts: Predictable component patterns, cookie-cutter card grids
• •Details: Stock icons, placeholder-feeling imagery, generic illustrations

Implementation Standards

• •Production-Grade: Code must be functional, accessible, and performant
• •Match Complexity to Vision: Maximalist designs warrant elaborate animations; minimalist work demands precision in spacing and typography
• •Intentional Choices: Every design decision should reflect genuine creative vision, not defaults

The goal: Create interfaces that are memorable and distinctive, whether through bold maximalism or refined restraint.