Design System Ops

Claude Code skills for the work that keeps a design system alive.

designsystemops.com

The work nobody built AI for

Design systems drift. Tokens go stale. Components fall out of spec. Governance documentation gets written once and never updated. The deprecation plan lives in someone's head. The stakeholder brief gets thrown together the night before quarterly review.
There are great AI tools for the designer who uses a design system. But the team running it? That work never had proper tooling – until now.

What this is

A skill pack for Claude Code and Cowork that 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 doesn't 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're migrating to DTCG — gives you a sprint-plannable migration plan with hour estimates.

That is the difference. Not a smarter prompt. A different kind of output entirely.

Who it's for: Design systems leads, senior design engineers, and anyone responsible for a production design system. The people who run the system, not just the people who use it.

Install

Cowork (desktop app — easiest)

1. Download design-system-ops.plugin from the installable/ folder
2. Open the Claude desktop app and start a Cowork session
3. Drop the .plugin file into the chat
4. Follow the install prompt — done

Claude Code (terminal)

Clone this repo into your Claude Code skills directory:

git clone https://github.com/murphytrueman/design-system-ops.git ~/.claude/skills/design-system-ops

For project-level installation (instead of global):

git clone https://github.com/murphytrueman/design-system-ops.git your-project/.claude/skills/design-system-ops

Verify: Open Claude Code and say "How healthy is my design system?" If Claude responds with a structured, multi-step process — not generic advice — you're set up.

See 1-INSTALL.md for the full guide with entry points by use case.

What's included

Skills

Agents

AI infrastructure skills

Five skills produce machine-readable files that AI agents and tooling consume directly: context-engine-builder, governance-encoder, codebase-index, component-decision-tree, and metadata-schema-generator. If you're building AI-native design system infrastructure, these are the files your agents need.

Core frameworks

The skills encode specific practitioner frameworks, not generic advice:

• Three-tier token architecture — primitive → semantic → component, with tier-leakage detection and DTCG 2025.10 alignment
• Component Challenge Rating — a difficulty classification system that calibrates audit depth and remediation estimates to actual component complexity
• Design system maturity model — five levels from ad-hoc to optimised, used across health reports, stakeholder briefs, and adoption tracking to frame recommendations appropriately
• AI-readiness scoring — evaluates how well your system's metadata, naming, and structure support AI agent consumption

Quick examples

"I just want to know where we stand"
→ Say: "How healthy is my design system?"

"Our tokens are a mess"
→ Say: "Audit my tokens"

"I need to deprecate a component"
→ Say: "Help me deprecate DatePicker in favour of DatePickerNext"

"I need to convince leadership"
→ Say: "Write a stakeholder brief for leadership about our design system"

"Run the full pre-release pipeline"
→ Say: "Run the release pipeline for Dialog"

You don't need to memorise skill names. Describe what you need and the right skill activates.

Sample outputs

Real outputs from real codebases are in sample-outputs/:

• example-token-audit.md — A complete audit of a ~480 token system: 11 findings across Critical/High/Medium/Low, specific code examples, DTCG alignment assessment, and a prioritised remediation roadmap.
• example-component-description.md — A six-section MCP description for a React Dialog component: ~620 words of structured plain text for Figma.
• example-health-dashboard.html — An interactive HTML dashboard generated from audit findings: health radar, severity distribution, priority matrix, metric cards. Open in any browser.

Configuration

Every skill works out of the box with no configuration. If you want to customise behaviour — severity overrides, Figma integration, GitHub API access, recurring trend tracking — create a .ds-ops-config.yml in your project root. An annotated template is included in the skill pack.

See 3-SETUP-AND-CONFIG.md for the full configuration reference.

Figma integration (optional)

Several skills become more powerful when Claude can read your Figma file directly. Two options:

• Figma Console MCP (recommended) — Read and write access. Skills can write descriptions back into components, rename variables, create tokens.
• Standard Figma MCP — Read-only access. Skills pull component data and variable collections.

Setup details in 1-INSTALL.md.

Requirements

• Claude Code or Cowork (Claude desktop app)
• Access to your design system's source files (tokens, components, config)
• Works with any stack: React, Vue, Twig, Tailwind, SCSS, CSS custom properties, Style Dictionary, Emotion, CSS-in-JS

Documentation

Contributing

See CONTRIBUTING.md.

License

MIT — see LICENSE.

Support

If you found this useful, buy me a coffee.

Author

Murphy Trueman — designsystemops.com · [email protected]

Built from 14 years of production design systems work. If it's in these skills, it's because it came up in real work.