Claude Code plugin · for design-system teams

Keep your design system and your codebase on the same system.

ds-bridge connects your Figma library to your code — catching token drift, flagging off-system values at the door, and turning handoff QA into a number you can trust.

Get started →GitHub$ claude plugin install ds-bridge

01 · Design-system linting

Off-system values, caught at the door.

Run /ds-bridge:ds-lint and every hard-coded color, spacing, or radius is checked against your real tokens — with the exact token it should have used, or the nearest candidates when it’s close.

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

Above: a representative ds-lint run. The terminal output is the imagery — no screenshots needed.

02 · Token-drift detection

Know the moment design and code diverge.

ds-bridge diffs your committed token files against the Figma library and tells you exactly what changed — added, removed, or re-valued — so drift is a tracked metric, not a surprise in code review.

ds-bridge — token-check

$ claude /ds-bridge:token-check

comparing tokens.json ↔ Figma library “Core / v4” (rev 0418)

  + color.brand.accent      added in Figma · #9a2d2d
  ~ space.md                16px → 12px  (used in 14 files)
  − color.base.blue-500     removed · still referenced in code

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

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

Drift is scored over time and rendered in the HTML dashboard report.

03 · Pre-handoff QA

A readiness score before anything ships.

Point /ds-bridge:handoff-qa at a Figma frame and get a machine-checkable readiness score — detached components, raw values, missing variants — so designers validate before the engineer is blocked.

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 in the native plugin preferences.

Install in under a minute.

ds-bridge runs on every Figma plan — the remote MCP works on all seats. Add the plugin, fill in the native preferences dialog, and your first finding is one command away.

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

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

Browse the tutorials →