frontend-design

# Frontend Design Skill

This skill helps create **distinctive, production-grade frontend interfaces** that avoid generic AI aesthetics.

## Core Principles

When building any frontend interface, follow these principles to create visually striking, memorable designs:

### 1. Establish Bold Aesthetic Direction

**Before writing any code**, define a clear aesthetic vision:

- **Understand the purpose**: What is this interface trying to achieve?
- **Choose an extreme tone**: Select a distinctive aesthetic direction
  - Brutalist: Raw, bold, functional
  - Maximalist: Rich, layered, decorative
  - Retro-futuristic: Nostalgic tech aesthetics
  - Minimalist with impact: Powerful simplicity
  - Neo-brutalist: Modern take on brutalism
- **Identify the unforgettable element**: What will make this design memorable?

### 2. Implementation Standards

Every interface you create should be:

- ✅ **Production-grade and functional**: Code that works flawlessly
- ✅ **Visually striking and memorable**: Designs that stand out
- ✅ **Cohesive with clear aesthetic point-of-view**: Unified vision throughout

## Critical Design Guidelines

### Typography

**Choose fonts that are beautiful, unique, and interesting.**

- ❌ **AVOID**: Generic system fonts (Arial, Helvetica, default sans-serif)
- ✅ **USE**: Distinctive choices that elevate aesthetics
  - Display fonts with character
  - Unexpected font pairings
  - Variable fonts for dynamic expression
  - Fonts that reinforce your aesthetic direction

### Color & Theme

**Commit to cohesive aesthetics with CSS variables.**

- ❌ **AVOID**: Generic color palettes, predictable combinations
- ✅ **USE**: Dominant colors with sharp accents
  - Define comprehensive CSS custom properties
  - Create mood through color temperature
  - Use unexpected color combinations
  - Build depth with tints, shades, and tones

### Motion & Animation

**Use high-impact animations that enhance the experience.**

- For **HTML/CSS**: CSS-only animations (transforms, transitions, keyframes)
- For **React**: Motion library (Framer Motion, React Spring)
- ❌ **AVOID**: Generic fade-ins, boring transitions
- ✅ **USE**: High-impact moments
  - Purposeful movement that guides attention
  - Smooth, performant animations
  - Delightful micro-interactions
  - Entrance/exit animations with personality

### Composition & Layout

**Embrace unexpected layouts.**

- ❌ **AVOID**: Predictable grids, centered everything, safe layouts
- ✅ **USE**: Bold composition choices
  - Asymmetry
  - Overlap
  - Diagonal flow
  - Unexpected whitespace
  - Breaking the grid intentionally

### Details & Atmosphere

**Create atmosphere through thoughtful details.**

- ✅ Textures and grain
- ✅ Sophisticated gradients
- ✅ Patterns and backgrounds
- ✅ Custom effects (blur, glow, shadows)
- ✅ Attention to spacing and rhythm

## What to AVOID

**Generic AI Design Patterns:**

- ❌ Overused fonts (Inter, Roboto, Open Sans as defaults)
- ❌ Clichéd color schemes (purple gradients, generic blues)
- ❌ Predictable layouts (everything centered, safe grids)
- ❌ Cookie-cutter design that lacks context-specific character
- ❌ Lack of personality or point-of-view
- ❌ Generic animations (basic fade-ins everywhere)

## Execution Philosophy

**Show restraint or elaboration as the vision demands—execution quality matters most.**

- Every design decision should serve the aesthetic direction
- Don't add complexity for its own sake
- Don't oversimplify when richness is needed
- Commit fully to your chosen direction
- Polish details relentlessly

## Implementation Process

When creating a frontend interface:

1. **Define the aesthetic direction** (brutalist, maximalist, minimalist, etc.)
2. **Choose distinctive typography** that reinforces the aesthetic
3. **Establish color system** with CSS variables
4. **Design layout** with unexpected but purposeful composition
5. **Add motion** that enhances key moments
6. **Polish details** (textures, shadows, spacing)
7. **Review against principles** - is this distinctive and production-grade?

## Examples of Strong Aesthetic Directions

- **Brutalist Dashboard**: Monospace fonts, high contrast, grid-based, utilitarian
- **Retro-Futuristic Landing**: Neon colors, chrome effects, 80s sci-fi inspired
- **Minimalist with Impact**: Generous whitespace, bold typography, single accent color
- **Neo-Brutalist App**: Raw aesthetics, asymmetric layouts, bold shadows
- **Maximalist Content**: Rich layers, decorative elements, abundant color

## Resources

For deeper guidance on prompting for high-quality frontend design, see the [Frontend Aesthetics Cookbook](https://github.com/anthropics/claude-cookbooks/blob/main/coding/prompting_for_frontend_aesthetics.ipynb).

---

**Remember**: The goal is to create interfaces that are both functionally excellent and visually unforgettable. Avoid generic AI aesthetics by committing to a clear, bold direction and executing it with meticulous attention to detail.