Claude Skills for Designers: 5 to Upload Today

A designer retypes the same five instructions all week: what a brief should contain, what to check on a screen, which values count as tokens, what an engineer needs in a spec, and what makes a piece of interface copy bad. A skill is how you write each of those down once. This guide covers what a skill is, the five-step upload, and the five built for design work.

What a skill is, in one paragraph

A Claude skill is a folder containing a SKILL.md: a few lines of metadata (a name and a one-sentence description of when to use it) followed by Markdown instructions Claude follows once the skill loads. At the start of a session Claude reads only the descriptions, so a dozen installed skills cost almost nothing. When your request matches one, the full instructions load and Claude works through them like a runbook. Anthropic's Claude Code documentation puts it plainly: "Claude uses skills when relevant, or you can invoke one directly with /skill-name," and "a skill's body loads only when it's used." The complete explanation, including how skills differ from CLAUDE.md and plugins, is What Are Claude Skills?.

How to upload one on claude.ai

Anthropic's help center lists skills as available on Free, Pro, Max, Team, and Enterprise, with one prerequisite. As of September 2026:

1. Open Settings > Capabilities and enable Code execution and file creation. On Team and Enterprise plans, an owner also enables Skills under Organization settings.
2. Put the SKILL.md into a folder named exactly after the skill (ux-copy-reviewer/SKILL.md) and zip that folder so it sits at the root of the archive.
3. Go to Customize > Skills, click +, then + Create skill, then Upload a skill, and choose the ZIP.
4. Toggle the skill on. A disabled skill is invisible to Claude.

The failure list Anthropic publishes is short and predictable: a ZIP over the size limit, a folder name that does not match the skill name, a missing SKILL.md, or invalid characters in the name or description. Almost every real-world failure is the second or third one, caused by an extra layer of folder inside the archive.

Skills do not sync between surfaces. A skill on claude.ai is not in Claude Code and the reverse; each keeps its own copy, and the Claude Code layout is a folder at .claude/skills/<name>/ in a project or ~/.claude/skills/<name>/ for every project. The full walkthrough for both is How to install Claude skills.

Every skill below is pure instruction: no scripts, no network, no repository. That is deliberate. It means the identical file works in all three places, and it means the whole skill is text you can read on its page before you upload it.

The five skills

1. design-brief-writer

design-brief-writer turns a request from a stakeholder into a brief you can design against: the user and the job, the problem in one sentence, success criteria, the states that must exist, constraints, and an explicit list of what is out of scope. Its real value is the open-questions section, which surfaces what nobody decided before you spend a day on the wrong screen.

Use design-brief-writer. The request is: "we need a better billing
page." Context: B2B SaaS, self-serve upgrades, our support inbox is
full of confusion about proration. Flag anything I have not specified
as an open question rather than assuming it.

2. design-critique-checklist

design-critique-checklist runs a structured pass over a screen you paste or upload and returns findings grouped by severity: hierarchy, consistency with the system, state coverage, and copy. It is not taste. It is the list you would work through yourself if you had not been staring at the file for four hours.

Use design-critique-checklist on this screen [attach]. It is the
onboarding step-two screen for a mobile-first web app. Group findings
by severity and tell me which ones block a build and which are polish.

3. design-token-extractor

design-token-extractor reads screenshots, CSS, or a style guide and returns a token set: colors with roles, spacing steps, type scale, radii, and shadows, plus the values that do not fit any scale. Run it on a product that grew without a system and the output is the argument for building one.

Use design-token-extractor on this CSS file and these three
screenshots. Produce the token set as JSON, then list every value that
appears only once and every pair of near-duplicate colors.

4. component-spec-writer

component-spec-writer turns a component into the document an engineer can build from without asking you anything: anatomy, props and variants, every state, keyboard and focus behavior, the tokens it consumes, and the edge cases (long text, no data, error).

Use component-spec-writer for our Combobox. Here are the designs and
the current behavior [paste]. Include keyboard interaction, focus
management, the empty and loading states, and what happens with 500
options.

5. ux-copy-reviewer

ux-copy-reviewer reviews interface strings rather than prose: button labels, empty states, error messages, tooltips, onboarding text. It returns each string with a rewrite and the reason, and flags the ones that describe the system instead of the user's situation.

Use ux-copy-reviewer on these strings [paste]. Product is a scheduling
tool for clinics. Rewrite each one, keep them under the character
limits noted, and tell me which errors do not say what to do next.

For Claude Code users: two commands and an agent

Inside a repo, two of these jobs are one keystroke. /critique-screen runs the critique against a file, a route, or an image already in the project, and /design-tokens extracts or audits the token set across the codebase instead of a single file. Both are Markdown files you drop into .claude/commands/.

The design-systems-librarian agent is different in kind. It is a subagent with its own instructions and a clean context, built for the question you cannot answer by looking: does this component already exist, which variants are duplicates, and what breaks if this token changes. Ask it before you add anything to the system. The setup for all of this is Claude Code for Designers, and the differences between the three shapes are in Skills vs Agents vs Commands.

Accessibility is deliberately absent from the five. A serious pass belongs to the accessibility-auditor agent and the /audit-accessibility command, which work against WCAG 2.2 AA rather than a reminder buried in a critique. Anthropic's own design plugin makes the same split, shipping accessibility-review as its own skill alongside design-critique.

Making them yours

All five are starting points. The fastest improvement is to paste your own template under the instructions: the brief format your team uses, the spec sections your engineers ask for, the words your product never uses. Edit the SKILL.md, re-zip, re-upload. The third time you correct the output the same way, that correction belongs in the file. The canvas side of the workflow is Claude Design, and the rest of the toolkit is at the designers hub.