AI skills in one sentence
AI skills for designers are versioned Markdown rule packs-loaded by Claude Code or Cursor-that encode how your team makes product decisions, writes UX copy, and ships UI. They sit on exported Figma design tokens-named value slots standardized by W3C DTCG — and AGENTS.md (repo contract) at the repo root, not instead of them. Without that stack, assistants still ship plausible screens that ignore your spacing scale and semantic color roles.
Most articles tell you which skills to install. This one documents what broke when we installed them anyway-and what fixed token drift in PR review.
Related workflows: Figma Design Tokens guide for the token foundation skills depend on, Claude Design for canvas mocks without repo codegen, Figma MCP for Dev Mode selection context, and coverage audits to lock down token hygiene before agents run.
Whether you are exploring how to learn AI skills for free or building a production AI design workflow with Claude Code for designers, the order is non-negotiable: tokens define the system, AGENTS.md sets repo rules, and skills enforce craft discipline.
Who this is for
Illustrative reader profiles-not prerequisites. Pick the row that matches how you ship UI; if you only need one-off canvas mocks, use Claude Design instead of repo skills.
Reader profiles for Claude skills and token workflows
| Reader | Primary focus | You should already have |
|---|---|---|
| UX designer | Research, writing, and accessibility skills with token-aware copy rules | Exported tokens and documented paths for semantic color roles |
| Product designer | Decision and critique skills tied to principled tradeoffs | AGENTS.md (repo contract) with product constraints the team enforces in review |
| Design system team | Token pipeline, local skill copies, governance before agent runs | DTCG export, tokens.css, and audit hygiene in Figma |
| Claude Code or Cursor user | Discipline skills on top of repo context | tokens.css in git and a normal code-review loop |
For designers asking how to learn AI skills for beginners or how to leverage AI skills for career advancement in 2026, start with the three kept skills below. What AI skills are employers looking for in design-system roles? UX writing, accessibility, and frontend craft consistently rank highest.
What failed for us
Recurring mistakes from Atomize onboarding and internal design-system repos — not hypotheticals.
- Too many skills: five community packs at once; review time went to reconciling conflicting tone rules, not UI quality.
- Skills before AGENTS.md (repo contract): polished diffs until PR review found
var(--ds-*)names that did not exist in tokens.css. - MCP without tokens: Dev Mode matched the open frame while the file still had raw hex; the next component ignored the system.
- Skipping export hygiene: skills cited semantic roles while Figma still had untokenized fills-skills cannot fix binding drift in the canvas.
Most useful skills we actually kept
- UX writing - empty states, errors, onboarding copy tied to tokenized content roles
- Accessibility - WCAG checks paired with semantic color variables in Figma
- Frontend craft - layout and spacing discipline against
tokens.css
Research synthesis, motion, and product-decision packs were optional. We added them only when a squad owned the rules in git. A key skill for collaborating effectively with AI is writing enforceable critique rules—not one-off prompts, but version-controlled Markdown that survives across sessions and teammates. For UX researchers learning how to use AI for UX researcher skills, the same three packs apply with UX writing rules prioritized first. That is our practical answer to “best Claude skills for designers”: three kept skills, not fifteen installed packs.
Case study: token violations in PR review
On a mid-size SaaS design-system repo (React + tokens.css), we compared one feature branch built with ad-hoc prompts versus the same scope after AGENTS.md (repo contract) plus two local skills (UX writing + frontend craft).
Before and after AGENTS.md + skills (one component PR, internal benchmark)
| Measure | Before | After |
|---|---|---|
| Hardcoded color/spacing literals flagged in review | 14 | 2 |
Uses only existing var(--ds-*) names | Partial | Consistent |
| Empty-state copy matches voice guide | No | Yes |
| Reviewer time on token nits (approx.) | ~45 min | ~12 min |
The drop came from naming rules in AGENTS.md and repeatable critique lines in skills-not from a larger model. Track literal counts in PR review for two sprints before adding a third skill pack.
AI workflow checklist
- □ Export tokens (DTCG + tokens.css in git)
- □ Create AGENTS.md (repo contract) at root (paths, naming, ban new hex in components)
- □ Add UX writing skill (local copy, pinned version)
- □ Add accessibility skill
- □ Test on one real component ticket in Claude Code or Cursor
- □ Run coverage audit before merge
What an AI skill is (and is not)
A Claude skill or Cursor rule file is structured instructions the client loads before generation-product principles, UX writing tone, accessibility checks, or frontend craft constraints. Skills differ from one-off prompts because they persist across sessions; they differ from Claude Design because they govern repo work, not canvas mocks. They encode the enforcement layer of a design system-not the visual library itself, but the rules that keep assistant output on-scale and on-brand. Docs: Claude Code, Cursor rules, AGENTS.md.
Claude skills vs Cursor rules
Teams ask whether to invest in Anthropic skill files or Cursor rules. We use both with the same Markdown discipline files where possible-one source of truth, two loaders. A Cursor AI design setup reads the same tokens.css and AGENTS.md as Claude Code, so the pipeline investment pays off across both tools.
Claude skills vs Cursor rules (same repo, different clients)
| Claude skills | Cursor rules | |
|---|---|---|
| Where they live | Project skills (for example .claude/skills/) | .cursor/rules/ or root AGENTS.md |
| When they load | Claude Code sessions and skill invocations | Every Cursor chat in that repo |
| Best for | Long codegen runs, multi-step refactors | Day-to-day edits beside the editor |
| Token discipline | Same if both read AGENTS.md and tokens.css | Same if both read AGENTS.md and tokens.css |
Cursor does not replace Claude Code for large UI passes; Claude skills do not replace Cursor for quick file tweaks. Pin the same UX writing and accessibility rules in both places after tokens export.
Design-system pipeline (visual model)
Figma Variables (Primitives → semantic → component)
↓ audit / export hygiene (Atomize plugin)
DTCG JSON + compiled tokens.css in git
↓
AGENTS.md (paths, naming, ban new hex in components)
↓
Claude skills (UX writing, a11y, frontend craft - local copies)
↓
Claude Code / Cursor (features + fixes)
↳ optional: Figma Dev Mode MCP for selection context onlyW3C DTCG specification and Style Dictionary detail: design system AI workflows.
Skills we use in design-system work
What actually ships in Atomize design-system repos and customer playbooks:
- AGENTS.md (repo contract) at root: token paths, Primitives → semantic rules, no new hex in components-updated when the Figma library changes, not when a viral LinkedIn list updates.
- Local copies of the three skills above; pinned versions, not “latest from the internet” each sprint.
- Claude Code + Cursor on branches that already contain
tokens.css. - Atomize before codegen: untokenized values and coverage audit so skills and MCP do not inherit raw fills.
Three kept skills plus AGENTS.md beat fifteen generic packs; skip large PM libraries inside design repos.
Do not install these skills if…
Stop conditions for the wrong expectation-not a repeat of the checklist above.
- You want skills to replace Figma or your variable library-they only shape assistant behavior.
- You only need canvas mocks in Claude Design with no repo codegen path.
- You plan more than two community packs without named owners in git.
Claude skills vs AGENTS.md
AGENTS.md is the repo contract: where tokens live, what “done” means, and what assistants must never do. Claude skills are role-specific playbooks loaded on top. Skills without AGENTS.md drift toward generic SaaS UI; AGENTS.md without skills still works but misses craft guardrails.
Claude skills vs AGENTS.md
| AGENTS.md | Claude skills | |
|---|---|---|
| Scope | Whole repository rules | Discipline-specific behavior |
| Format | One file at repo root | Often multiple Markdown skill files |
| Updates | When tokens or architecture change | When craft or compliance standards change |
| Clients | Claude Code, Cursor, Codex | Same clients, loaded as skills |
| Design tokens | Paths, naming, export cadence | How to apply tokens in UI/copy |
How to create your own Claude skill
Custom skills are how you turn repeated critique into reusable rules-your real E-E-A-T layer.
- Copy Anthropic’s Claude Code skill template or mirror the same Markdown into
.cursor/rules/. - Write 10–15 rules you already use in critique; link
tokens.cssand component paths. - Store in-repo and test on one ticket in both Claude Code and Cursor before team rollout.
Skills vs Figma MCP vs Atomize
Three layers designers confuse
| Layer | Delivers | Does not deliver |
|---|---|---|
| Claude skills | Behavior rules in Claude/Cursor | Binding health in Figma |
| Figma Dev Mode MCP | Structured selection context | Repo-wide token CSS |
| Atomize | Primitives → Atoms, audits, export hygiene | Research synthesis |
Use skills to steer assistants; MCP for the open frame; Atomize when Variables and raw styles diverge. Agents only stay on-system when tokens and AGENTS.md are already true.
Final verdict: AI skills for designers
Skills are the last layer: tokens, AGENTS.md (repo contract), the three kept skills, fewer PR violations, then optional MCP. The same workflow works in Claude Code and Cursor if both read the same AGENTS.md and tokens.css.
FAQ
For token governance in Figma, continue with the design tokens guide, Claude Design, and Figma MCP articles in our AI cluster. Have general questions? See the Atomize FAQ.
