The frontend-design skill: install it, use it, make your own

What is the frontend-design skill?

frontend-design is an Agent Skill from Anthropic whose job is to stop Claude from producing the same generic, AI-looking interface for every request. It ships as a plugin in Anthropic's official Claude Code marketplace and as a folder in the anthropics/skills repo on GitHub. The description reads: "Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one."

When you ask Claude Code to build a landing page, a dashboard or a settings screen, the skill loads and changes how Claude approaches the work. It pushes Claude to choose a visual direction that fits your product, plan the palette and type before writing code, and check the result against a list of common defaults.

The repo's README says its skills are "provided for demonstration and educational purposes only," so treat it as a strong starting point and test it on your own work.

What is inside the SKILL.md

The file is one SKILL.md with no scripts. It casts Claude as the design lead at a studio whose client "has already rejected proposals that felt cliché or templated." Then it covers five areas. This is a summary, not the full text; read the original on GitHub for the details.

Grounding in the subject. If the brief doesn't say what the product is, Claude should propose a subject, an audience and the design's main job, and confirm before designing. Distinctive choices come from the subject's own world: its industry, materials and vocabulary.

Design principles.

• Open the hero with the most characteristic thing in the subject's world, and don't default to a big number, small label and gradient.
• Typography carries the personality. Use one or two families, chosen on purpose, with a clear type scale. Keep line lengths under about 80 characters.
• Avoid common tells, like accenting one word in a headline, all-caps labels, and labels above every block.
• Structure is information. Numbered markers like 01, 02, 03 only belong on content that really is a sequence.
• Motion is rare and deliberate: one orchestrated moment beats a fade-in on every section.

A two-pass process. The skill lists traits that AI-generated design currently clusters around, such as a warm cream background with a serif display and terracotta accent, the "SaaS-card kit" of identical rounded cards with soft shadows, and template chrome like tracked-out eyebrow labels and arrows on every link. These are allowed when a brief asks for them, but shouldn't be the default. Claude first writes a compact plan: four to six named hex colors, typefaces and roles, a layout sketched in prose and ASCII wireframes, and a few principles. It then reviews the plan against the brief, revises anything generic, and only then writes code.

Restraint and self-critique. "Spend your boldness in one place." Build to a quality floor without fanfare: responsive down to mobile, visible keyboard focus, reduced motion respected, accessible color. Take screenshots to review the work when the environment allows it.

Writing. Words in a design should help people use it. Name things from the user's side ("notifications," not "webhook config"), use active verbs on buttons ("Save changes," not "Submit"), keep an action's name the same through the flow, and make errors explain what happened and how to fix it.

Where the skill lives

You will find the same skill in three Anthropic repos on GitHub. As of today the SKILL.md file is identical in all three:

The plugin also has a page on Claude Marketplace, whose Claude Code button copies the install command for the official marketplace. For most people, the official marketplace is the simplest route: Claude Code adds it on first launch, and its plugins update automatically by default.

How do you install frontend-design?

You can install it three ways: the official plugin, the skills command, or by hand. All three put the same skill in front of Claude Code.

Option 1: the official plugin. In a Claude Code session, run:

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

Claude Code shows the plugin's details and asks for a scope: just you, everyone in the repo, or this repo only. From your shell, without opening a session, the same install is:

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

The anthropics/skills repo is also a marketplace of its own. Its example-skills plugin bundles frontend-design with the other example skills:

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

See Claude Code plugins for how scopes and marketplaces work.

Option 2: the skills command. This copies the skill folder into your project's skills folder instead of installing a plugin. Add -g to install it for all your projects.

# this project only
npx skills add anthropics/skills --skill frontend-design -a claude-code

# every project on this machine
npx skills add anthropics/skills --skill frontend-design -a claude-code -g

The command needs Node.js 22.20 or later. It also supports other agents, such as Codex and Cursor; drop -a claude-code to choose interactively. A copied skill doesn't update by itself; run npx skills update to refresh it.

