frontend-design — distinctive UI generation

← Skills · From the community

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’s an Anthropic-published skill in the official anthropics/skills marketplace.

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 Add the marketplace — once per machine

   /plugin marketplace add anthropics/skills

3. 3 Install the skill

   /plugin install frontend-design@skills

4. 4 Use it

   /frontend-design

Next skill →

gsd-* — Get Shit Done framework family

A light-weight meta-prompting, context-engineering and spec-driven development system for Claude Code. A family of commands (`gsd:new-project`, `gsd:plan-phase`, `gsd:execute-phase`, `gsd:progress`, etc.) for managing multi-week projects with persistent `.planning/` state and per-phase artefacts.

Open it → Back to all skills