Frontend Design Skill

Distinctive, production-grade web interfaces. React + Tailwind + shadcn/ui by default. Avoids generic AI aesthetics.

Install

npx degit anthropics/skills/skills/frontend-design ~/.claude/skills/frontend-design

The frontend-design skill is the antidote to generic AI-looking websites. It pulls from a curated set of design references and builds interfaces with opinionated typography, restrained color, and intentional spacing.

What it’s good at

Landing pages for products that need a non-generic identity
Component design with consistent spacing and rhythm
Web heroes that look like a designer made them

Composes with

polish for last-mile alignment fixes
typeset to dial in the type scale
colorize if your output is too monochromatic
arrange to fix spacing rhythm
animate to add motion thoughtfully

The full design suite is itself worth a feature — see the related design system tour.

Example prompt

Use frontend-design to build a landing page for a calm productivity app.
Editorial typography, off-white palette, a single accent color, generous
whitespace. No glassmorphism, no rainbow gradients.

Related skills

slides design brand

Anthropic Brand Guidelines Skill

Apply Anthropic's official colors and typography to any artifact. Poppins for headings, Lora for body, three accent colors that won't fight each other.

poster design

Canvas Design Skill

One-prompt poster generation with editorial typography, layered composition, and color systems baked in.

ui diagram ml

Draw.io Architecture Diagram Skill

Generate Draw.io diagrams for ML models, network architectures, and algorithm flows. Two modes — generate from scratch or transfer-style from a reference image. By 小帅同学 (@xstongxue).