Claude Code skills for the work that keeps a design system alive.
All 37 skills, 4 agents, 13 commands, 10 knowledge notes.
Built from 14 years of product and systems work.
Requires Claude Code. Works with any stack.
The work nobody built AI for
The work nobody built AI for
There are great AI tools for the designer who uses a design system. Generate a component, write a story, suggest a layout. That work is well-served.
But what about the team running it?
The token audits. The deprecation plans. The stakeholder briefs, the contribution workflows, the drift you fight quietly before it becomes someone else’s emergency. The governance documentation nobody reads until something breaks. The onboarding that happens informally because there’s no time to do it properly. The budget defence you prepare at 11pm before a quarterly review.
That work is hard, it’s largely invisible, and it compounds badly when it doesn’t get done. It also never had proper AI tooling – until now.
Design System Ops is built specifically for practitioners. Not designers who use a system. The people responsible for one.
What it is
What Design System Ops is
Design System Ops is a Claude Code skill pack. It teaches Claude how to do design systems work the way a staff-level practitioner would: with structured processes, expert frameworks, and output calibrated to the actual complexity of what you're dealing with.
When you ask Claude to audit your tokens, it does not give you generic advice. It reads your actual token files, identifies tier leakage, flags naming violations, produces a prioritised finding table with remediation guidance, and – if you are migrating to DTCG – gives you a sprint-plannable five-phase migration plan with hour estimates.
That is the difference. Not a smarter prompt. A different kind of output entirely.
The 37 skills
The skills
Audit
Understand what you actually have.
token-audit
Reads your token files (Style Dictionary, Emotion, CSS custom properties, Tailwind config) and produces a structured report: tier structure, naming violations, orphaned tokens, DTCG alignment assessment, and a prioritised fix list. Tested against systems from 140 to 480+ tokens.
system-benchmark
Scores your system across 12 dimensions in four pillars: Foundation, Documentation, Governance, and Adoption. Includes percentile positioning so you know where you stand, not just what your score is.
drift-detection
Finds where consuming teams have diverged from the system and classifies why: accidental, intentional, version lag, misunderstanding, or system gap. Because the fix is different for each one.
Govern
Run the system as infrastructure.
deprecation-process
Produces a full deprecation plan: blast radius analysis, prop-by-prop migration guide, communication templates, timeline, codemod assessment, and rollback contingency.
codemod-generator
Produces a working jscodeshift transform with 10 test cases, a migration runner script with dry-run mode, and a ROLLBACK.md. Not a recommendation to write a codemod. An actual codemod.
cicd-integration
Generates a complete GitHub Actions workflow for your stack, quality gate configuration, and a phased rollout plan from zero CI to full automation.
Document
Make the system legible to humans and machines.
ai-component-description
Generates a six-section component description optimised for Figma's MCP server and AI agents: Purpose, Props, Anti-patterns, Composition, Accessibility, Examples. Each section is structured to prevent a specific class of AI error.
usage-guidelines
Writes component documentation that tells people how to use a component correctly, not just what it is. Anti-patterns are derived from actual API analysis, not generic advice.
token-documentation
Documents token intent, not just token values. The difference between color.action.primary and color.brand.primary, and why it matters.
Validate
Verify quality before it ships.
accessibility-per-component
Audits across five dimensions: keyboard navigation, screen reader support, colour contrast, focus management, and ARIA implementation. Findings are specific, code-referenced, and mapped to WCAG criteria. Every FAIL includes a copy-paste-ready fix.
token-compliance
Scans your codebase for hardcoded values, wrong-tier references, and inconsistent token application. Tested against legacy SCSS systems with 355 violations – it can handle messy.
design-to-code-check
Compares your Figma spec against your implementation and distinguishes between implementation errors, specification gaps, and accepted divergences.
Communicate
Move people and decisions.
stakeholder-brief
Produces a one-page brief in business language with a specific ask. Not a health score presented to leadership. A case for action, written for someone who does not know what tier leakage is.
visual-report
Generates a self-contained HTML dashboard from your audit findings: health radar, severity distribution, priority matrix, metric cards. Open it in any browser. No dependencies.
adoption-report
Separates coverage from adoption, flags at-risk teams, and identifies blockers. Because 70% coverage and 40% adoption is a different problem than 40% coverage and 40% adoption.
AI Infrastructure
For teams building AI-native design systems
Five skills in Design System Ops produce something different from documentation: machine-readable infrastructure that AI agents and tooling consume directly.
context-engine-builder
Generates seven structured YAML files in .ai/context-engine/ encoding UX intelligence, UI constraints, content rules, accessibility contracts, ethical guardrails, technical context, and business rules. Everything an AI agent needs to make correct decisions about your system without human supervision.
governance-encoder
Converts your governance policies into machine-executable JSON constraint files in .ai/governance/ that CI pipelines and AI agents validate against automatically. Governance as code.
codebase-index
Produces a pre-computed component inventory and relationship graph in .ai/index/ that MCP servers and AI tooling can query without parsing your entire codebase each time.
component-decision-tree
Builds queryable YAML decision trees that map user intent to the correct component through a sequence of narrowing questions. Structured logic for choosing between components, not usage guidelines for using one.
metadata-schema-generator
Produces JSON schemas encoding prop constraints, behavioural rules, composition constraints, prohibited combinations, and accessibility contracts as programmatic data for linters, code generators, and test frameworks.
This is design systems work at the infrastructure level. If you are building AI agents that work with your design system, these are the files they need.
Proof
What the output actually looks like
All real outputs from real codebases.
Agents
Four workflows that chain skills into end-to-end pipelines. Agents carry context forward between skills. The accessibility failures inform the usage guidelines. The drift findings inform the stakeholder brief. The output at the end reflects everything found upstream.
/full-diagnostic
Chains
5 audit skills with cross-skill synthesis
When
Quarterly review or inheriting a system
/release-check
Chains
Design-to-code, accessibility, token compliance, AI description, usage guidelines, change communication
When
Before shipping any component
/governance-review
Chains
Adoption report, drift detection, stakeholder brief
When
Monthly or quarterly governance cadence
/migration
Chains
Token audit, naming audit, migration plan, codemod generation, communication
When
Planning a major migration
Who this is for
Design System Ops is built for practitioners. The people responsible for a design system, not just the people who use one.
A good fit if you are:
- ✓ A design systems lead or senior design engineer maintaining a production system
- ✓ Someone who needs to produce governance documentation, stakeholder reports, or deprecation plans regularly
- ✓ A team of one managing a system that has more consumers than contributors
- ✓ Someone migrating a token architecture and needs both the plan and the codemods
- ✓ Building AI-native design system infrastructure and need structured context files for agents
Not a good fit if you are:
- × Looking for a component generator or UI builder
- × New to design systems and looking for an introduction to the concepts
- × Working in a team where Claude Code is not part of the toolchain
Not sure?
Is it right for you?
Answer 6 questions. Get a personalised skill map in 60 seconds.
Pricing
Design System Ops
One purchase. Free updates.
Buy for $149All 37 skills, 4 agents, 13 commands, 10 knowledge notes.
One purchase. Free updates. Install once, use across every project.
Requires Claude Code. Compatible with any stack.
FAQ
Download the zip after purchase. Copy the design-system-ops/ folder into your Claude Code skills directory at ~/.claude/skills/. That is it. Skills are available in every Claude Code session from then on.
Yes. All 37 skills work without a Figma connection. Connecting a Figma MCP server unlocks additional capabilities for skills that work with your Figma library, but it is entirely optional.
Any stack Claude Code can read. It has been tested against React, Vue, Twig/Fractal, Emotion, Tailwind, Style Dictionary v4, plain SCSS, and TypeScript token objects. The skills adapt to what they find.
No. Skills activate automatically when you describe a task in natural language. The slash commands are a convenience layer, not a requirement. Just describe what you need.
You get every update. Download the new version from your Lemon Squeezy purchase history and replace the folder. Takes two minutes.
No. One purchase, permanent access.
If you buy it and it genuinely does not work for your setup, get in touch and I will sort it out. I am not interested in keeping money for a product that did not deliver value.