bridge

Name: bridge
Author: noemuch

Verified

Design in Figma with Claude Code. Bridge connects your terminal to the Figma Plugin API via WebSocket.

145stars

12forks

TypeScript

Installation

# Add to your Claude Code skills
git clone https://github.com/noemuch/bridge

Getting Started

Guides for using mcp servers skills like bridge.

Best MCP Servers in 2026
Category-by-category picks: databases, dev tools, productivity, browser automation.
What is an AI Skills Marketplace?
Definitions, how marketplaces work, and how to choose between them in 2026.
Getting Started with AI Skills
First-time install walkthrough for Claude Code, Codex CLI, and ChatGPT.

Security ReportVerified

Last scanned: 5/30/2026

{
  "issues": [
    {
      "type": "npm-audit",
      "message": "brace-expansion: brace-expansion: Large numeric range defeats documented `max` DoS protection",
      "severity": "medium"
    }
  ],
  "status": "PASSED",
  "scannedAt": "2026-05-30T16:11:41.881Z",
  "npmAuditRan": true,
  "pipAuditRan": true
}

README.md

Frequently Asked Questions

What is bridge?

bridge is an open-source mcp servers skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by noemuch. Design in Figma with Claude Code. Bridge connects your terminal to the Figma Plugin API via WebSocket. It has 145 GitHub stars.

Is bridge safe to use?

Yes. bridge passed SkillsLLM's automated security scan — a dependency vulnerability audit plus prompt-injection heuristics — with no high-severity issues. You can read the full report in the Security Report section on this page.

How do I install bridge?

Clone the repository with "git clone https://github.com/noemuch/bridge" and add it to your Claude Code skills directory (see the Installation section above).

What programming language is bridge written in?

bridge is primarily written in TypeScript. It is open-source under noemuch on GitHub, so you can review or fork the full source.

Are there alternatives to bridge?

Yes. SkillsLLM lists many other MCP Servers skills you can browse and compare side by side. Open the MCP Servers category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh bridge against similar tools.

MCP for Beginners

Build MCP servers that give AI assistants real capabilities

36 minBeginner

Comments (0)

to leave a comment.

No comments yet. Be the first to share your thoughts!

Related Skills

ECC

by affaan-m

The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.

227,518

Popular in MCP Servers

Top skills in this category by stars

Scrapling

by D4Vinci

🕷️ An adaptive Web Scraping framework that handles everything from a single request to a full-scale crawl!

68,783

mcp-server frontmcp

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 bridge in 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
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

MIT