★ Featured

Frontend Design

The official Claude frontend design skill by Anthropic. Guides Claude Code to create distinctive, production-grade frontend interfaces with high design quality, covering typography, color, motion, ...

Authoranthropics

Version1.0.0

LicenseMIT

Token count~557

UpdatedJun 5, 2026

Install

Quick install

via npx skills · works with 57+ agents

npx skills add https://github.com/anthropics/skills/tree/main/skills/frontend-design

Or pick agent:

npx skills add anthropics/skills --skill "Frontend Design" --agent claude-code

npx skills add anthropics/skills --skill "Frontend Design" --agent cursor

npx skills add anthropics/skills --skill "Frontend Design" --agent codex

npx skills add anthropics/skills --skill "Frontend Design" --agent opencode

npx skills add anthropics/skills --skill "Frontend Design" --agent github-copilot

npx skills add anthropics/skills --skill "Frontend Design" --agent windsurf

More install options

Shorthand — useful for multi-skill repos:

npx skills add anthropics/skills --skill "Frontend Design"

Manual — clone the repo and drop the folder into your agent's skills directory:

git clone https://github.com/anthropics/skills.git

cp -r skills/skills/frontend-design ~/.claude/skills/

How to use: Once installed, ask your agent to "use the Frontend Design skill" or describe what you want (e.g. "The official Claude frontend design skill by Anthropic. Guides Claude Code to cr"). Requires Node.js 18+.

Frontend Design

What is it?
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.

How to use it?

Install this skill in your Claude environment to enhance frontend design capabilities. Once installed, Claude will automatically apply the skill's guidelines when relevant tasks are detected. You can also explicitly invoke it by referencing its name in your prompts.

The full source and documentation is available on GitHub.

Key Features

Guides Claude to create distinctive, production-grade frontend interfaces with high design quality, covering typography, color, motion, spatial composition, and background treatments
Frontend development patterns and UI components
Seamless integration with Claude's development workflowView on GitHub

GitHub Stats

StarsForksLast UpdateAuthoranthropicsLicenseMITVersion1.0.0

Features

Related Skills

Web Asset Generator

Generate favicons, app icons (PWA), and social media Open Graph images from logos or text

120alonw0DesignDeveloper Tools00

Architecture Diagram Creator

Creates comprehensive HTML architecture diagrams with SVG visualizations showing business context, data flows, processing pipelines, and system architecture

350mhattingpeteDeveloper ToolsDesign00

Flowchart Creator

Creates HTML flowcharts and process diagrams with SVG-based nodes, decision diamonds, connecting arrows, and optional swimlanes with color-coded types

350mhattingpeteDeveloper ToolsDesign00

---

Source: https://github.com/anthropics/skills/tree/main/skills/frontend-design
Author: anthropics
License: https://opensource.org/licenses/MIT
GitHub Stars: 5700
Tags: frontend, ui-design, css, web-development, aesthetics

SKILL.md source

---
name: Frontend Design
description: The official Claude frontend design skill by Anthropic. Guides Claude Code to create distinctive, production-grade frontend interfaces with high design quality, covering typography, color, motion, ...
---

# Frontend Design

The official Claude frontend design skill by Anthropic. Guides Claude Code to create distinctive, production-grade frontend interfaces with high design quality, covering typography, color, motion, spatial composition, and UI design patterns

What is it?
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.

## How to use it?
Install this skill in your Claude environment to enhance frontend design capabilities. Once installed, Claude will automatically apply the skill's guidelines when relevant tasks are detected. You can also explicitly invoke it by referencing its name in your prompts.

The full source and documentation is available on GitHub.

## Key Features

* Guides Claude to create distinctive, production-grade frontend interfaces with high design quality, covering typography, color, motion, spatial composition, and background treatments
* Frontend development patterns and UI components
* Seamless integration with Claude's development workflowView on GitHub

### GitHub Stats
StarsForksLast UpdateAuthoranthropicsLicenseMITVersion1.0.0

### Categories
DesignDeveloper Tools

### Tags
frontendui-designcssweb-developmentaesthetics

### Features

## Related Skills
More from Design

### Web Asset Generator
Generate favicons, app icons (PWA), and social media Open Graph images from logos or text

120alonw0DesignDeveloper Tools00

### Architecture Diagram Creator
Creates comprehensive HTML architecture diagrams with SVG visualizations showing business context, data flows, processing pipelines, and system architecture

350mhattingpeteDeveloper ToolsDesign00

### Flowchart Creator
Creates HTML flowcharts and process diagrams with SVG-based nodes, decision diamonds, connecting arrows, and optional swimlanes with color-coded types

350mhattingpeteDeveloper ToolsDesign00

---

**Source**: https://github.com/anthropics/skills/tree/main/skills/frontend-design
**Author**: anthropics
**License**: https://opensource.org/licenses/MIT
**GitHub Stars**: 5700
**Tags**: frontend, ui-design, css, web-development, aesthetics