---
name: frontend-design
description: Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, artifacts, posters, or applications — including websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling or beautifying any web UI. Generates creative, polished code and UI design that avoids generic AI aesthetics. Inspired by the official Anthropic frontend-design skill (anthropics/skills, 105k stars).
---

# Frontend Design

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

**Source:** https://github.com/anthropics/skills/tree/main/skills/frontend-design

---

## Before Writing Any Code: Design Thinking

Commit to a BOLD aesthetic direction before touching code. Answer these four questions:

1. **Purpose** — What problem does this interface solve? Who uses it?
2. **Tone** — Pick an extreme and commit to it. Options include: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian. Use these for inspiration but design one that is true to the chosen direction.
3. **Constraints** — Technical requirements (framework, performance, accessibility).
4. **Differentiation** — What makes this UNFORGETTABLE? What is the one thing someone will remember?

**CRITICAL:** Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.

---

## Implementation Standards

Produce working code (HTML/CSS/JS, React, Vue, etc.) that is:
- Production-grade and functional
- Visually striking and memorable
- Cohesive with a clear aesthetic point-of-view
- Meticulously refined in every detail

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

---

## Aesthetic Guidelines

### Typography
Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial, Inter, Roboto, and system fonts. Opt for distinctive choices that elevate the frontend's aesthetics — unexpected, characterful font pairings. Pair a distinctive display font with a refined body font.

### Color and Theme
Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Avoid the cliched purple gradient on white background.

### 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 (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.

### Spatial Composition
Use unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density. Never default to the standard centered column layout unless it serves the aesthetic.

### Backgrounds and Visual Details
Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.

---

## What to NEVER Do

- Use overused font families: Inter, Roboto, Arial, system fonts
- Use cliched color schemes, particularly purple gradients on white backgrounds
- Use predictable layouts and component patterns
- Produce cookie-cutter design that lacks context-specific character
- Converge on common choices (Space Grotesk, for example) across generations
- Default to the same aesthetic for every project

---

## Variation Principle

No two designs should look the same. Vary between:
- Light and dark themes
- Different font families and pairings
- Different aesthetic directions
- Different layout approaches

Interpret creatively and make unexpected choices that feel genuinely designed for the specific context.

---

## Reference Files

For detailed examples and patterns, read:
- `references/aesthetic-examples.md` — concrete examples of each aesthetic direction with code patterns
- `references/typography-guide.md` — font pairing recommendations and loading patterns
- `references/animation-patterns.md` — CSS and JS animation patterns for different aesthetic directions

---

## Quick Decision Guide

| Request Type | Aesthetic Starting Point |
|---|---|
| SaaS dashboard | Industrial/utilitarian or luxury/refined |
| Portfolio site | Editorial/magazine or brutalist/raw |
| Landing page | Maximalist chaos or retro-futuristic |
| Mobile app UI | Soft/pastel or organic/natural |
| Data visualization | Brutally minimal or art deco/geometric |
| E-commerce | Luxury/refined or playful/toy-like |

These are starting points only. Always adapt to the specific context, brand, and audience.