Claude UI Design Skills That Fix Generic Frontend Output

The Claude UI design skills worth installing are Anthropic's frontend-design skill for aesthetic direction, a motion skill set such as Emil Kowalski's for animation, an accessibility skill for WCAG checks, the official shadcn/ui skill if you build with shadcn, and one design-system skill you write yourself. Each is a folder of instructions Claude loads only when a UI task needs it, so the cost of installing them is close to zero.

Ask Claude for a landing page with no guidance and you get something competent and forgettable: the same font, the same gradient, the same rounded cards. Skills give Claude a point of view before it writes a line of CSS.

The short version:

• Want less generic visuals? Install frontend-design.
• Want animation that feels right? Add a motion skill.
• Shipping to real users? Add an accessibility and UI-audit skill.
• Have a brand or component library? Write your own design-system skill. It will do more for you than any public one.

Claude UI design skills at a glance

One caution: Anthropic's own plugin directory warns you to trust a plugin before installing it, because it can't verify what third-party plugins contain. Read the SKILL.md first. It's plain Markdown.

Why Claude's UI looks generic without a skill

Anthropic explained this in its post on improving frontend design through skills. Without direction, models drift toward the safest, most common patterns in their training data. The post calls this distributional convergence, and the visible result is what people call "AI slop": Inter, purple gradients on white, little or no motion.

You could paste a long design brief into every prompt. A skill does that job once. Claude reads only the skill's name and description up front, then loads the full instructions when you ask for UI work. Our explainer on how Claude Skills work covers that loading mechanism in detail.

The Claude frontend design skill (frontend-design)

frontend-design is Anthropic's skill for visual direction. Its description says it gives guidance for "distinctive, intentional visual design" when you build new UI or reshape an existing one.

The current version works less like a style guide and more like a process. It tells Claude to act as a studio design lead, then:

1. Ground the design in the subject. If you don't name the product, audience and main job, Claude proposes them and checks with you. A toy for kids and a dashboard for analysts shouldn't look alike.
2. Plan a compact token system. Four to six named hex colours, the typefaces and their roles, and a one-line layout concept with a rough wireframe.
3. Review the plan against the brief. Anything that reads like the default for any similar page gets revised, with a note on what changed.
4. Build, then critique, using screenshots where possible.

It's specific about motion, too. Effects that run without user input should be used sparingly. One orchestrated page-load or reveal beats fade-ins on every section. Motion that responds to a click or an expand is welcome when it shows what changed.

And it sets a quality floor without fuss: responsive layouts, visible keyboard focus, respect for reduced-motion settings, and accessible contrast.

The skill also lists the looks that now signal AI-generated design, such as identical rounded cards with one soft grey shadow, or tracked-out all-caps eyebrow labels. It doesn't ban them. It says that where your brief leaves a choice open, Claude shouldn't spend it on a cliché.

How to install frontend-design in Claude Code

You have two routes. frontend-design is in Anthropic's official plugin directory, so you can find it under /plugin → Discover, or run:

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

It's also in the example-skills bundle of Anthropic's skills repository, alongside brand-guidelines, theme-factory and web-artifacts-builder:

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

Pick one route, not both, so you don't end up with two copies of the same skill.

How to install it on claude.ai

On claude.ai, skills are uploaded as ZIP files. Per Anthropic's guide to using skills in Claude, you first turn on code execution in Settings → Capabilities, then go to Customize → Skills, click +, choose Create skill, and Upload a skill.

So: download the frontend-design folder from GitHub, zip it, and upload it. The same guide lists skills on Free, Pro, Max, Team and Enterprise plans. On Team and Enterprise, an owner controls whether skills are allowed and can provision them for everyone.

UI/UX, interaction and motion skills

frontend-design handles direction. It doesn't go deep on how a dropdown should ease or whether a modal traps focus. That's where specialist skills earn their place.

Motion: Emil Kowalski's skills

Emil Kowalski's skills are a focused set for motion and interface polish. His README says they come from years of design engineering work at Vercel and Linear. The repository is MIT-licensed and installs with npx skills@latest add emilkowalski/skills.

The ones that matter for UI work:

The README's example of an agent mistake: an ease-in curve on an element that's entering, when it should be ease-out. If you wouldn't spot that in a diff, you need this set.

Interaction and accessibility: the ui-design plugin

Seth Hobson's agents repository is a large community plugin marketplace. Its ui-design plugin bundles several skills, including:

• interaction-design: microinteractions, loading states, transitions and toasts, with a timing table (100–150ms for hovers and clicks, 200–300ms for toggles and dropdowns) and named easing curves.
• accessibility-compliance: WCAG 2.2 patterns, screen reader support, focus management and reduced-motion handling.
• design-system-patterns, responsive-design and mobile-specific design skills for iOS, Android and React Native.

Install it from Claude Code:

/plugin marketplace add wshobson/agents
/plugin install ui-design@claude-code-workflows

UI audits: Vercel's web-design-guidelines

Vercel's agent-skills repository includes web-design-guidelines, which reviews your UI files against Vercel's Web Interface Guidelines. It fetches the latest rules before every review and reports findings as file:line. It triggers on requests like "review my UI" or "check accessibility", so it works best as the last step before you merge.

