topskills
Browse Skills

frontend-design

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

Score 0(?)OfficialAll surfacesby AnthropicSourceDocs
Verified for:

Install

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

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 this skill

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.

ReactTailwindDesign

Score breakdown

Score breakdown

rubric 1.0
Install count
18.1/20
Provenance
15/15
GitHub stars
14.4/15
Recency
6/10
Compatibility
10/10
Documentation depth
10/10
Install ergonomics
10/10
License
5/5
Verification freshness
3/5

Composite 0–100 score derived from 9 verifiable signals. See the rubric →

Related skills

Official

Self-contained HTML artifacts with React + shadcn/ui — no build step, just paste and run.

Reactshadcn/uiArtifacts
All surfaces
Official

Lock generated UIs to a brand. Anthropic's own guidelines, formalized as a skill.

BrandGuidelinesIdentity
All surfaces
Official

Single seed prompt → cohesive token system. Tokens that look intentional, not generated.

TokensDesign systemTheming
All surfaces

Skill FAQ

About frontend-design

What is the frontend-design skill?

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.

Which agents does frontend-design work with?

Claude Code, Claude.ai (web app), Claude API, Cursor, Codex CLI, Gemini CLI, Antigravity IDE.

How do I install frontend-design?

Run `npx skills add github.com/anthropics/skills --skill frontend-design` for Claude Code. See the install panel for per-agent commands.

Is frontend-design free to use?

Yes — frontend-design is open source (MIT).

Who maintains frontend-design?

frontend-design is published by Anthropic and was last updated on 2026-04-22.

What is frontend-design best for?

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