by noemuch
Design in Figma with Claude Code. Bridge connects your terminal to the Figma Plugin API via WebSocket.
# Add to your Claude Code skills
git clone https://github.com/noemuch/bridgeGuides for using mcp servers skills like bridge.
No comments yet. Be the first to share your thoughts!
Top skills in this category by stars
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.
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:
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).
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.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.
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.
| 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
| 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 |
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 →
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 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.
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
Bridge DS works as a plugin for:
.claude-plugin/ and SessionStart hook injection..cursor-plugin/.Both use the same MCP transport and compiler infrastructure.
See CONTRIBUTING.md for development setup, code guidelines, and PR process.