You've written a DESIGN.md. You have your tokens. You've read the post on what Claude Design is and how to give it your brand. Now you want to actually load that context so every Claude Design session opens with your brand already in place. No pasting, no re-briefing, no explaining your palette for the fourth time this week.

That's what a Skill is for. This post is the install guide.

It covers what the install process actually looks like (not how it's described in the marketing), what the SKILL.md file needs to contain, how to package everything, and where the sharp edges are. By the end, you'll have a working Skill loaded in Claude Design.

One honest note before we start: there's no single-click brand install in Claude Design yet. Anthropic hasn't shipped a "Brand" settings panel. What exists instead is the general Claude Skills system, a mechanism that was built for arbitrary capabilities and works equally well for loading a brand design system. The steps are a little more manual than a wizard. They're also not complicated once you've done them once.

What a Skill is, precisely

A Skill in Claude.ai is a named, persistent context package. When enabled, it loads its instructions into every conversation you have in the workspace where it's active, including every Claude Design session.

That's the whole mechanism. There's no runtime code running in the background, no plugin, no extension. A Skill is a folder of files (at minimum a SKILL.md) that Claude reads as context at the start of each session. When Claude Design generates a button and applies your corner radius, it's because your Skill told it to at session start.

This matters because it changes how you think about the install step. You're not configuring software. You're loading a brief. The quality of what Claude Design produces directly tracks the quality of what you put in the Skill.

What you need before you install

Installing is the last step. The work before it is writing the Skill.

A brand Skill for Claude Design needs three things in one folder:

your-brand-design/
  SKILL.md        ← the Skill manifest (required)
  DESIGN.md       ← brand narrative, principles, tokens reasoning
  tokens.css      ← CSS custom properties generated from tokens.json

The SKILL.md is the entry point. It's what Claude reads first. DESIGN.md and tokens.css are the references it reaches into. You can also include tokens.json directly. Useful if you're pointing Claude at specific values or building on the W3C DTCG format.

If you don't have a DESIGN.md yet, that post comes first. The Skill is a wrapper around the brand narrative. If the narrative doesn't exist, the Skill has nothing to apply.

Writing the SKILL.md

The SKILL.md file has two parts: a YAML frontmatter block and a Markdown body.

Frontmatter

---
name: acme-design
description: Apply Acme brand to every Claude Design generation: colors, type, shapes, voice. Use when building any UI, slide, or visual asset for Acme.
---

Two fields matter here:

name: 64-character maximum. No spaces; use hyphens. This is the identifier you'll see in the Claude.ai Skills list. Name it after your brand, not after the task (acme-design, not apply-brand-guidelines).

description: 200-character maximum. This is the most important field in the entire file, and the one people get wrong. Claude uses the description to decide when to invoke the Skill. If the description is vague ("applies brand guidelines"), Claude will activate the Skill inconsistently. If it's specific and behavioral ("apply Acme brand to every Claude Design generation: colors, type, shapes, voice"), it activates reliably.

Write the description as if you're briefing a new designer on when to read the brand guide: every time they touch a visual artifact, not just when they're confused.

The Skill body

After the frontmatter, the body should orient Claude to what's in the folder and how to use it. Don't summarize the whole DESIGN.md here. Just point at it and give the most load-bearing rules in one place.

Here's the structure that works:

## Brand in one sentence
 
[One tight sentence: the brand's personality and the thing it rejects.]
 
## How to use this Skill
 
In Claude Design, start every generation with:
> Apply the [Brand] design Skill. Reference DESIGN.md for full
> token definitions and principles. Voice should match [personality].
 
## Hard rules (apply these before anything else)
 
- Primary button: [your button spec: radius, color, shadow]
- Type: [your font pairing: display font for headings, body font]
- Accent color: [hex and usage rule]
- Never: [your top three nevers]
 
## Reference files in this Skill
 
- `DESIGN.md`: full brand narrative, principles, nevers, references
- `tokens.css`: CSS custom properties for all token values
 
For any property not covered above, check DESIGN.md first.

The goal is that Claude can start generating correctly from the frontmatter and the hard rules, and reach into DESIGN.md for anything more nuanced. Keep the body short. If it's longer than 60 lines, you're summarizing the DESIGN.md rather than pointing at it.

A complete example

Here's what a finished SKILL.md looks like for a fictional brand called "Clearview":

---
name: clearview-design
description: Apply Clearview brand to all Claude Design output: teal accent, Instrument Serif headlines, generous whitespace, editorial spacing. Use for any UI, slide, or marketing visual.
---
 
## Brand in one sentence
 
Clearview is a data analytics platform built for CFOs: serious
enough to be trusted, clean enough to not intimidate.
 
## How to use this Skill
 
In Claude Design:
> Apply the Clearview design Skill. Build [screen or component].
> Check DESIGN.md for full token definitions. Copy should be
> direct, no marketing filler.
 
## Hard rules
 
- **Headings**: Instrument Serif, weight 400, never italic
- **Body**: Inter, 16px base, line-height 1.6
- **Accent**: #0D9488 (teal-600). Only for primary buttons and links
- **Background**: #F8FAFC, not white
- **Buttons**: rounded-full, teal-600, white text, subtle glow shadow
- **Cards**: rounded-2xl, white, 1px #E2E8F0 border
- **Never**: warm colors, gradient fills, italicised headlines
 
## Reference files
 
- `DESIGN.md`: full brand narrative, token reasoning, principles
- `tokens.css`: CSS custom properties
 
When in doubt: simpler, more space, less color.

This covers enough that a session opened cold will generate recognisably on-brand. DESIGN.md handles the rest.

Packaging the Skill

Once your three files are ready, you need to package them as a ZIP. The ZIP structure matters and is where most people trip:

The folder must be the root of the ZIP, not the files.

✅ Correct
clearview-design.zip
└── clearview-design/
    ├── SKILL.md
    ├── DESIGN.md
    └── tokens.css
 
❌ Wrong: files at the ZIP root
clearview-design.zip
├── SKILL.md
├── DESIGN.md
└── tokens.css

If you ZIP the files directly rather than the folder, Claude.ai will reject the upload with a "missing required Skill.md file" error. Zip the folder.

The folder name must also match the name field in your frontmatter exactly. If your frontmatter says name: clearview-design, your folder must be named clearview-design. A mismatch causes an upload error.

On a Mac, the easiest way to get this right:

Name your folder clearview-design (or whatever your skill name is).
Right-click the folder in Finder and select "Compress".
The resulting ZIP (clearview-design.zip) has the folder as its root. Done.

Uploading to Claude.ai

With the ZIP ready:

Go to claude.ai and open Settings.
Navigate to Capabilities, then find the Skills section.
Click Customize > Skills > +, then "+ Create skill".
Select "Upload a skill" and choose your ZIP file.

Once uploaded, the Skill appears in your Skills list. Toggle it on. From this point forward, it will load as context for every conversation in your workspace, including every Claude Design session.

For Enterprise workspaces, the process is slightly different: your organization owner enables Skills in Organization Settings > Skills, then team members can install custom Skills in their individual settings. Custom Skills are private to the account that uploads them. They don't propagate to teammates automatically.

If you want your whole team working from the same brand Skill, the current path is either to give every team member the ZIP and have them install it individually, or to invite someone with access to your Claude Team workspace to handle the install. (This is the scenario where we often step in for clients. We install the Skill directly into the Claude Team rather than walking twelve people through the ZIP upload process.)

Verifying it works

After enabling the Skill, open a fresh Claude Design session (or start a new conversation). Don't paste your brand files. Let the Skill provide the context.

Type a simple, underspecified prompt:

Generate a settings page for a B2B dashboard.

If the Skill is active and working, the output should apply your palette, your type pairing, and your shape language without you having mentioned any of those things. The sidebar (if any) should use your background token. The primary button should be your button spec.

If the output looks like a generic shadcn dashboard, check two things:

Is the Skill enabled? In your Claude.ai settings, make sure the toggle next to the Skill is on.
Is the description triggering? Claude uses the description to decide when to activate the Skill. If the description doesn't mention "Claude Design" or "UI generation", Claude may not invoke it for a design prompt. Edit the description to be more explicit.

A good description test: read it aloud and ask whether a new designer would know to apply this guide to the prompt you just typed. If yes, the description should work. If no, tighten it.

What to do when the install isn't sticking

Two common issues, and what to do about each.

The Skill is on but output is still generic. This almost always means the description isn't specific enough. Claude doesn't parse the SKILL.md body when deciding whether to invoke. It reads the description. Rewrite the description to mention the specific action type ("building UI", "generating components", "any Claude Design output"), and be more specific about what brand means ("teal-600 buttons, Instrument Serif headlines" rather than "brand guidelines").

The Skill uploads but the frontmatter name shows a mismatch error. The folder name in the ZIP and the name field in the frontmatter must be identical, character for character. Including capitalisation and hyphens. Clearview-Design and clearview-design are not the same name.

Updating a Skill

When your brand evolves (new accent color, revised token, updated nevers), you update the source files and re-upload. There's no partial update mechanism; you re-upload the whole ZIP. The old Skill gets replaced. Previous Claude Design sessions aren't affected (they're done), but every new session after the update picks up the new brand.

This is why keeping your Skill under version control matters. If you're not sure what changed between two uploads, the git diff tells you. The CHANGELOG.md in your design system folder should log it.

The team scenario

The most common friction point isn't the ZIP or the frontmatter. It's getting the Skill installed for a team of people rather than just yourself.

As of today, there's no way to push a Skill to a whole Claude Team workspace centrally. Each person installs it individually, or one person installs it and everyone else stays on generic output. Anthropic will close this gap (it's obvious infrastructure for Teams), but it's not there yet.

The practical workarounds:

Send the ZIP to your team with a short Loom showing the install steps. Most people can handle a file upload.
Invite someone with access into your Claude Team and let them install on behalf of the workspace. If you've commissioned a Taste Profile, this is typically what happens.

If your team is small and comfortable with settings UIs, individual installs take about five minutes each. If you have twenty people, invest in that Loom.

What you get at the end

When the Skill is installed and active, Claude Design stops treating your session as a blank slate. It opens with your brand already loaded: your palette, your type, your shape language, your voice. The first generation from an underspecified prompt reflects your product, not the shadcn default.

You'll still need to give Claude good prompts. You'll still get variations that miss. AI is probabilistic. The Skill primes the tool, it doesn't guarantee the output. But the distance between a generic result and an on-brand result collapses significantly. You stop writing brand-correction prompts and start writing design prompts.

That's the difference a Skill makes. The install is a one-time afternoon. The compounding benefit is every session after.

Related reading: What is Claude Design, and how do you give it your brand? is the overview post on Skills, context, and why Claude Design generates generic output without them. And DESIGN.md: the AI-era brand guide is the foundational piece on writing the file that the Skill wraps.

How to install a Skill in Claude Design