AI Skills for Designers: Claude Code, Cursor & Tokens
What broke when we added Claude skills without tokens: PR case study, AGENTS.md, Cursor rules, and a workflow checklist.
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 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.
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 |
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. 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. 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.
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 onlyDTCG 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
No. A prompt is a one-time instruction in a chat session. A Claude skill is a saved Markdown rules file the client loads repeatedly-like a checklist your team owns. Prompts explore; skills enforce. Use AGENTS.md for repo-wide rules and skills for discipline-specific behavior on top.
Export tokens to git as DTCG plus tokens.css, write AGENTS.md (repo contract) with paths and naming rules, run Figma audit hygiene so literals are not baked into prompts or MCP reads, then add UX writing, accessibility, and frontend craft skills. Skills are last, not first.
They are reusable Markdown instruction packs for tools like Claude Code and Cursor that encode team rules for UX, accessibility, and UI implementation. They work together with AGENTS.md and exported design tokens, not as a standalone design system.
Claude skills load in Claude Code, often as project skill files. Cursor rules load in every Cursor chat via .cursor/rules/ or AGENTS.md. The content can be identical Markdown; the difference is which client reads it. Use both after tokens and AGENTS.md are in git.
The best outcome is not a pack name-it is fewer token literals in PR review. Keep UX writing, accessibility, and frontend craft after tokens.css and AGENTS.md exist; treat other packs as optional.
AGENTS.md defines repository-wide contracts including token paths and forbidden patterns. Skills add discipline-specific behavior such as UX writing or frontend quality. Use both: AGENTS.md first, skills second.
Start from a minimal template, write 10–15 enforceable critique rules, link to your token files, store the skill in git, and test on a real ticket before team rollout.
No. Variables in Figma remain the visual source of truth. Skills shape how assistants write code and copy after you export tokens to the repo.
Claude Design generates canvas UI from prompts. Skills govern ongoing Claude Code work in your repository after you govern tokens in Figma and export for development.
For token governance in Figma, continue with the design tokens guide, Claude Design, and Figma MCP articles in our AI cluster.