Option 3: by hand. Create ~/.claude/skills/frontend-design/ and save the skill's SKILL.md there, along with its LICENSE.txt.

To check it loaded, start a new session and type /. The skill appears in the menu. Plugin skills show with the plugin's name as a prefix.

How do you use frontend-design?

Ask for UI work and Claude matches your request to the skill's description; you don't need to name the skill. To be sure, mention it: "use the frontend-design skill."

The skill does its best work when the brief gives it something to design from. It follows the brief's own words over its defaults, so say what you know. A thin prompt like "make a landing page" leaves Claude guessing at the subject. Compare these:

Build a landing page for a booking app for independent climbing gyms.
Audience: gym owners in their 30s and 40s, not designers. Main job: get
them to book a 15-minute demo. Real content: three features (class
scheduling, waiver signing, day passes) and two short quotes I'll supply.
Use React and Tailwind. Show me your design plan before you write code.

Restyle the settings page in src/app/settings. Keep the layout and every
field. The product is a calm, focused notes app, so the page should feel
quiet. Our brand color is #2F6B4F and we use Inter for everything. Fix
the button copy so every action says exactly what it does.

Design an internal dashboard for a warehouse team that tracks late
shipments. It will be shown on a wall TV and checked on phones. Dense
data is fine. Avoid the identical-card grid look. Give me two different
design plans first, then build the one I pick.

What these have in common:

1. A real subject and audience, so the visual direction has something to come from.
2. The page's one job, so the hero and calls to action point somewhere.
3. Fixed constraints like brand colors, fonts and framework, which the skill treats as binding.
4. A request to see the plan first. The skill already plans before building. Asking to see it lets you redirect before any code exists.

After the first build, ask for a critique pass: "Review this against your plan. What reads as a default? Change one thing." That matches the skill's own advice to remove one accessory before leaving the house.

Make your own design skill

The frontend-design skill is general on purpose. Your product has a brand, a component library and things it never does. You can write those into a skill of your own.

Option A: a brand skill that works alongside it. Keep Anthropic's skill as it is and add a short one with your specifics. This is the easiest to maintain:

---
name: acme-ui
description: Acme's product design rules for brand colors, type, components and
  copy. Use whenever building or changing UI in an Acme app, together with
  any general design guidance.
---

# Acme UI

## Tokens
- Background #FAFAF7, text #1C1C1A, brand #2F6B4F, danger #B3261E.
- One typeface: Inter. Sizes 14, 16, 20, 28, 40. Never all caps.

## Components
- Use the components in src/components/ui before writing new ones.
- Buttons are verbs: "Save note", "Delete note". Never "Submit" or "OK".

## Never
- No gradients, no glass effects, no drop shadows on cards.
- No numbered markers unless the content is a real sequence.

Save it as .claude/skills/acme-ui/SKILL.md in your repo so your whole team gets it. If your design rules are long, keep them in a DESIGN.md at the repo root and have the skill point to it, so designers can edit one plain document.

Option B: fork the skill. If you want to change the core behavior, copy the folder, rename it (the name must match the new folder name, like acme-frontend-design), and edit the instructions. The skill is licensed under Apache 2.0, which lets you modify and share it; keep the LICENSE.txt and note that you changed the files.

Either way, three things make a design skill work:

• A sharp description. It decides when the skill loads, so name the work: building, restyling, components, pages.
• Concrete values. Hex codes, font sizes and file paths beat adjectives like "clean" or "modern."
• A short "never" list. Banned patterns are easy for Claude to check against and easy for you to review.

For the full format, see how to write a SKILL.md. For more ideas, see Claude skills examples and the best Claude Code skills.

Keep your design prompts in one place

Good design briefs get reused: the same audience notes, brand tokens and "show me the plan first" line show up in every request. Kipt saves prompts like the ones above in your own private GitHub repo. Blanks like {{audience}} or {{brand_color:#2F6B4F}} open a small form when you copy, and Promote to skill turns a brief you keep reusing into a SKILL.md you can install with npx skills add. To convert one prompt now, use the free SKILL.md generator.