---
name: frontend-design
slug: frontend-design
score: 95
rubric: 1.0
provenance: anthropic
publisher: Anthropic
license: MIT
capability: read-only
canonical: https://top-agent-skills.com/skill/frontend-design
---

# frontend-design

Escape generic AI-generated UIs. Forces a bold, distinctive design direction before any code is written.

## Install

### Claude Code

```bash
npx skills add github.com/anthropics/skills --skill frontend-design
```

### Cursor

```bash
npx skills add github.com/anthropics/skills --skill frontend-design --target cursor
```

### Codex CLI

```bash
codex skills add github.com/anthropics/skills/skills/frontend-design
```

### Gemini CLI

```bash
gemini skills add github.com/anthropics/skills --skill frontend-design
```

### Antigravity IDE

```bash
antigravity-awesome-skills install --skill frontend-design
```

### Claude.ai (web app)

Settings → Features → Upload skill (download zip from anthropics/skills repo)

### Claude API

POST /v1/skills with the frontend-design.zip payload

## Best for

Greenfield landing pages, marketing sites, and any UI that should feel intentional rather than templated.

## Not ideal for

Ports of an existing design system — frontend-design pushes a bold direction that may overwrite established tokens.

## About

Forces Claude to commit to a bold, distinctive design direction before generating code. Avoids the generic AI aesthetic with cohesive typography, color, motion, and spatial composition.

## Compatibility

claude-code, claude-ai, claude-api, cursor, codex, gemini-cli, antigravity

## Metadata

- Categories: frontend-design
- Tags: React, Tailwind, Design
- Setup time: 1 min
- Complexity: Low
- Last update: 2026-04-22
- Verified: 2026-04-29
- Source: https://github.com/anthropics/skills/tree/main/skills/frontend-design
- Docs: https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md

---

_Indexed by Top Agent Skills. Score breakdown: https://top-agent-skills.com/about/methodology_