ds-bridge

Design-system analytics in Claude Code, the AI coding agent

Know if your design system is really used.

Catch design-system decay before it ships.

The sample project’s dashboard after eight weeks of runs. Open it →

See how much of your styling uses your design tokens, and whether that is going up or down. Every run is saved to your repo’s history.

  • On-system % and a 0–100 system score, trended
  • Recorded in CI on every push
  • A manager report and an org rollup across repos
/ds-bridge:dashboard
Install freeRead the docs →$ claude plugin install ds-bridge

Free and open source (MIT) · works with Figma Professional and up · runs locally — your code never leaves your repo

Measure. Find. Fix.

Measure shows the trend. Lint, Drift and Handoff find what’s off-system, and lint --fix rewrites the exact matches. Each run adds a point to the trend.

  • Measure

    Track adoption and health

    How much of your styling uses the system’s tokens, and a 0–100 system score, as trends recorded on every push. Drift, handoff readiness and parity sit beside them in one offline dashboard.

    /ds-bridge:dashboard

  • Lint

    Find hardcoded values

    Colors, spacing and radii checked against your token file. Findings name the token to use where one fits, and exact matches can be fixed automatically.

    /ds-bridge:ds-lint

  • Drift

    Detect token drift

    Your token source diffed against the built outputs. Stale, missing and orphaned tokens, scored and trended.

    /ds-bridge:token-check

  • Handoff

    QA Figma handoffs

    A 0–100 readiness score for each Figma frame before development starts. Frames below the gate don’t ship.

    /ds-bridge:handoff-qa

Your design system’s numbers, over time.

One dashboard turns your repo’s history into trends: system score, on-system share, drift and parity, beside handoff readiness for each frame. Pick a day on its timeline to see every number as it was then. CI records a point on every push, the manager report fits on one page, and every number exports as CSV or JSON. It’s a single HTML file that works offline, so you can share it with anyone.

The ds-bridge HTML dashboard for a sample project after eight weeks of runs: the header with a timeline of earlier days, a headline strip with the system score, on-system share, handoff readiness, parity, drift, contrast, release, consistency and design debt, and the system score gauge beside its rising trend.
Open the example dashboard →Track health over time

For every role.

  • Design-system managers

    See adoption and health move, run after run.

    • Install the GitHub Action and every push to main is recorded to a ds-bridge-data branch
    • A one-page manager report: score and trend, targets, top risks and next actions
    • An org rollup across repos, run locally and ranked by system score
    • Recurring exceptions get an owner and a decision, and never hide from the score
    • Export to Sheets or BI as CSV or JSON
    /ds-bridge:dashboard --setup

  • Design-system developers

    Catch off-system code while Claude writes it.

    • Lint names the token to use, and --fix rewrites exact matches
    • A hook checks every style file Claude writes or edits
    • ds-bridge record runs every check in CI as one batch
    • A scorecard comment on each pull request (opt-in), with an optional gate
    /ds-bridge:ds-lint

  • Design-system and UX designers

    Know a frame is ready before it’s built.

    • A 0–100 handoff readiness score for each Figma frame
    • Library health: overrides, deprecated use and likely detached instances
    • Token color pairs checked for contrast against WCAG AA
    /ds-bridge:handoff-qa

See it run.

On a sample project: the insights pane in Claude Desktop and the terminal, and the commands behind each check.

  • The ds-bridge insights pane in Claude Desktop, beside the conversation: a gauge at 65% token adoption, a donut of token versus hard-coded colours (70 / 30), a bar chart of the most used components led by Icon at 22, and a donut of variables by kind. Charts drawn by the mod's own code from a sample Figma frame; the conversation is illustrative.
    The insights pane in Claude Desktop (sample frame)Claude Code/ds-insightsDrawn by the mod · sample data
  • The same insights pane docked beside the transcript in the Claude Code terminal: a 65% adoption bar, a waffle of 100 squares for tokens versus hard-coded colours, and track bars for the most used components, with Rescan, Library health and Close buttons. Drawn by the mod's own code from a sample Figma frame.
    The insights pane in the terminal (sample frame)Claude Code/ds-insightsDrawn by the mod · sample data
  • Claude Code running /ds-bridge:ds-lint on a sample app: 7 findings across four files — 3 exact token matches, 3 near-misses and 1 off-system color — each naming the token to use, then a summary table and the on-system share, 64%.
    Lint: every hardcoded value, matched to a tokenClaude Code/ds-bridge:ds-lintCLIds-bridge lint
  • Claude Code running /ds-bridge:ds-lint --fix, which changes 2 files and raises on-system to 73%, then a second lint showing the 5 findings left: near-misses and one off-system color are never auto-fixed.
    Fix: exact matches rewritten, near-misses left to youClaude Code/ds-bridge:ds-lint --fixCLIds-bridge lint --fix
  • Claude Code running /ds-bridge:token-check against built outputs: 4 drift entries, 10 in sync — space.md is stale (source 16px, output 12px), two tokens are missing from the outputs, and color-legacy-teal is orphaned.
    Drift: token source against the built outputsClaude Code/ds-bridge:token-checkCLIds-bridge tokens check
  • Claude Code running /ds-bridge:a11y-check: the color.brand.on-primary on color.brand.surface pair fails WCAG AA at 1.10:1 against the 4.5:1 it needs, with a suggested replacement color.
    Contrast: token pairs checked against WCAG AAClaude Code/ds-bridge:a11y-checkCLIds-bridge a11y
  • The insights pane in Claude Desktop answering how lint has been trending: an area line of the on-system share rising from 64% to 100%, lines of open findings falling, a heatmap of lint findings by kind over five weekly runs, and the hard-coded colours to replace. Drawn by the mod from the sample project's history; the conversation is illustrative.
    Claude answers in charts: show_insights on DesktopClaude Codeshow_insightsDrawn by the mod · sample data
  • The same answer in the terminal pane: braille line plots of the on-system share and open findings over five runs, and a shaded heatmap of exact, near-miss and off-system findings by week. Drawn by the mod from the sample project's history; the conversation is illustrative.
    …and in the terminalClaude Codeshow_insightsDrawn by the mod · sample data
  • The ds-bridge report in a terminal: the system score bar at 71% with its sparkline, the component sub-scores, lint violations and the on-system adoption trend.
    The report, in the terminalCLIds-bridge report --format terminal

Install in under a minute.

No signup, no Enterprise APIs. Install, run your first lint, then open the dashboard.

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

# 2 · open Claude Code in your project, run your first lint
claude
/ds-bridge:ds-lint src

# 3 · see the numbers
/ds-bridge:dashboard
Full install guide →Or start with a tutorial