The Claude frontend design skill is Anthropic’s open-source set of instructions that pushes Claude away from templated, “AI-looking” interfaces and toward deliberate visual choices. This guide covers what the skill actually says, how to install it in Claude Code and claude.ai, how to prompt it, and how to review what it builds the way a frontend engineer would.
Most write-ups stop at the install command. The part that decides whether the output ships is the review: accessibility, performance, responsive layout, and CSS that doesn’t fight itself. That’s also the part interviewers test.
What to Expect
- A plain summary of the skill’s SKILL.md, based on Anthropic’s own repository.
- Exact install commands for Claude Code, plus how it works on claude.ai.
- Prompts that give the skill enough to work with.
- A review checklist with code, and interview questions about reviewing AI-generated UI.
Jump to a section
- What Is the Claude Frontend Design Skill?
- What the frontend-design SKILL.md Tells Claude
- How to Install the Claude Code Frontend Design Skill
- Using the Frontend Design Skill on Claude.ai and the API
- How to Invoke It: Example Prompts
- How to Review the Output: A Frontend Engineer’s Checklist
- Limitations of the Frontend Design Skill
- Frontend Design Skill Interview Questions
What Is the Claude Frontend Design Skill?
It’s a skill named frontend-design: a folder with one SKILL.md file that Claude loads when you ask it to build or restyle an interface. Anthropic publishes it in two places, the anthropics/skills repository and the claude-plugins-official plugin marketplace.
A skill isn’t a model or an extension that runs code on its own. Anthropic describes skills as folders of instructions, scripts, and resources that Claude pulls in dynamically for a specialized task. The anthropic frontend design skill is pure instructions: there are no scripts, just guidance on design direction, typography, layout, motion, and interface copy.
| Where | Package name | What you get |
|---|---|---|
| anthropics/skills repo | example-skills plugin |
frontend-design plus the other example skills |
| Official plugin marketplace | frontend-design plugin |
Only the frontend-design skill |
| claude.ai | Customize > Skills | Example skills you toggle on |
The marketplace listing describes the claude frontend design plugin as creating “production-grade frontend interfaces” that avoid “generic AI aesthetics”. Keep the word “production-grade” in perspective: it describes the goal of the instructions, not a guarantee about the code. You still review it.
The anthropics/skills README also says these skills are for demonstration and education, and that Claude’s behavior may differ from what the files show. Treat it as a strong default prompt, not a spec.
What the frontend-design SKILL.md Tells Claude
The SKILL.md asks Claude to act like the design lead of a studio whose client has already rejected templated proposals. Everything else follows from that framing: make specific, opinionated choices for this brief instead of reaching for defaults. Read the full file on GitHub; it’s short. Here’s what it covers, in our words.
Start from the subject, not a template
If the brief doesn’t say what the product is, Claude should propose a concrete subject, audience, and primary job, and confirm it. Distinctive choices come from the subject’s world: its industry, materials, and vocabulary. A kids’ toy and an analyst dashboard shouldn’t share a look.
Typography carries the personality
- One or two typefaces, chosen on purpose, with a clear type scale.
- Body line length under about 80 characters.
- Avoid the common tells: one accented word in a headline, all-caps labels, and extra labels stacked above content.
Structure has to mean something
Borders, numbering, dividers, and eyebrow labels should encode information. Numbered markers like 01 / 02 / 03 only belong on content that really is a sequence.
Motion is rare and earned
One orchestrated moment beats a fade-up on every section. Motion that responds to a user action (opening, expanding, confirming) is fine when it shows what changed.
Know what “AI-looking” means
The file lists the looks generated UI tends to cluster around, so Claude can avoid spending free design choices on them:
| Default look | Typical signs |
|---|---|
| Warm editorial | Cream background, serif display, terracotta accent |
| Dark with one neon | Near-black background, single acid-green or vermilion accent |
| Broadsheet | Hairline rules, square corners, dense columns |
| SaaS card kit | Identical rounded cards, one radius, same soft shadow, gradient washes |
| Template chrome | All-caps eyebrows, “A · B · C” meta strings, arrows on every link |
None of these is banned. If your brief asks for one, the brief wins. The rule is that Claude shouldn’t land on them by default.
Plan, check the plan, then build
Claude first writes a compact token plan: 4-6 named hex colors, typefaces and their roles, a layout concept (ASCII wireframes are suggested), and guiding principles. Then it checks the plan against the brief and revises anything generic, saying what changed. Only then does it write code, watching for CSS selectors whose specificity cancels each other out.
A quality floor and self-critique
The file asks for one bold element with everything else restrained, and a baseline that isn’t announced: responsive down to mobile, visible keyboard focus, reduced motion respected, accessible color. Where the environment supports it, Claude should screenshot its own work and critique it.
Copy is part of the design
Interface text should name things the way users think of them, use active verbs (“Save changes”, not “Submit”), keep an action’s name consistent through a flow, and make errors and empty states tell the user what to do next.
How to Install the Claude Code Frontend Design Skill
The fastest route is the official marketplace, which Claude Code registers for you the first time you start an interactive terminal session. Inside a Claude Code session, run:
/plugin install frontend-design@claude-plugins-officialIn a session this doesn’t install immediately. It opens the /plugin panel on the plugin’s details so you can review it and pick a scope. If the summary says Run /reload-plugins to apply., Claude Code runs the reload for you; you can also run /reload-plugins yourself.
Choose a scope
| Scope | Who gets it | Settings file |
|---|---|---|
| User | You, in every project on this machine | ~/.claude/settings.json |
| Project | Everyone working in the repo | .claude/settings.json (committed) |
| Local | You, in this repo only | .claude/settings.local.json |
Project scope is the one to pick if your team wants consistent UI output. Committing the setting enables the plugin for collaborators, but each of them still installs it once.
From your shell or a script
On a machine where nobody has opened an interactive session yet, the official marketplace isn’t registered, so add it first:
claude plugin marketplace add anthropics/claude-plugins-official
claude plugin install frontend-design@claude-plugins-officialShell installs default to user scope; pass --scope project or --scope local to change that.
Alternative: the anthropics/skills marketplace
The skill also ships inside the example-skills plugin. Register the repo as a marketplace, then install that plugin:
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skillsThis brings in the other example skills too. If you only want frontend-design, use the official marketplace plugin above.
To confirm it’s installed, open the Installed tab in /plugin. The official steps are in Anthropic’s Discover and install plugins guide.
Using the Frontend Design Skill on Claude.ai and the API
On claude.ai you don’t install anything from a terminal. The anthropics/skills README says its example skills “are all already available to paid plans in Claude.ai”. Skills need code execution, so the setup is:
- In Settings > Capabilities, turn on code execution and file creation (shown as “Create and edit files” in the newer settings layout).
- Go to Customize > Skills.
- Toggle on the skills you want.
On Team and Enterprise plans, an owner controls skills under Organization settings > Plugins & skills. If the Skills section is missing or greyed out, code execution is usually off. Anthropic’s Use skills in Claude article has the full steps.
Two more routes, both from Anthropic’s docs:
- Custom upload: zip a skill folder and upload it in Customize > Skills. Useful if you fork SKILL.md to add your design system’s tokens.
- Claude API: pre-built and custom skills work through the code execution tool; see the Skills API guide.
Skills you enable on claude.ai also sync into Claude Code when it’s signed in with the same account (Claude Code v2.1.273 or later). The sync is one-way: plugins installed in Claude Code don’t show up on claude.ai.
How to Invoke It: Example Prompts
You usually don’t have to call it. The plugin README says Claude uses the skill automatically for frontend work, because its description matches UI requests. To force it, invoke it by name. Claude Code namespaces plugin skills as /plugin-name:skill-name; type / in Claude Code to see the exact command your install exposes, then add your request after it.
On claude.ai, naming the frontend-design skill in your request works too: “Use the frontend-design skill to…”. The README’s own example prompts are short (“Create a dashboard for a music streaming app”), and they work. But the skill is built around a brief, so a better brief gets a better result.
What a strong prompt includes
| Ingredient | Why it matters to the skill | Example |
|---|---|---|
| Subject | Visual choices come from the subject’s world | Neighborhood bike repair co-op |
| Audience | Sets tone, density, and type size | Commuters, many on phones |
| Primary job | Decides what the hero leads with | Book a repair slot |
| Constraints | The brief overrides the skill’s defaults | React + Tailwind, our brand blue |
| Real content | Placeholder copy makes UI feel templated | Actual prices and opening hours |
Prompts to adapt
Build a single-page React component for a bike repair co-op's booking page.
Audience: commuters on phones. Main job: pick a service and a time slot.
Use these services and prices: [list]. Show me your design plan
(colors, type, layout wireframe) before you write code.Restyle our settings panel (src/settings/Panel.tsx). Keep the existing
props and tests. Stay inside our tokens in tokens.css. Add a dark mode
that respects prefers-color-scheme.Critique this landing page against your design plan. List anything that
reads as a generic default, then fix the top three.Asking to see the plan first is the most useful habit. The skill already writes one; making it visible lets you correct the direction before hundreds of lines of CSS exist.
How to Review the Output: A Frontend Engineer’s Checklist
The skill sets a quality floor, but it’s a prompt, not a test suite. Review the result the way you’d review a teammate’s pull request. These are the checks that catch the most problems in generated UI.
| Area | Check | How |
|---|---|---|
| Semantics | Real buttons, links, headings, labels | Read the markup; run axe or Lighthouse |
| Keyboard | Tab order, visible focus, no traps | Unplug the mouse and use the page |
| Contrast | 4.5:1 for body text, 3:1 for large text | DevTools color picker or the function below |
| Motion | Animations respect reduced motion | Emulate prefers-reduced-motion in DevTools |
| Responsive | No horizontal scroll at 320px, readable line length | Device toolbar, zoom to 200% |
| Performance | Font weight count, image sizes, layout shift | Network panel, Lighthouse, Web Vitals |
Accessibility
Distinctive palettes are where contrast fails first. Check every text and background pair, including hover and disabled states. This is the WCAG 2.x contrast formula:
function luminance(hex) {
const rgb = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255);
const [r, g, b] = rgb.map((c) =>
c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
);
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}
function contrastRatio(fg, bg) {
const [hi, lo] = [luminance(fg), luminance(bg)].sort((a, b) => b - a);
return (hi + 0.05) / (lo + 0.05);
}
console.log(contrastRatio('#767676', '#ffffff').toFixed(2)); // 4.54
console.log(contrastRatio('#999999', '#ffffff').toFixed(2)); // 2.85Answer: #767676 on white passes AA for body text (4.54); #999999 fails (2.85). Light grey captions are a common miss.
Also look for a div with an onClick where a button belongs, icon-only buttons with no accessible name, and custom tabs, menus, or dialogs without the keyboard behavior the ARIA patterns expect.
Deep dive: Web Accessibility and ARIA Roles
Motion and focus
Make sure the one animated moment has a reduced-motion fallback, and that a styled focus ring didn’t replace the default with nothing:
.hero-reveal { animation: reveal 600ms ease-out both; }
@media (prefers-reduced-motion: reduce) {
.hero-reveal { animation: none; }
}
:focus-visible {
outline: 3px solid var(--color-focus);
outline-offset: 2px;
}Responsive layout
Test at 320px wide and at 200% zoom. Watch for fixed pixel widths, display type that overflows on phones (use clamp() for fluid sizes), and tap targets that are too small. Check the line length rule from the skill holds on wide screens too.
Performance
“Choose typefaces deliberately” can turn into four font families and eight weights. Count the font files in the Network panel, preload only what renders above the fold, and use font-display: swap. Give images explicit width and height so they don’t shift layout, and lazy-load anything below the fold.
Deep dive: Critical Rendering Path, Image Optimization Strategies, and Code Splitting and Lazy Loading
CSS and code structure
The skill itself warns about selectors that cancel each other out. In review, look for one-off magic numbers instead of tokens, duplicated values that should be custom properties, !important used to win specificity fights, and a single huge component that should be split. If your project has a design system, the output should use it rather than invent a parallel one.
Deep dive: CSS Interview Questions
Copy
Check that buttons describe their action, the same action keeps one name, and error and empty states say what to do. Replace any invented content (prices, testimonials, stats) with real data before shipping.
Limitations of the Frontend Design Skill
Knowing where the skill stops saves you from trusting it in the wrong places.
- It’s guidance, not enforcement. SKILL.md asks for accessibility and responsiveness, but nothing verifies them. Your linting, tests, and review still do that.
- It’s about visual design. It doesn’t cover state management, data fetching, routing, or testing. Those decisions are still yours.
- Bold isn’t always right. The skill leans toward distinctive, opinionated looks. For internal tools or a product with a strict design system, say so in the brief; the skill gives the brief priority.
- Self-critique depends on the environment. Screenshot-based review only happens where Claude can take screenshots.
- Behavior can differ from the file. Anthropic notes that the example skills are for demonstration and that what Claude does may differ from what they show.
- Invented content. Without real copy, Claude writes placeholder text. Treat any numbers or quotes in the output as fake until you replace them.
- Trust. Anthropic’s guidance is to install skills only from trusted sources and read a skill’s files before enabling it. That applies to forks of this one too.
Frontend Design Skill Interview Questions
AI tools don’t remove the frontend interview; they move the focus to judgment. If you mention Claude or the frontend design skill in an interview, expect follow-ups like these.
1. How would you review a UI component an AI tool generated?
The same way you’d review a teammate’s PR, with extra attention to what generators commonly skip: semantic HTML, keyboard support, contrast, reduced motion, and responsive behavior. Then check it fits the codebase: tokens, existing components, tests.
“I run it with a keyboard only, check contrast on every state, test at 320px and 200% zoom, and look at the Network panel for font and image weight. Then I check it uses our design tokens instead of new magic numbers.”
Practice: Accessible Tabs
2. Why does generated UI often look the same?
Without a specific brief, a model falls back on the most common patterns it has seen: identical rounded cards, gradient accents, centered heroes with a big stat. The frontend-design skill exists to counter that by grounding choices in the subject and making Claude check its plan for defaults before writing code.
3. What does “accessible by default” mean for a custom component?
Native elements first (button, a, label, dialog), a visible focus indicator, correct roles and states only where native elements don’t cover it, and full keyboard operation that matches the ARIA pattern for that widget.
Practice: Accessible FAQ Accordion and Design an Accessible Dialog
4. How do you respect reduced-motion preferences?
Wrap non-essential animation in a prefers-reduced-motion: reduce media query that removes or shortens it. In JavaScript, read window.matchMedia('(prefers-reduced-motion: reduce)').matches before starting animations. Keep motion that explains a state change, but make it brief.
5. How would you add dark mode to a generated design?
Move colors into CSS custom properties, define a second set under prefers-color-scheme: dark and a class or data attribute for a manual toggle, and recheck contrast for every pair in both themes. Persist the user’s choice and apply it before first paint to avoid a flash.
Practice: Design a Theme Switcher
6. Custom fonts make the design. How do you keep them fast?
Limit families and weights (a variable font can replace several files), self-host or preconnect, preload only the above-the-fold face, use font-display: swap, and subset if you only need some characters. Measure layout shift when the font swaps in.
7. When would you not use an AI design skill at all?
When the product has a mature design system and the job is assembling existing components, or when the work is mostly logic: state, data, and edge cases. A distinctive-look skill adds little there, and its preference for bold choices can fight your system unless the brief constrains it.
8. Can you build these components without AI help?
Interviews still expect it. Coding rounds ask you to build tabs, modals, accordions, and progress bars from scratch, with accessibility and state handled correctly. AI-assisted work only helps if you can spot when its output is wrong.
Practice: Tabs, Accordion, Progress Bar, and Star Rating System
Where to Go Next
Install the skill, ask for the design plan before code, and run the review checklist on everything it builds. The faster you can spot an inaccessible control or a layout that breaks at 320px, the more useful any AI tool becomes.
To build that judgment:
- Work through the React coding questions: tabs, modals, and forms built by hand, with accessibility.
- Read the accessibility interview questions and the CSS interview questions.
- Practice frontend system design, where design systems and theming come up.
- Pick a study plan or quiz yourself on fundamentals.
- New to the field? Start with how to become a frontend developer.
Related reading: Frontend testing: unit, integration, and E2E with interview questions · Frontend frameworks compared: React vs Vue vs Angular vs Svelte