Design
Plugin
bridge-ds
Design in Figma with Claude Code. Bridge connects your terminal to the Figma Plugin API via WebSocket.
Plugin Signal58/100Fair
maintained66
capable43
documented75
adopted47
Install on Claude Code
> /plugin marketplace add noemuch/bridge> /plugin install bridge-ds@bridge-ds-dev
Stats
156
Stars
13
Forks
Maintained
Maintenance
TypeScript
Language
MIT
License
2mo ago
Last commit
5mo ago
Created
Repo: noemuch/bridge
What's inside
Skill(5 skills)
/extracting-design-systemUse when the user says "setup", "setup bridge", "extract", "extract DS", "onboard", "build knowledge base", "initialize bridge", or is starting Bridge in a project for the first time. Handles the complete bootstrap: pre-flight checks, scaffolding (docs.config.yaml, cron/generating-figma-designUse when the user requests to design, create, build, generate, or make a new Figma component or screen — including phrases like "make a button", "design a settings page", "build a new card", "generate X". Produces a CSpec, compiles it to a scene graph, executes it in Figma via/learning-from-correctionsUse when the user says they adjusted the design in Figma, mentions "fix", "correct", "learn from", "I changed", "diff", "what changed", or wants the system to incorporate manual Figma edits back into the spec. Diffs the current Figma state against the last snapshot, classifies/shipping-and-archivingUse when the user says "done", "ship it", "finish", "complete", "archive", or otherwise indicates the current design is ready to be shipped. Runs final verification (Gate B), archives the CSpec, updates history, extracts a recipe when eligible, and cleans up temp files./using-bridgeUse when any Bridge command is invoked (make, fix, done, setup, drop, status) or any Figma / design-system / compiler / Bridge workflow topic is raised. Sets command priorities and iron laws (compiler-only, semantic tokens only, verification-before-ship).
Hook(1 hook)
README
Discussions · Issues · Contributing · Security · Changelog
Bridge compiles your design-system intent into Figma output that's guaranteed DS-compliant by construction — not by verification. 26 Figma API rules enforced automatically by a local compiler. Zero hardcoded values, zero raw Plugin API code, zero AI hallucinations.
Three pillars: a deterministic compiler (the moat), conversational UX via Claude Code skills (make / fix / done), and a living KB continuously synchronized with Figma via cron.
For designers
Design components and screens from natural language inside Claude Code. Bridge handles the rest:
# In Claude Code, inside your DS repo:
make a settings screen for account information
Bridge produces:
- A structured CSpec (YAML) describing the layout + tokens
- A scene graph JSON (validated against your DS registries)
- Compiled Figma Plugin API code (all 26 rules respected)
- Executed designs in Figma via MCP
Every output uses your real components, bound variables, and text styles. Zero hardcoded values.
Iterate with fix (capture manual Figma edits as learnings). Ship with done (archive + extract recipes).
For DS teams
Bridge keeps your knowledge base continuously synchronized with Figma.
setup bridgein Claude Code bootstraps your DS repo: registries, cron workflow, all in one flow.- Daily cron on GitHub Actions pulls Figma via REST, detects KB drift, opens a PR with the diff. Silent on no-change.
- Recipe + CSpec ref-validity checks flag broken references when components are renamed or removed.
For engineers
The KB lives in your repo at bridge-ds/knowledge-base/registries/. Point your AI client at this directory or read it programmatically. Your generated code uses tokens, variants, and composition rules correctly — because it reads the source of truth, not guesses.
Quick start
In Claude Code, any session (one-time install):
/plugin marketplace add noemuch/bridge
/plugin install bridge-ds
In your DS repo:
cd /path/to/ds-repo && claude
setup bridge
One phrase. The skill handles pre-flight, scaffolding, extraction, GitHub secret, first commit, and optional cron test. ~10 minutes end-to-end.
Upgrading from v5.x? See BREAKING.md for the v6 migration guide.
Architecture
| Layer | Technology | Description |
|---|---|---|
| Workflow | Claude Code Skills | Five focused skills (see Skills below) |
| Spec | CSpec YAML | Structured, human-readable compilable specifications |
| Compiler | TypeScript | Scene graph JSON → Figma Plugin API code (26 rules enforced) |
| Transport | MCP | figma-console-mcp (preferred) or official Figma MCP server |
| Target | Figma Desktop / Cloud | Production-ready designs in your real DS library |
| Memory | Knowledge Base | Registries, guides, recipes, learnings — per-project |
You describe → Claude writes CSpec → Compiler resolves tokens → MCP → Figma
Skills
| Skill | Trigger | Purpose |
|---|---|---|
using-bridge | SessionStart (auto) | Force-loaded rules, command map, drop/status procedures |
generating-figma-design | make <description> | Spec + compile + execute + verify |
learning-from-corrections | fix | Diff Figma corrections, extract learnings, patch recipes |
shipping-and-archiving | done | Final gate, archive, extract recipes |
extracting-design-system | setup bridge | Bootstrap a DS repo end-to-end |
The compiler
Every scene graph JSON goes through a deterministic pipeline:
bridge-ds compile --input scene.json --kb <kb-path> --transport <console|official>
| Stage | Purpose |
|---|---|
| Parse | Load scene graph JSON, validate schema |
| Resolve | Look up every $token reference against the knowledge base registries |
| Validate | Check structure, detect missing tokens with fuzzy suggestions, flag hardcoded values, validate requested variants against registry metadata |
| Plan | Chunk large graphs for transport limits; bridge nodeIds across chunks |
| Generate | Emit Figma Plugin API code respecting all 26 rules |
| Wrap | Adapt output for the target transport (console IIFE vs. official top-level await) |
Errors are caught at compile time, before anything touches Figma.
Compiler reference → · Transport adapter → · Verification gates →
Bridge CLI
Direct CLI commands (typically invoked under the hood by skills):
| Command | Purpose |
|---|---|
bridge-ds setup --ds-name <name> --figma-key <key> | Headless scaffold (used by setup bridge) |
bridge-ds compile --input <json> --kb <path> | Compile a scene graph JSON |
bridge-ds doctor | Diagnose config, connectivity, KB health |
bridge-ds extract --headless | Figma REST extraction (CI-friendly, FIGMA_TOKEN required) |
bridge-ds migrate | Upgrade a legacy knowledge base to the current schema |
bridge-ds cron | Run the cron orchestrator (KB sync, opens PR on diff) |
Recipes
Recipes are parameterized scene graph templates the compiler reuses across sessions. The fastest way to build one: generate a screen with make, then done to archive — Bridge auto-extracts a recipe when the layout is reusable.
Recipes live under bridge-ds/knowledge-base/recipes/ in your repo. Schema: { id, name, archetype, tags, scene_graph, confidence }. Each recipe is scored against the user's description on four axes (archetype match, tag overlap, structural similarity, confidence). High-scoring recipes pre-fill the CSpec.
Full schema: references/compiler-reference.md.
Project structure
bin/ CLI entry (bridge-ds binary)
lib/
cli/ Typed CLI (main, setup-orchestrator, token-handling, …)
compiler/ Scene graph compiler (TypeScript)
config/ YAML config parsing
cron/ GitHub Actions cron orchestrator (KB sync)
extractors/ Figma REST + MCP extractors
kb/ Knowledge base (registries, hashing, auto-detect)
mcp/ MCP transport adapter (console/official)
references/ Shared repo-level references
compiler-reference.md
transport-adapter.md
verification-gates.md
red-flags-catalog.md
skills/
using-bridge/ Force-loaded process skill
generating-figma-design/ make
learning-from-corrections/ fix
shipping-and-archiving/ done
extracting-design-system/ setup
hooks/ SessionStart health-line hook
scripts/ validate-skills, bump-version
test/ Integration + security tests
.claude-plugin/ Claude Code plugin manifest
.cursor-plugin/ Cursor plugin manifest
Plugin support
Bridge DS works as a plugin for:
- Claude Code — Native skill via
.claude-plugin/and SessionStart hook injection. - Cursor — Plugin via
.cursor-plugin/.
Both use the same MCP transport and compiler infrastructure.
Contributing
See CONTRIBUTING.md for development setup, code guidelines, and PR process.
License
File tree
noemuch/bridgeView on GitHub
.claude-plugin/
marketplace.json
plugin.json
.cursor-plugin/
marketplace.json
plugin.json
.github/
workflows/
ci.yml
release.yml
.gitignore
.mcp.json
.npmignore
.nvmrc
.prettierignore
.prettierrc.json
bin/
bridge.js
BREAKING.md
CHANGELOG.md
CLAUDE.md
CONTRIBUTING.md
docs/
assets/
bridge-banner.png
eslint.config.js
hooks/
hooks.json
session-start
skill-load
lib/
cli/
banner.ts
doctor.ts
extract.ts
lint.ts
main.test.ts
main.ts
migrate.test.ts
migrate.ts
setup-orchestrator.test.ts
setup-orchestrator.ts
token-handling.test.ts
token-handling.ts
ui.ts
compiler/
cli.ts
codegen.test.ts
codegen.ts
compile-with-lint.test.ts
compile.test.ts
compile.ts
errors.ts
helpers.ts
plan.ts
registry.mcp-shape.test.ts
registry.schema-guard.test.ts
registry.ts
resolve.category-bias.test.ts
resolve.ts
schema.ts
types.ts
validate.test.ts
validate.ts
wrap.ts
config/
kb-config.test.ts
kb-config.ts
cron/
orchestrator.test.ts
orchestrator.ts
extractors/
figma-rest.test.ts
figma-rest.ts
kb/
auto-detect.test.ts
auto-detect.ts
hash.test.ts
hash.ts
migrations/
legacy-to-v1.test.ts
legacy-to-v1.ts
registry-io.test.ts
registry-io.ts
schema-version.test.ts
schema-version.ts
lint/
builtin/
builtin-functions.test.ts
builtin-functions.ts
builtin.test.ts
_rulesets/
recommended.yaml
strict.yaml
copy/
artifacts-english-only/
fixtures/
expected.json
negative/
french-copy.cspec.yaml
positive/
english-copy.cspec.yaml
rule.yaml
interaction/
interaction-tokens-are-float/
fixtures/
expected.json
negative/
color-interaction.cspec.yaml
positive/
float-overlay.cspec.yaml
rule.yaml
no-hover-as-variant/
fixtures/
expected.json
negative/
hover-variant.cspec.yaml
positive/
base-states.cspec.yaml
rule.yaml
naming/
component-name-pascal/
fixtures/
negative/
camel.cspec.yaml
kebab.cspec.yaml
positive/
pascal.cspec.yaml
rule.yaml
property-key-suffix/
fixtures/
expected.json
negative/
missing-node-id-suffix.cspec.yaml
positive/
suffixed-keys.cspec.yaml
rule.yaml
spec-filename-kebab/
fixtures/
expected.json
negative/
crypto_card.cspec.yaml
CryptoCard.cspec.yaml
positive/
crypto-card.cspec.yaml
rule.yaml
variant-name-lowercase/
fixtures/
expected.json
negative/
pascal-variant-values.cspec.yaml
positive/
lowercase-and-kebab.cspec.yaml
rule.yaml
structure/
bridge-api-versioned/
fixtures/
expected.json
negative/
missing-bridge-api.ruleset.yaml
positive/
versioned-rule.ruleset.yaml
rule.yaml
cspec-shape/
cspec-shape.schema.json
fixtures/
expected.json
negative/
bad-name-shape.cspec.yaml
missing-component.cspec.yaml
positive/
valid.cspec.yaml
rule.yaml
snapshot-next-to-spec/
fixtures/
expected.json
negative/
missing-snapshot.cspec.yaml
positive/
with-snapshot-snapshot.json
with-snapshot.cspec.yaml
rule.yaml
spec-required-fields/
fixtures/
expected.json
negative/
missing-all.cspec.yaml
missing-archetype.cspec.yaml
positive/
all-fields.cspec.yaml
rule.yaml
tokens/
dtcg-compliance/
fixtures/
expected.json
negative/
missing-dollar-prefix.cspec.yaml
positive/
dtcg-shape.cspec.yaml
rule.yaml
no-deprecated-tokens/
fixtures/
expected.json
negative/
deprecated-tokens.cspec.yaml
positive/
active-tokens.cspec.yaml
rule.yaml
no-hardcoded-hex/
fixtures/
expected.json
negative/
inline-hex.cspec.yaml
positive/
semantic-tokens.cspec.yaml
rule.yaml
no-hardcoded-spacing-px/
fixtures/
expected.json
negative/
px-literals.cspec.yaml
positive/
semantic-spacing.cspec.yaml
rule.yaml
token-refs-resolve/
fixtures/
expected.json
negative/
dangling-token.cspec.yaml
positive/
known-tokens.cspec.yaml
rule.yaml
workflow/
recipe-eligibility/
fixtures/
expected.json
negative/
component-archetype.cspec.yaml
too-many-corrections.cspec.yaml
positive/
eligible-screen.cspec.yaml
rule.yaml
ship-bundle-completeness/
fixtures/
expected.json
negative/
missing-history.json
missing-snapshot.json
positive/
complete-bundle.json
rule.yaml
compile-bridge.test.ts
compile-bridge.ts
coverage.test.ts
coverage.ts
engine.test.ts
engine.ts
integration.test.ts
kb-loader.test.ts
kb-loader.ts
load-custom-functions.ts
loader.test.ts
loader.ts
overlay.snapshot.test.ts
overlay.test.ts
overlay.ts
types.ts
LICENSE
package-lock.json
package.json
packages/
rule-api/
package.json
src/
defineBridge.ts
index.ts
types.ts
tsconfig.json
README.md
references/
compiler-reference.md
red-flags-catalog.md
transport-adapter.md
verification-gates.md
scripts/
bump-version.js
copy-builtin-resources.js
validate-rule-meta.js
validate-skills.js
SECURITY.md
skills/
extracting-design-system/
SKILL.md
generating-figma-design/
references/
templates/
component-cspec.yaml
screen-cspec.yaml
SKILL.md
learning-from-corrections/
SKILL.md
shipping-and-archiving/
SKILL.md
using-bridge/
SKILL.md
test/
fixtures/
figma-rest/
component-sets-response.json
components-response.json
nodes-response.json
styles-response.json
variables-response.json
kb/
kb-config/
full.yaml
minimal.yaml
multi-file.yaml
legacy-grouped/
knowledge-base/
registries/
components.json
text-styles.json
variables.json
registries/
components.json
text-styles.json
variables.json
lint/
finary.yaml
kb/
registries/
components.json
text-styles.json
variables.json
minimal-config.yaml
readme/
with-figma-url.md
with-package-json-figma.json
without-figma-url.md
security/
token-leak.test.ts
snapshots/
overlay-card.xml
tsconfig.jsonFAQ
bridge-ds is a Claude Code plugin with 5 hand-picked skills for design work, indexed on Flowy. Install it with the command on its page. It includes extracting-design-system, generating-figma-design, learning-from-corrections. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is bridge-ds?
- Design in Figma with Claude Code. Bridge connects your terminal to the Figma Plugin API via WebSocket.
- How do I install bridge-ds?
- Run these in Claude Code: /plugin marketplace add noemuch/bridge then /plugin install bridge-ds@bridge-ds-dev. Then prompt normally.
- Does bridge-ds auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is bridge-ds free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.