frontend-design — distinctive UI generation

← Skills · Official — from Anthropic

Slash command /frontend-design

distinctive UI generation

Anthropic's official frontend-design skill — generates production-grade components and pages with distinctive visual choices, avoiding the generic "AI-slop" aesthetic that gives away machine-generated UIs.

both ⏱ ~1-2 hours per page View source ↗

In practice

Building a landing page for a new internal dashboard. Without the skill: Claude produces a competent-but-generic gradient hero, three feature cards, and a pricing table — fine, but recognisably AI-shaped. With `frontend-design`: the same prompt produces a layout with unexpected type scale, an asymmetric hero, and a colour palette that wasn't reached for by reflex. Same effort; output that doesn't apologise for being machine-made.

frontend-design is Anthropic’s official skill for steering Claude away from default UI output. The default Claude aesthetic — symmetric cards, generic shadows, the same Tailwind palette every time — is recognisable from across the room. This skill pushes the model toward distinctive choices: unusual fonts, bolder colour palettes, atmospheric effects.

Use it: when the visual outcome actually matters and you don’t want the page to look obviously generated. Pairs well with /team for end-to-end feature work where the front end is part of the deliverable.

Access

Public — no access request needed. It ships as its own plugin in Claude Code’s official marketplace, which is configured out of the box — so there is no marketplace add step.

What this catalog entry does not cover

The skill itself ships with worked-example aesthetics (Stripe, Linear, Apple-influenced, etc.) — those are documented upstream in the Claude plugin page. This hub entry is the “should I install this?” decision page, not the full skill manual.

Get this skill running

Copy-paste into Claude Code. The marketplace + install steps run once per machine; the last one is how you call the skill day-to-day.

1. 1 Access

   Public repo — no access request needed.

2. 2 Install the skill

   /plugin install frontend-design@claude-plugins-official

3. 3 Use it

   /frontend-design

Next skill →

/grill-me — get interrogated before anything gets built

Turns Claude into an interviewer that works through your plan as a decision tree, one round of numbered questions at a time — each with its recommended answer — until nothing is left silently assumed. It refuses to start building until you confirm you agree.

Open it → Back to all skills