---
category: skills
topic: skill
content_type: reference
status: latest
retrieved: 2026-05-16
source_url: https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design/skills/frontend-design/SKILL.md
license: See LICENSE.txt (anthropics/claude-code)
tags: [design-quality, frontend, ai-agents, aesthetics, anti-patterns, creative-direction]
---

# Anthropic frontend-design Skill

## What it is

The official Anthropic Claude Code plugin for frontend design. A 42-line skill file that guides Claude toward distinctive, production-grade interfaces. It is the most widely-deployed design skill in the Claude ecosystem and the direct inspiration for Impeccable.

**Purpose:** Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications.

---

## Design Thinking Framework

Before writing any code, the skill requires understanding four dimensions:

1. **Purpose** — What problem does this interface solve? Who uses it?
2. **Tone** — Pick an extreme aesthetic direction: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian
3. **Constraints** — Technical requirements (framework, performance, accessibility)
4. **Differentiation** — What makes this unforgettable? What's the one thing someone will remember?

**Core principle:** "Bold maximalism and refined minimalism both work — the key is intentionality, not intensity."

---

## Frontend Aesthetics Guidelines

### Typography
Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter. Pair a distinctive display font with a refined body font. Unexpected, characterful font choices.

### Color & Theme
Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.

### Motion
Use animations for effects and micro-interactions. Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.

### Spatial Composition
Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.

### Backgrounds & Visual Details
Create atmosphere and depth. Gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, grain overlays.

---

## Banned Patterns

NEVER use:
- Overused font families: Inter, Roboto, Arial, system fonts
- Clichéd color schemes (particularly purple gradients on white backgrounds)
- Predictable layouts and component patterns
- Cookie-cutter design that lacks context-specific character

---

## Creative Philosophy

"Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations."

Match implementation complexity to the aesthetic vision: maximalist designs need elaborate code with extensive animations. Minimalist designs need restraint, precision, and careful attention to spacing, typography, and subtle details.

"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."

---

## Relationship to Impeccable

Impeccable (pbakaus/impeccable) is built on and extends this skill — adding 7 domain reference files, 23 commands, and deterministic anti-pattern detection. This skill is the foundation; Impeccable is the extended framework for ongoing project use.