Frontend Design

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

​

Overview

This skill guides creation of web components, pages, artifacts, and applications with:

• Production-grade functionality
• Visually striking and memorable design
• Cohesive aesthetic point-of-view
• Meticulously refined details

​

Design Thinking Process

Before coding, understand the context and commit to a bold aesthetic direction:

​

1. Understand Purpose

• What problem does this interface solve?
• Who uses it?
• What are the technical constraints (framework, performance, accessibility)?

​

2. Choose Aesthetic Direction

Pick an extreme and execute it with precision:

Aesthetic Directions to Consider

• Brutally minimal - Stripped down to essentials
• Maximalist chaos - Rich, layered, abundant
• Retro-futuristic - Past visions of the future
• Organic/natural - Flowing, earthy, soft forms
• Luxury/refined - Elegant, polished, premium
• Playful/toy-like - Whimsical, fun, approachable
• Editorial/magazine - Typography-forward, grid-based
• Brutalist/raw - Honest materials, stark contrasts
• Art deco/geometric - Structured, symmetrical patterns
• Soft/pastel - Gentle colors, rounded edges
• Industrial/utilitarian - Functional, mechanical

And many more flavors - use these for inspiration but design one that is true to the aesthetic direction.

​

3. Define Differentiation

CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.

​

Frontend Aesthetics Guidelines

​

Typography

Avoid generic fonts:

• ❌ Arial
• ❌ Inter
• ❌ Roboto
• ❌ System fonts

Opt for:

• ✅ Unexpected, characterful font choices
• ✅ Distinctive choices that elevate aesthetics
• ✅ Fonts that match your conceptual direction

​

Color & Theme

Commit to a cohesive aesthetic:

• Use CSS variables for consistency
• Dominant colors with sharp accents outperform timid, evenly-distributed palettes
• Avoid cliched color schemes (particularly purple gradients on white backgrounds)

​

Motion & Animation

Use animations for effects and micro-interactions:

Motion Implementation Strategy

Prioritize CSS-only solutions for HTML:

• High-impact page load with staggered reveals (animation-delay)
• Scroll-triggering effects
• Hover states that surprise

Use Motion library for React when availableFocus on high-impact moments: One well-orchestrated page load creates more delight than scattered micro-interactions

​

Spatial Composition

Create unexpected layouts:

• Asymmetry
• Overlap
• Diagonal flow
• Grid-breaking elements
• Generous negative space OR controlled density

​

Backgrounds & Visual Details

Apply creative forms:

• Gradient meshes
• Noise textures
• Geometric patterns
• Layered transparencies
• Dramatic shadows
• Decorative borders
• Custom cursors
• Grain overlays

​

What to Avoid

❌ Avoid:

• Overused font families (Inter, Roboto, Arial, system fonts)
• Cliched color schemes (purple gradients on white backgrounds)
• Predictable layouts and component patterns
• Cookie-cutter design that lacks context-specific character
• Common choices that appear across multiple generations (e.g., Space Grotesk)

✅ Instead:

• Interpret creatively
• Make unexpected choices that feel genuinely designed for the context
• Vary between light and dark themes
• Use different fonts and aesthetics
• Never converge on common choices

​

Implementation Complexity

Maximalist Designs

Need elaborate code with:

• Extensive animations and effects
• Rich visual layers
• Complex interactions
• Abundant details

Minimalist/Refined Designs

Need restraint and precision:

• Careful attention to spacing
• Typography refinement
• Subtle details
• Perfect alignment

Elegance comes from executing the vision well, not from adding more.

​

Design Variety

NEVER converge on common choices across generations. Each interface should feel:

• Contextually appropriate
• Distinctively designed
• Intentionally crafted
• Uniquely memorable

​

Technical Implementation

Implement working code that is:

• Production-grade and functional - Real features, not mockups
• Visually striking - Memorable first impression
• Cohesive - Clear aesthetic point-of-view throughout
• Meticulously refined - Every detail considered

Supported frameworks:

• HTML/CSS/JS
• React
• Vue
• And other modern frontend frameworks

​

Creative Philosophy

​

Key Principles

1. Context matters - Design for the specific use case, audience, and purpose
2. Intentionality over intensity - Execute your chosen direction with precision
3. Bold choices - Commit to a strong aesthetic direction
4. Avoid generic patterns - Create something memorable and unique
5. Craftsmanship - Refine every detail

​

The Frontend Design Mindset

• Start with a clear conceptual direction
• Choose distinctive typography
• Commit to a cohesive color palette
• Add motion at high-impact moments
• Create unexpected spatial compositions
• Layer visual details for atmosphere
• Refine, refine, refine

​

Examples of Strong Directions

Each project should have a clear aesthetic identity: Tech Startup Dashboard:

• Could be brutally minimal with stark data visualization
• OR maximalist with rich animations and layered information
• The key is committing to one direction

Creative Portfolio:

• Could be editorial/magazine style with bold typography
• OR organic/natural with flowing layouts
• Either works if executed with precision

E-commerce Site:

• Could be luxury/refined with elegant spacing
• OR playful/toy-like with whimsical interactions
• Choose based on brand and audience

​

Output Quality

Every frontend interface should:

• Work immediately (production-ready code)
• Look professionally designed
• Feel contextually appropriate
• Stand out from generic templates
• Demonstrate exceptional attention to detail