frontend-design

name	frontend-design
description	Create distinctive, production-grade web interfaces and frontend designs. Use when the user wants to build a website, web app UI, landing page, dashboard, or any web interface that should look polished and avoid generic AI-generated aesthetics. Trigger for HTML/CSS/JS design work, React components, or any frontend visual design task.

Frontend Design Skill

Create distinctive, production-grade web interfaces that avoid generic aesthetics.

Design Philosophy

Before coding, establish a clear aesthetic direction:

1. Understand the purpose — what does this interface communicate?
2. Choose a specific tone — from brutalist to maximalist, from minimal to expressive
3. Identify technical constraints — framework, browser support, performance needs

The emphasis is on intentionality: "Bold maximalism and refined minimalism both work — the key is intentionality, not intensity."

Core Guidelines

Typography

• Select characterful, unexpected fonts rather than defaults
• Avoid: Inter, Roboto, Arial, system-ui as primary typefaces
• Use: Variable fonts, display fonts, editorial choices
• Load from Google Fonts or self-host

Color

• Build cohesive schemes using CSS variables
• Dominant color (60-70% visual weight) + 1-2 supporting tones + one sharp accent
• Avoid: Purple gradients on white backgrounds (cliché)

Atmosphere

Create through:

• Gradient meshes and noise textures
• Geometric patterns and layered transparencies
• Dramatic shadows and decorative borders
• Custom cursors and grain overlays

Animation & Motion

• Prioritize high-impact moments: staggered page-load reveals, scroll-triggered effects
• Avoid scattered micro-interactions without purpose

Layout

• Embrace asymmetry, overlapping elements, generous spacing
• Or controlled density — but never predictable grid defaults
• Break the box; use clip-path, transforms, negative margins

CSS Architecture

:root {
  /* Design tokens */
  --color-primary: #1a1a2e;
  --color-accent: #e94560;
  --color-surface: #16213e;

  --font-display: 'Playfair Display', serif;
  --font-body: 'DM Sans', sans-serif;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;

  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 24px;
}

Techniques to Use

Gradient Mesh

.hero {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(120, 40, 200, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(0, 200, 150, 0.2) 0%, transparent 50%),
    #0a0a1a;
}

Grain Texture

.grain::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,...");
  opacity: 0.04;
  pointer-events: none;
}

Staggered Animation

.item:nth-child(1) { animation-delay: 0ms; }
.item:nth-child(2) { animation-delay: 100ms; }
.item:nth-child(3) { animation-delay: 200ms; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

Critical Warnings — Avoid These

• Overused font families: Inter, Roboto, Arial, system fonts as primary
• Cliché color schemes: Purple gradients on white backgrounds
• Predictable layouts: Hero image + features grid + CTA footer
• Generic component patterns: Bootstrap/Material defaults without customization
• Uniform rounded corners: border-radius: 8px on everything

Quality Check

Before finishing, verify:

• The design has a clear, intentional aesthetic direction
• No generic AI aesthetics (see warnings above)
• Typography makes a deliberate choice
• Color scheme is cohesive with a clear dominant/accent relationship
• Animations enhance, not distract
• Mobile responsive