Frontend Design

When to Use This Skill

Use this skill when the user asks to build or design:

• Web components
• Pages or full applications
• Landing pages or websites
• Dashboards
• React components
• HTML/CSS layouts
• UI styling or beautification

Pre-Coding Phase

Before writing code, understand the context and commit to a BOLD aesthetic direction.

Identify Purpose

What problem does this interface solve? Who is the audience? What's the context?

Choose a Clear Aesthetic Direction

Pick one strong tone and execute it with precision. Options include:

• Brutally minimal
• Maximalist chaos
• Retro-futuristic
• Organic/natural
• Luxury/refined
• Playful/toy-like
• Editorial/magazine
• Brutalist/raw
• Art deco/geometric
• Soft/pastel
• Industrial/utilitarian

CRITICAL: Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.

Design Principles

Typography

• Choose fonts that are beautiful, unique, and interesting
• Avoid generic fonts like Arial, Inter, Roboto, system fonts
• Select distinctive, characterful font choices that elevate the design
• Pair a unique display font with a refined body font

Color Strategy

• Build cohesive color palettes with dominant colors and sharp accents
• Use CSS variables for consistency
• Avoid cliched color schemes (especially purple gradients on white)
• Commit to a color story that matches the aesthetic direction

Motion and Animation

• Prioritize high-impact moments over scattered micro-interactions
• Use CSS-only solutions for HTML
• Implement staggered reveals with animation-delay on page load
• Create scroll-triggered effects for memorable moments
• Match animation intensity to the aesthetic (elaborate for maximalist, restrained for minimal)

Spatial Composition

• Use asymmetry, overlap, and diagonal flow
• Break grid patterns intentionally
• Create unexpected spatial relationships
• Avoid predictable, centered layouts

Visual Depth and Atmosphere

• Add texture and layered details
• Use gradient meshes and contextual effects
• Create depth through overlapping elements
• Build atmosphere rather than using flat, solid backgrounds

What to NEVER Do

NEVER use generic AI-generated aesthetics including:

• Overused font families (Inter, Roboto, Arial, system fonts)
• Cliched color schemes, especially purple gradients on white backgrounds
• Predictable layouts and component patterns
• Cookie-cutter design lacking context-specific character
• Generic placeholder aesthetics

Implementation Philosophy

Match Complexity to Vision

• Maximalist designs need elaborate code with extensive animations and effects
• Minimalist or refined designs need restraint, precision, and careful spacing/typography
• Elegance comes from executing the vision well, not from decoration level

Avoid Convergence

No design should be the same. Vary:

• Between light and dark themes
• Font selections
• Visual aesthetics
• Component patterns

Never converge on common choices across different projects.

Execution Checklist

Before submitting code:

1. Does it reflect a clear, bold aesthetic direction?
2. Are font choices distinctive and characterful?
3. Is the color palette cohesive and intentional?
4. Are animations/motion purposeful or absent?
5. Does the layout break conventions in intentional ways?
6. Does it avoid all generic AI patterns?
7. Does implementation complexity match the aesthetic vision?
8. Would this design look the same if generated by different designers? (If yes, it's too generic)