bridge-ds

Compiler-grade trust for AI-generated Figma.
Deterministic compiler · Living KB · MCP-native

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:

1. A structured CSpec (YAML) describing the layout + tokens
2. A scene graph JSON (validated against your DS registries)
3. Compiled Figma Plugin API code (all 26 rules respected)
4. 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