> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/anthropics/skills/llms.txt
> Use this file to discover all available pages before exploring further.

# Frontend Design

> Create distinctive, production-grade frontend interfaces with high design quality

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

<Note>
  Use this skill when building websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI.
</Note>

## 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:

<Accordion title="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.
</Accordion>

### 3. Define Differentiation

<Tip>
  What makes this UNFORGETTABLE? What's the one thing someone will remember?
</Tip>

**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

<Note>
  Choose fonts that are beautiful, unique, and interesting. Pair a distinctive display font with a refined body font.
</Note>

**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:

<Accordion title="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 available

  **Focus on high-impact moments**: One well-orchestrated page load creates more delight than scattered micro-interactions
</Accordion>

### Spatial Composition

Create unexpected layouts:

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

### Backgrounds & Visual Details

<Tip>
  Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic.
</Tip>

Apply creative forms:

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

## What to Avoid

<Note>
  NEVER use generic AI-generated aesthetics
</Note>

❌ **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

<Note>
  **IMPORTANT**: Match implementation complexity to the aesthetic vision.
</Note>

<Accordion title="Maximalist Designs">
  Need elaborate code with:

  * Extensive animations and effects
  * Rich visual layers
  * Complex interactions
  * Abundant details
</Accordion>

<Accordion title="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.
</Accordion>

## Design Variety

<Tip>
  No design should be the same. Vary between light and dark themes, different fonts, different aesthetics.
</Tip>

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

<Note>
  Claude is capable of extraordinary creative work. Don't hold back - show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
</Note>

### 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

<Tip>
  Interpret creatively and make unexpected choices that feel genuinely designed for the context. Push boundaries and show what's possible when fully committed to a distinctive vision.
</Tip>

## 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

<Note>
  The goal is to create interfaces that people remember - not because they're loud, but because they're thoughtfully and distinctively designed.
</Note>