by Anthropic
Create distinctive, production-grade frontend interfaces with high design quality. Use when building web components, pages, or applications that need exceptional attention to aesthetic details and creative choices. Avoid generic AI aesthetics.
The frontend-design skill enables AI agents like Claude and ChatGPT to create distinctive, production-grade frontend interfaces with high design quality. use when building web components, pages, or applications that need exceptional attention to aesthetic details and creative choices. avoid generic ai aesthetics.
# Frontend Design
This skill focuses on creating distinctive, production-grade frontend interfaces that prioritize genuine design quality over generic aesthetics.
## Core Purpose
Build web components, pages, and applications with exceptional attention to aesthetic details and creative choices. Avoid "AI slop" — predictable, contextless design patterns.
## Design Philosophy
Understand context first, then commit to a bold aesthetic direction. Consider:
- Purpose and tone of the project
- Technical constraints
- What makes a design memorable
## Aesthetic Principles
### Typography
Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter. Opt for distinctive choices that elevate the frontend's aesthetics — unexpected, characterful font choices.
Pair a distinctive display font with a refined body font.
### 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:
- Prioritize CSS-only solutions for HTML
- Use Motion library for React when available
- 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
- Strategic white space
### Visual Details
Atmospheric effects matching the overall direction:
- Gradients with purpose
- Shadows that add depth
- Textures where appropriate
## What to Avoid
- Overused font families (Inter, Roboto for everything)
- Clichéd color schemes like purple gradients
- Predictable layouts
- Cookie-cutter design that lacks context-specific character
- Generic card layouts without personality
## Implementation
When building frontend:
1. **Assess context** - What is the project about? Who is the audience?
2. **Choose aesthetic direction** - Minimalist refinement or maximalist expression?
3. **Select typography** - Pick distinctive fonts that match the tone
4. **Define color palette** - Use CSS variables, commit to bold choices
5. **Plan motion** - Strategic animations at key moments
6. **Execute with precision** - Intentionality matters more than intensity