Install ds-bridge.
Three ways to run it: as a Claude Code plugin, from a local checkout, or as a standalone CLI in CI. Free, no signup.
$ claude plugin install ds-bridgeQuick start
Get started in two commands.
Install, then lint your own code — no Figma account needed. Connect Figma in two more commands when you’re ready for drift, handoff, parity, impact, and docs.
bash
# 1 · install the plugin (in your terminal)
claude plugin marketplace add lucksy/ds-bridge
claude plugin install ds-bridge
# 2 · run your first lint — no Figma needed (in Claude Code)
/ds-bridge:ds-lint src
# 3 · connect Figma durably (in your terminal): hidden prompt → gitignored .ds-bridge.env
npm i -g github:lucksy/ds-bridge#release # once: the ds-bridge command
ds-bridge config connect --verify
# 4 · point at your library file and build the registry
ds-bridge config set-library <figma-library-url>
ds-bridge registry buildSteps 1–2 need nothing but your code and run in seconds. Steps 3–4 unlock every Figma-powered feature — full walkthrough in Connect ds-bridge to Figma.
Plugin01
Install as a Claude Code plugin.
The recommended path. Claude Code installs plugins from a marketplace — point one at this repo, then install ds-bridge from it.
You need Node 22 or later, since every command runs the bundled CLI. The insights pane needs Claude Code v2.1.287 or later.
bash
# 1 · register this repo as a marketplace
claude plugin marketplace add lucksy/ds-bridge
# 2 · install the plugin from that marketplace
claude plugin install ds-bridge
# disambiguate when several marketplaces are configured
claude plugin install ds-bridge@ds-bridgeYou can pre-seed userConfig options non-interactively with repeatable --config flags — they’re validated against the manifest and stored the same way as the interactive configure flow.
bash
claude plugin install ds-bridge \
--config figma_file_key=abc123 \
--config readiness_threshold=85Useful follow-ups: claude plugin list, claude plugin details ds-bridge, claude plugin update ds-bridge, claude plugin uninstall ds-bridge.
The ds-bridge command. Inside Claude Code the plugin puts ds-bridge on the PATH of Claude’s shell, so every ds-bridge … line on this site runs as written there. Two commands need your own terminal — config connect (hidden token prompt) and dashboard setup (a wizard) — so install the same command there once:
bash
# once: installs only the bundled CLI (no other dependencies)
npm i -g github:lucksy/ds-bridge#release
ds-bridge --versionLocal02
Run from a local checkout.
Load the plugin straight from a checkout for the current session — no marketplace, no install. --plugin-dir is repeatable and also accepts a .zip. Inside that session the slash commands, the hooks and the insights pane are live.
bash
git clone https://github.com/lucksy/ds-bridge
claude --plugin-dir ./ds-bridgeCLI03
Use the standalone CLI in CI.
Every behavior lives in the bundled CLI (dist/cli.mjs) — handy for CI gates and scripts. Exit codes: 0 clean · 1 findings · 2 config error. dist/cli.mjs is committed at release tags only; build it from a fresh checkout with npm run build. Requires Node ≥ 22.
bash
node dist/cli.mjs --help
node dist/cli.mjs lint ./src
node dist/cli.mjs tokens check --reportConfigure04
Configuration options.
Claude Code prompts for these natively when you enable the plugin — no settings.json hand-editing.
| Option | Default | What it does |
|---|---|---|
figma_file_key | — | Key from your Figma library file URL. Used by registry build and any library-wide audit. |
figma_token | — | Figma personal access token. Sensitive — connect it durably with config connect (writes a gitignored .ds-bridge.env); never commit it to .ds-bridge.json. |
token_source | auto-detected | Your W3C / Tokens Studio / Style Dictionary entry file (.json or .json5), a folder of token files read as one set, or a Figma variables export. If unset, ds-bridge discovers it from common paths. |
report_style | both | Report output: html, terminal, or both. |
readiness_threshold | 80 | The handoff-readiness gate /ds-bridge:handoff-qa must clear for a frame to pass. |
insights_palette | harvest | Chart colours in the insights pane: harvest, nivo, echarts, ds-bridge, or mono. |
insights_share_style | donut | How the pane draws the parts of a whole on Claude Desktop: donut, pie, or bar. |
insights_corner_radius | 4 | Rounding of the pane's bars and slices on Claude Desktop, 0–12 px. |
Resolution order (highest wins): CLI flags → env vars (CLAUDE_PLUGIN_OPTION_*, FIGMA_TOKEN) → a gitignored .ds-bridge.env (the durable token home) → project .ds-bridge.json → userConfig defaults. A missing token is an actionable message, never a crash.
Token05
Set up your Figma access token.
ds-bridge talks to Figma with a personal access token (PAT). The seat you create it from matters.
Required scopes: file_content:read, library_content:read, file_versions:read, file_comments:read, file_comments:write. The legacy files:read scope is deprecated.
Because figma_token is sensitive, Claude Code does not keep it across restarts (#62442) — the value you type into the preferences dialog is gone the next time you launch. Connect it durably instead: the interactive command prompts with the input hidden and writes a gitignored .ds-bridge.env (mode 0600) the CLI auto-loads on every run. Inside Claude Code, /ds-bridge:connect does the same. Never put the token in .ds-bridge.json (the loader ignores it there and warns).
bash
# interactive: hidden prompt → gitignored .ds-bridge.env (0600), then --verify pings Figma
ds-bridge config connect --verify
# already have FIGMA_TOKEN in your environment? persist it without prompting
ds-bridge config persist-tokenYour Figma file keys aren’t secret, so they live in the committed .ds-bridge.json the whole team shares. Point ds-bridge at your design-system library, then register the product files that consume it:
bash
# the shared library file → committed .ds-bridge.json (figma_file_key), not a secret
ds-bridge config set-library <figma-library-url-or-key>
# register product/consumer files by alias, then list them
ds-bridge config add-product web <figma-url>
ds-bridge config list
# show the effective config (token masked) and which source won each value
ds-bridge config showThe remote Figma MCP server authenticates on its own — the REST PAT does not authenticate MCP, and vice versa. New to the Figma side? Connect ds-bridge to Figma walks the whole flow start to finish.
First run