---
name: anthropic-frontend-design
description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
license: Complete terms in LICENSE.txt
---

# Frontend Design

A skill for creating distinctive, production-grade frontend interfaces with high design quality.

## Core Philosophy: Avoid Generic AI Aesthetics

The most recognizable flaw of AI-generated interfaces is a **generic, corporate-minimalist look** — think Auth0 or Stripe dashboards. The goal is to produce designs that have **personality, warmth, and distinction**.

### What To Avoid

| Avoid This | Why |
|---|---|
| White/light gray boxes on darker gray backgrounds | This is the default "card UI" that every AI generates |
| Centered layouts with lots of whitespace | This is safe but boring |
| Blue (#2563eb) accent colors on every project | Default Tailwind blue looks corporate |
| Inter font with default weight system | Safe but personality-free |
| Using font weight alone for visual hierarchy | Needs color, spacing, and texture too |
| Border-radius: 8px on everything | Makes everything look like a component library demo |
| Too much padding everywhere | Wastes space and makes designs feel sparse |

### What To Do Instead

| Do This | Why |
|---|---|
| Use unexpected color combinations | Warm greens, deep purples, oranges, or muted earth tones |
| Asymmetric layouts | Break the grid sometimes |
| Play with typography | Use display fonts, variable fonts, or monospace for personality |
| Add texture | Subtle gradients, noise overlays, or border patterns |
| Use smaller, punchier spacing | Tighter layouts feel more intentional |
| Custom illustrations or icons | SVG icons with custom stroke widths or hand-drawn feels |
| Dark mode first | Often looks more distinctive |

## Design Principles

### 1. Color

**Don't default to Tailwind blue.** Choose a palette that fits the brand or personality of what you're building. Use tools like [coolors.co](https://coolors.co) or [huemint.com](https://huemint.com) for inspiration.

Prefer:
- Muted, desaturated colors for backgrounds
- One or two bold accent colors
- Consistent use of color for meaning

### 2. Typography

**Don't use Inter for everything.** Consider:
- **Display fonts** for headings (Playfair Display, Fraunces, DM Serif Display)
- **Variable fonts** for flexibility (Recursive, Newsreader)
- **Monospace** for technical projects (JetBrains Mono, IBM Plex Mono)
- **Geometric sans** for modern looks (Space Grotesk, Plus Jakarta Sans)

### 3. Layout

**Break out of the centered-column rut.**
- Full-bleed sections
- Asymmetric grids
- Diagonal or overlapping elements
- Cards that aren't all the same size

### 4. Polish

Small details that make a big difference:
- Subtle hover transitions (not just opacity)
- Focus states that are visible and pleasant
- Loading states with personality
- Empty states that are informative and friendly
- Micro-interactions (button press, card lift, etc.)

## Process

When the user asks for a frontend design:

1. **Clarify the purpose**: What is this for? Landing page, dashboard, component?
2. **Establish the vibe**: What feeling should it evoke? Playful, serious, technical, artistic?
3. **Draft the design concept**: Describe the color palette, typography, and layout approach before coding
4. **Build it**: Implement using clean, well-structured code
5. **Polish**: Add micro-interactions, transitions, and responsive design