Components and brand: shadcn/ui, brand-guidelines and theme-factory

If your project uses shadcn/ui, install the official shadcn skill. It reads your project's config on each run, so Claude knows which components you already have, which Tailwind version you're on, and where files live. Its rules push Claude toward your existing components and semantic colour tokens like bg-primary instead of raw values like bg-blue-500. That one rule removes a lot of off-brand output.

Anthropic's brand-guidelines and theme-factory are less useful as-is. brand-guidelines applies Anthropic's colours and fonts, and theme-factory ships ten preset themes. Treat them as templates: they show how to write brand rules a skill can apply.

How to write your own design-system skill

Public skills give Claude taste. Only your own skill gives it your taste: your tokens, your components, the spacing your designer keeps fixing in review.

A skill is a folder with a SKILL.md inside. In Claude Code, put it in .claude/skills/ in your repo so the whole team gets it, or in ~/.claude/skills/ for every project on your machine. Here's a hypothetical example for a made-up company called Acme:

---
name: acme-design-system
description: Acme's UI rules - colour tokens, type scale, spacing and which shadcn/ui components to use. Use when building or editing any screen, component, page or email template.
---

# Acme design system

## Tokens
- Colours: use the CSS variables in src/styles/tokens.css only. Never raw hex.
- Type: Söhne for UI, Tiempos for long-form. Scale: 14 / 16 / 20 / 28 / 40.
- Spacing: 4px grid. Section gaps are 64px on desktop, 40px on mobile.

## Components
- Use the existing components in src/components/ui before writing new ones.
- Primary buttons are full-width on mobile. One primary button per view.

## Before you finish
- Check contrast meets WCAG AA.
- Check every interactive element has a visible focus state.
- See reference/patterns.md for empty states and error messages.

Four rules make this work:

1. Write the description for the trigger, not the reader. Claude decides whether to load the skill from the description alone. Name the tasks: screens, components, pages. Anthropic's Claude Code skills docs say the description is cut off at 1,536 characters in the skill list, so put the use case first.
2. Point at files, don't paste them. Reference your tokens file instead of copying 200 variables. Keep SKILL.md under 500 lines, as the docs recommend, and move detail into a reference/ folder that Claude reads only when needed.
3. Write rules as checks. "Check every interactive element has a focus state" gets followed. "Make it accessible" gets nodded at.
4. Add the mistakes from your last three design reviews. That's where a skill pays for itself.

If you've never written one, our guide to Claude skills for developers walks through the format with working examples. To use the skill on claude.ai, zip the folder and upload it the same way as above.

Before and after: what changes in your prompts

With these skills installed, your prompts can get shorter, but the details you do give matter more.

Two habits make the "after" column work. Name the subject and audience, because frontend-design builds its whole direction from them. And ask for the plan first ("show me the token system and layout before you build"), so you correct direction while it's still cheap.

Claude UI design skills vs Claude Design

Claude Design is an Anthropic product: you describe a design, Claude builds it on a canvas next to the chat, and you refine it with comments and direct edits before exporting. It's a place where design happens.

Skills aren't a place. They're instructions that change how Claude behaves wherever it writes UI code: in Claude Code, in a claude.ai chat, or in the API.

They work together. Use Claude Design to explore a direction, and a design-system skill to make sure the code Claude writes later still follows it.

FAQ

Is the frontend-design skill free?

The skill itself is a public folder in Anthropic's GitHub repository. Running it needs Claude, and on claude.ai it needs code execution turned on. Which plans include skills is covered in Anthropic's help-centre guide linked in the install section above.

Do Claude skills work with Cursor or Codex?

Many do. Vercel's skills CLI, which Emil Kowalski's, Vercel's and shadcn's skills use, lists Claude Code, Codex, Cursor and OpenCode among the agents it installs into. Plugin-marketplace commands like /plugin install are specific to Claude Code.

Will multiple design skills conflict?

They can. If two skills both set typography rules, Claude gets two sets of instructions. Keep one skill for direction (frontend-design or your own design system) and use the others for narrow jobs like motion and audits.

Can a skill read my Figma files?

Not on its own. A skill is instructions and files. To pull live Figma data into a session you'd normally connect an MCP server, which is a separate kind of connector, and let the skill tell Claude how to use what it fetches.

Key takeaways

• Install frontend-design first. It plans a token system, checks it against your brief, and holds a quality floor.
• Add specialists for narrow jobs: Emil Kowalski's skills for motion, the ui-design plugin for interaction and WCAG, web-design-guidelines for audits, the shadcn skill for shadcn projects.
• Write your own design-system skill for brand consistency. Keep it short, point at your token files, and write rules as checks.
• Claude Design is a product for making designs. Skills shape the code Claude writes everywhere it runs.

Setting up a skill stack is a small job, but it still means repos, marketplaces and config folders. If you'd rather start from a setup someone already got working, Taku mirrors AI apps and skills into a desktop workspace where you can run them and make them your own, and the marketplace is where they're listed. Taku is in Beta, and the Mac app is available now.