name	designing-frontend
description	Build distinctive, production-grade frontend interfaces with memorable aesthetics. Use when creating web components, pages, or applications. Prioritizes creative, context-specific design over generic patterns.

Designing Frontend

Workflow

Conceptualize
- Identify purpose and user context
- Choose a bold aesthetic direction (brutally minimal, maximalist, retro-futuristic, organic, luxury, brutalist, etc.)
- Define the one unforgettable element
- Note technical constraints (framework, performance, accessibility)
Implement
- Write production-grade code (HTML/CSS/JS, React, Vue, etc.)
- Apply aesthetic guidelines below
Verify
- Check visual hierarchy and cohesion
- Test interactions and animations
- Validate accessibility requirements
- Confirm no generic patterns emerged
Iterate
- Refine details based on verification
- Enhance distinctiveness where needed

Aesthetic Guidelines

Typography

Use distinctive, characterful fonts (avoid Inter, Roboto, Arial, system fonts)
Pair expressive display fonts with refined body fonts

Color & Theme

Build cohesive palettes with CSS variables
Use dominant colors with sharp accents, not evenly-distributed schemes
Avoid clichéd combinations (purple gradients on white)

Motion

Create high-impact moments with orchestrated page loads and staggered reveals
Use CSS animations for HTML; Motion library for React
Add surprising hover states and scroll-triggered effects

Spatial Composition

Break from grid conventions: asymmetry, overlap, diagonal flow
Use generous negative space OR intentional density

Backgrounds & Visual Effects

Layer gradient meshes, noise textures, geometric patterns
Apply contextual effects: layered transparencies, dramatic shadows, decorative borders
Add atmosphere through depth and texture

Implementation Principles

Match complexity to vision: Maximalist designs require elaborate code; minimalist designs demand precision in spacing and typography
Vary every design: Different fonts, themes, aesthetics for each project
Never converge: Avoid repeated choices (Space Grotesk, common layouts)
Context-specific: Design should feel genuinely crafted for its purpose

Designing Frontend

Workflow

Conceptualize

Identify purpose and user context
Choose a bold aesthetic direction (brutally minimal, maximalist, retro-futuristic, organic, luxury, brutalist, etc.)
Define the one unforgettable element
Note technical constraints (framework, performance, accessibility)

Implement

Write production-grade code (HTML/CSS/JS, React, Vue, etc.)
Apply aesthetic guidelines below

Verify

Check visual hierarchy and cohesion
Test interactions and animations
Validate accessibility requirements
Confirm no generic patterns emerged

Iterate

Refine details based on verification
Enhance distinctiveness where needed

Aesthetic Guidelines

Typography

Use distinctive, characterful fonts (avoid Inter, Roboto, Arial, system fonts)

Pair expressive display fonts with refined body fonts

Color & Theme

Build cohesive palettes with CSS variables

Use dominant colors with sharp accents, not evenly-distributed schemes

Avoid clichéd combinations (purple gradients on white)

Motion

Create high-impact moments with orchestrated page loads and staggered reveals

Use CSS animations for HTML; Motion library for React

Add surprising hover states and scroll-triggered effects

Spatial Composition

Break from grid conventions: asymmetry, overlap, diagonal flow

Use generous negative space OR intentional density

Backgrounds & Visual Effects

Layer gradient meshes, noise textures, geometric patterns

Apply contextual effects: layered transparencies, dramatic shadows, decorative borders

Add atmosphere through depth and texture

Implementation Principles

Match complexity to vision: Maximalist designs require elaborate code; minimalist designs demand precision in spacing and typography

Vary every design: Different fonts, themes, aesthetics for each project

Never converge: Avoid repeated choices (Space Grotesk, common layouts)

Context-specific: Design should feel genuinely crafted for its purpose

designing-frontend