# Claude design skill

> Install Anthropic’s frontend-design skill in Claude Code, see why it still makes generic UI, and give it a measured DESIGN.md so it builds your real look.

Canonical page: https://sitepeel.dev/guides/claude-design-skill/

Claude’s design skill is Anthropic’s free frontend-design skill: a SKILL.md that tells Claude to choose a deliberate palette, typeface and layout instead of templated defaults. Install it in Claude Code with `/plugin install frontend-design@claude-plugins-official`. It still has to invent a look, so give it a DESIGN.md measured from a real site.

Published: 2026-10-28

Tool used in this guide: [DESIGN.md generator extension](https://sitepeel.dev/design-md-chrome-extension/index.md)

Free website tool for this task: [DESIGN.md generator](https://sitepeel.dev/design-md/index.md) (https://sitepeel.dev/design-md/)

## In short

- The frontend-design skill is free, from Anthropic, and loads on its own for UI work
- It asks for bold, specific choices, but it can’t know your brand
- A DESIGN.md gives it real colors, fonts, spacing and buttons to follow
- Check the result with the AI slop checker, then paste its fix prompt back

## How to use it

1. **Install the skill** In Claude Code, run `/plugin install frontend-design@claude-plugins-official`, then choose a scope.
2. **Check that it loaded** Type / and look for `/frontend-design:frontend-design`, or open the Installed tab in `/plugin`.
3. **Add a DESIGN.md** Make one from a site with the free DESIGN.md generator, save it in the project root and import it in CLAUDE.md.
4. **Build one screen** Ask for one page that follows DESIGN.md. The skill brings the craft; the file brings the look.
5. **Check it for AI slop** Paste a public preview link into the AI slop checker. From a score of 40, copy its fix prompt into Claude Code.

## What is the frontend design skill in Claude Code?

It is a SKILL.md file written by Anthropic, shipped as the frontend-design plugin in the official Claude Code marketplace and in the anthropics/skills repository. Claude loads it by itself when you ask for interface work. In short, it asks Claude to work like a design lead whose client rejected everything templated:

- Start from the subject: its industry, materials and words
- Choose typefaces on purpose and set a clear type scale
- Plan 4 to 6 named colors, type and a layout first, then check the plan against the brief
- Skip common tells: one accented headline word, all-caps labels, numbers on things that aren’t steps
- Use one orchestrated motion moment, not a fade on every section
- Review screenshots of the work and remove one accessory

## How to install the Claude design skill

The skill is free and open source under the Apache 2.0 license. You need Claude Code itself, which runs on a Claude plan or an API key.

Where to install frontend-design

| Where you use Claude | How to add the skill |
| --- | --- |
| Claude Code, in a session | `/plugin install frontend-design@claude-plugins-official`, then choose a scope |
| Your shell or a setup script | `claude plugin install frontend-design@claude-plugins-official` |
| Claude desktop app, Code tab | The + button, then Add plugins, then frontend-design |
| VS Code | Type `/plugins`, search frontend-design and press Install |
| claude.ai | Anthropic’s example skills, frontend-design among them, are already on paid plans |

Good to know: On a machine that has never opened Claude Code, run `claude plugin marketplace add anthropics/claude-plugins-official` before installing from the shell.

## Why the skill still gives generic UI

The skill asks for choices, but with no brief Claude still picks the look itself. The skill even lists where AI design clusters: cream with a serif and a clay accent, near-black with one acid green, newspaper columns, the rounded card kit. Avoid one and you often land on the next.

The skill also says the brief’s own words always win. Give Claude a brief with real values and it follows them.

What the skill decides alone, and what a DESIGN.md adds

| Part of the look | Skill alone | Skill plus DESIGN.md |
| --- | --- | --- |
| Colors | 4 to 6 colors it picks | Your measured hex values and where each is used |
| Type | A typeface it chooses | The real font, sizes, weights and tracking |
| Spacing and corners | Its own scale | The steps and radii the page really uses |
| Buttons and cards | Drawn from scratch | Fill, text, padding and hover states |

## Give the skill a measured DESIGN.md

Paste a link into the free DESIGN.md generator. It measures the rendered page, writes the colors, type scale, spacing, corners and button styles in Google’s format, and passes the official linter. Save the file in your project root and import it once in CLAUDE.md, as below.

![Linear’s DESIGN.md in Sitepeel’s library, 255 lines, starting with version, name, description and the measured colors such as background #08090A and on-surface #F7F8F8.](https://sitepeel.dev/images/guides/shots/design-md-file-linear.webp)

Linear’s DESIGN.md, measured from linear.app: the tokens Claude copies exactly.

Example: CLAUDE.md

```
# Design
@DESIGN.md

Follow DESIGN.md for every UI change.
Its tokens win over your own palette and font choices.
```

- [DESIGN.md generator: make one from any link](https://sitepeel.dev/design-md/index.md)
- [Start from 168 DESIGN.md files measured from real sites](https://sitepeel.dev/design-md/examples/)
- [Use DESIGN.md with Claude Code, step by step](https://sitepeel.dev/guides/design-md-claude-code/index.md)
- [Sitepeel’s MCP server: the DESIGN.md generator inside Claude Code](https://sitepeel.dev/mcp/index.md)

## Check the result with the AI slop checker

Deploy a preview and paste its link into the free AI slop checker. It scores how generic the page looks, marks each tell where it appears and, from a score of 40, writes a fix prompt that keeps your colors and copy. Paste that prompt into Claude Code and check again.

![The AI slop checker’s fix prompt, fix-ai-look.md, keeps the site’s brand colors and copy and lists each fix in order, starting with the Made in Bolt badge.](https://sitepeel.dev/images/guides/shots/ai-slop-checker-fix-prompt.webp)

The fix prompt: what to keep, then every fix with where it was found, ready to paste.

- [AI slop checker: score a page and get a fix prompt](https://sitepeel.dev/free-tools/ai-slop-checker/index.md)
- [Fix a generic AI design by hand](https://sitepeel.dev/guides/fix-generic-ai-website-design/index.md)

## Is there a design skill for Claude?

Yes. For web pages and apps, frontend-design is the one Anthropic made for this job. The same anthropics/skills repository has three more for visual work:

- canvas-design: posters and other static art as PNG or PDF
- theme-factory: 10 preset color and font themes for slides, docs and HTML pages
- web-artifacts-builder: multi-part claude.ai artifacts with React, Tailwind CSS and shadcn/ui

Tip: Skills shape how Claude works. A DESIGN.md says what your product looks like. Use both.

## Questions and answers

### What is the frontend design skill in Claude Code?

A SKILL.md from Anthropic that Claude loads for interface work. It asks for a deliberate palette, typefaces and layout, a plan reviewed against the brief, restrained motion and a screenshot review, and lists the defaults that make pages look generated.

### How do I install the frontend-design skill?

In Claude Code, run /plugin install frontend-design@claude-plugins-official and choose a scope. From a shell, use claude plugin install frontend-design@claude-plugins-official. Type / afterwards to see /frontend-design:frontend-design.

### Why does Claude still make generic designs with the skill?

Without a brief, Claude has to invent the look, and invented looks drift toward the same few styles. Give it a DESIGN.md with real colors, fonts and spacing; the skill tells Claude to follow the brief’s own values.

### Does the skill work with a DESIGN.md?

Yes. Import the file in CLAUDE.md with @DESIGN.md so every session starts with it. The skill handles layout and craft decisions, and the file pins down colors, type, spacing and components.

### Is the Claude design skill free?

Yes. The skill is open source under Apache 2.0. Claude Code itself needs a Claude plan or an API key, and Sitepeel’s DESIGN.md generator and AI slop checker are free website tools.

## Further reading

- [Anthropic: the frontend-design skill (SKILL.md)](https://github.com/anthropics/claude-plugins-official/blob/main/plugins/frontend-design/skills/frontend-design/SKILL.md)
- [Anthropic: the skills repository](https://github.com/anthropics/skills)
- [Claude Code docs: install and manage plugins](https://code.claude.com/docs/en/discover-plugins)
- [Google Labs: the DESIGN.md format](https://github.com/google-labs-code/design.md)

## Related pages

- [DESIGN.md with Claude Code](https://sitepeel.dev/guides/design-md-claude-code/index.md): Import DESIGN.md into CLAUDE.md with @DESIGN.md so Claude Code follows your colors, type and spacing. Includes a sample CLAUDE.md and checks.
- [What is DESIGN.md](https://sitepeel.dev/guides/what-is-design-md/index.md): DESIGN.md is a Markdown file that tells AI coding agents how your UI looks. See Google’s spec, three real examples, where to get templates and how to make one.
- [When AI ignores DESIGN.md](https://sitepeel.dev/guides/ai-ignoring-design-md/index.md): Your agent has DESIGN.md but the UI is still wrong? Check that it loads, remove conflicting rules, name real components and verify the result.
- [Is this website vibe coded?](https://sitepeel.dev/guides/vibe-coded-website/index.md): What a vibe coded website is, the clues that give one away, from builder badges to the same card grid, and how to check any site for free from its link.
- [Fix a generic AI website](https://sitepeel.dev/guides/fix-generic-ai-website-design/index.md): Why AI-made websites look generic, and how to fix yours: one real user task, your real copy, references with a clear job and design rules you can check.