Purpose
If you paste your design system into every conversation, or your outputs only look right when you remember to attach the rules file, the fix is a brand-specific design skill. A skill is a folder with a SKILL.md file inside. Claude loads it on its own whenever a task matches the skill's description, so the brand rules travel with you across chats, Cowork sessions, and Claude Code.
Who this is for: founders with a defined brand (colors, fonts, voice) who build content or pages with Claude regularly. You need a Pro, Max, Team, or Enterprise plan with code execution enabled.
Collect your brand source files
The skill is only as good as what you feed it. Gather these before touching any folder:
- a.Design tokens: every hex code with its exact usage rule. Not "our red is #7A1F2B" but "terracotta #7A1F2B is for CTAs, numerals, and eyebrow labels on cream only, never body text, never full-bleed fills."
- b.Typography: font families, weights, sizes, and where each is allowed. Include the Google Fonts link if the skill will generate HTML.
- c.Voice rules: tone description, phrases you say, and a banned list (words, punctuation like em dashes, structures, cliches).
- d.Component patterns: wordmark HTML, button styles, callout styles, anything you rebuild often.
- e.One gold-standard example: a finished output you consider perfectly on-brand.
Create the skill folder structure
On your computer, create a folder named after your skill in kebab-case. Inside it, one required file and one optional subfolder:
your-brand-design-skill/
SKILL.md (required: metadata + core rules)
references/
design-system.md (full tokens, type scale, components)
voice-guide.md (tone, banned words, example copy)
page-template.html (gold-standard example output)Keep SKILL.md lean and push detail into the references folder. Claude reads the metadata first, then the body, and only opens reference files when it needs them. This keeps the skill fast and the context window clean.
Write the frontmatter
The frontmatter is the YAML block at the top of SKILL.md. Two fields are required, and the description decides whether the skill fires at all.
---
name: Brand Design System
description: Apply the brand design system to every web page, HTML file,
landing page, document, or visual output. Trigger whenever building or
editing pages, styling content, or when brand colors, fonts, or voice
rules apply. Covers colors, typography, components, and copy voice.
---- a.Keep the name under 64 characters and human-readable.
- b.Keep the description under 200 characters if possible. Claude matches it semantically against your request, so name the tasks it should cover: "web pages," "landing pages," "documents."
- c.Avoid vague descriptions like "brand stuff." Vague descriptions cause the skill to fire on the wrong tasks or miss the right ones.
Write the core rules in the body
Below the frontmatter, write the rules Claude needs on every single use. A workable skeleton:
# Brand Design System
## Non-negotiables
- Background is always cream (#FFF9F1), text is always umber (#271512)
- Accent color (#7A1F2B) only on CTAs, numerals, and eyebrow labels
- Fonts: Newsreader for headings, Manrope for body, JetBrains Mono for code
- No emoji anywhere. Use inline SVG icons instead.
- No em dashes in visible copy
- Wordmark is text only, never an image
- Every page mobile responsive at 1024px, 768px, 480px
## Voice
- Direct, operator tone. Behavior or friction first, then the solution.
- Banned: "unlock", "game-changing", "leverage", hype phrasing
## Process
1. Read references/design-system.md before writing any CSS
2. Read references/voice-guide.md before writing any copy
3. Compare the finished output against references/page-template.html
4. Run the final checklist at the bottom of design-system.mdWrite rules as instructions, not descriptions. "Never use cool greys" beats "our palette is warm." Claude follows commands more reliably than it infers from adjectives.
Add the reference files
- a.Copy your full design system document into references/design-system.md. Include the complete token list, type scale, component CSS, and your end-of-build checklist.
- b.Copy your voice guide into references/voice-guide.md: tone, phrase examples, and the full banned list.
- c.Save one finished, perfectly on-brand output as references/page-template.html. An example teaches Claude what success looks like faster than ten paragraphs of rules.
- d.In SKILL.md, reference these files by relative path so Claude knows they exist and when to open each one.
Never put API keys, passwords, or client data inside a skill. Skills travel with your account, and anything in them can end up in generated output.
Zip the skill folder
- a.Compress the skill folder itself, so the folder is the root of the archive. On Mac: right-click the folder, choose Compress. On Windows: right-click, Send to, Compressed (zipped) folder.
- b.Open the zip and confirm the structure: the skill folder at the root with SKILL.md directly inside it. A zip that opens straight to loose files, or nests the folder two levels deep, will fail.
Upload and enable the skill
- a.In Claude, open Customize and go to Skills.
- b.Click the + button, then + Create skill, and upload your zip file.
- c.The skill appears in your skills list. Toggle it on.
- d.Custom skills are private to your account. On Team or Enterprise, an admin can provision a skill for the whole organization instead.
Test and iterate
- a.Start a fresh conversation and give a realistic prompt without mentioning the skill: "Build me a landing page for the next masterclass."
- b.Confirm the skill fired. Claude typically states which skill it is using, and the output should follow your rules without prompting.
- c.Score the output against your brand checklist: colors, fonts, voice, responsiveness, banned patterns.
- d.If the skill did not fire, sharpen the description with more trigger phrases. If it fired but the output drifted, tighten the rules in the body. Change one thing at a time.
- e.Re-zip and re-upload after each edit, then test again.
Skills compose. Your design skill can run alongside a repurposing skill or a carousel skill in the same task, with each one handling its own layer. You do not have to build one giant skill that does everything.
FAQs
Do I need a paid plan?
Yes. Custom skills require a Pro, Max, Team, or Enterprise plan with code execution enabled.
Will the skill work in Cowork and Claude Code?
Yes. Cowork sessions, including scheduled ones, load the skills enabled on your claude.ai account at session start. Claude Code can also use skills placed in its own skills directories.
How does Claude decide when to use it?
Claude compares your request against the description field in the frontmatter. It is a semantic match, not keyword matching, but specific task names in the description still improve accuracy.
How do I update the skill later?
Edit your local files, re-zip the folder, and upload the new version from the Skills page. Keep the local folder as your source of truth.
Troubleshooting
| Symptom | Likely cause | Fix |
|---|---|---|
| Upload rejected | Zip structure wrong or SKILL.md missing | Confirm the skill folder is the root of the archive and SKILL.md sits directly inside it with valid frontmatter |
| Skill never fires | Description too vague or too narrow | Add the actual task names to the description: "web pages", "landing pages", "HTML files" |
| Skill fires on unrelated tasks | Description too generic | Narrow the description to design and content tasks only |
| Output ignores reference files | Files not referenced in SKILL.md | Add explicit process steps: "Read references/design-system.md before writing CSS" |
| Rules followed inconsistently | Rules written as descriptions, not commands | Rewrite as direct instructions with "always" and "never" |
Version 1.0 · First published July 2026 · Skill creation steps verified against the Claude Help Center, July 2026