A plugin for Claude Code, the AI coding agent — built for design-system teams

Catch design token drift before it ships.

A token changes at the source and the built outputs go stale. ds-bridge diffs them on every run and turns the gap into a score.

Stale, missing, and orphaned tokens — named
Drift scored and trended over time
Breaking changes flagged before review

/ds-bridge:token-check

Hardcoded colors, spacing, and radii are caught at the door — checked against the tokens you actually ship.

Every finding names the exact token to use
--fix rewrites exact matches automatically
W3C, Tokens Studio, and Style Dictionary

/ds-bridge:ds-lint

Every Figma frame gets a 0–100 readiness score before an engineer touches it. Below the gate, it doesn’t ship.

Detached instances and raw values, listed
Configurable readiness gate — default 80
Posts the verdict as one Figma comment

/ds-bridge:handoff-qa

Adoption, drift, and handoff pass rate as trends — one offline dashboard the whole team can read.

On-system percentage over time
Figma ↔ code component parity
Self-contained HTML — share it anywhere

/ds-bridge:dashboard

Install free See pricing →$ claude plugin install ds-bridge

Open-source core (MIT) · works with Figma Professional and up · runs locally — your code never leaves your repo

Lint01

Find hardcoded values that should be design tokens.

Every color, spacing, and radius is checked against your token file — W3C, Tokens Studio, or Style Dictionary. Each finding names the exact token to use, or the nearest match. --fix rewrites exact matches automatically; near-misses are never touched.

ds-bridge — ds-lint

$ claude /ds-bridge:ds-lint src/components

scanning src/components · 42 files · token source: tokens.json (W3C)

Button.tsx:18:14  off-system color  background: #3b82f6 — use token color.brand.primary
Card.tsx:7:3      near-miss spacing  padding: 15px — near token(s): space.md (16px · off by 1px)

─────────────────────────────────────────────
  on-system   ████████████████░░░░  38  90%
  near-miss   █░░░░░░░░░░░░░░░░░░░   3
  off-system  █░░░░░░░░░░░░░░░░░░░   1

2 findings in 42 files · run with --fix to apply 1 exact match

A representative ds-lint run — the terminal output is the imagery.

Drift02

Detect design token drift.

ds-bridge diffs your token source against your built outputs and flags every stale, missing, or orphaned token — with the files each change touches. Drift gets a score you can track over time.

ds-bridge — token-check

$ claude /ds-bridge:token-check

comparing tokens.json ↔ built outputs · tokens.css · tokens.d.ts

  + color.brand.accent      added in source · missing in outputs
  ~ space.md                16px → 12px · outputs stale (14 files affected)
  − color.base.blue-500     removed from source · orphaned in tokens.css

─────────────────────────────────────────────
  drift score  ██████░░░░░░░░░░░░░░░  31%  (3 changes · 1 breaking)

1 breaking change · run /ds-bridge:dashboard for the trend

Drift is scored per run and trended in the dashboard.

Handoff03

QA Figma handoffs before development.

Point /ds-bridge:handoff-qa at a Figma frame and get a 0–100 readiness score: detached instances, raw values, missing text styles — found before development starts. Set a gate; frames below it don’t ship.

ds-bridge — handoff-qa

$ claude /ds-bridge:handoff-qa figma.com/…/Checkout?node=128-44

frame “Checkout / Payment” · 64 layers · gate: 80

  ✓ all colors map to library variables
  ✓ type uses text styles
  ! 2 layers use raw spacing (11px, 13px)
  ✗ 1 detached component instance · “Pay button”

─────────────────────────────────────────────
  readiness   ███████████████░░░░░  74 / 100  below gate

Not ready for handoff. Fix 1 blocker to clear the gate.

The readiness gate is configurable — the default is 80.

Measure04

Measure design system adoption.

The dashboard tracks on-system percentage, drift score, handoff pass rate, and Figma ↔ code component parity over time. One self-contained HTML file — works offline, shareable anywhere.

on-system90%▲ 4 pts this month

drift score31%1 breaking change

handoff pass7 / 9frames this sprint

parity41 / 44components matched

See pricing →

Pricing

Free and open — Pro is coming.

Everything ds-bridge ships today is free — linting, drift detection, handoff QA, parity audits, and the dashboard, with nothing behind a paywall. Pro is a planned tier; the feature split will be announced when it ships.

Compare plans →

Install

Install in under a minute.

No signup. Works with Figma Professional and up — no Enterprise APIs. Two commands and you’re linting.

bash

# 1 · add the marketplace, then install the plugin
claude plugin marketplace add lucksy/ds-bridge
claude plugin install ds-bridge

# 2 · run your first lint
claude /ds-bridge:ds-lint

Full install guide →

Tutorials

New here? The tutorials walk you through your first lint, drift check, and handoff QA — one friendly step at a time.

Browse the tutorials

Catch design token driftoff-system codethe broken handoffdesign-system decay before it ships.