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.

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.

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.

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