Help us improve
Share bugs, ideas, or general feedback.
From bridge-ds
Manages Bridge design workflow for Figma: routes user intents (make, fix, done, setup, drop, status) to appropriate action skills and enforces compiler-only rules and verification checks.
npx claudepluginhub noemuch/bridge --plugin bridge-dsHow this skill is triggered — by the user, by Claude, or both
Slash command
/bridge-ds:using-bridgeThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Bridge is a **compiler-driven** design workflow for generating Figma designs
Generates Figma components and screens from user requests by producing a CSpec, compiling to a scene graph, and executing via MCP with verification.
Automates design system construction from repository analysis: extracts patterns, builds OKLCH token hierarchies, implements accessible components with tests, verifies via multi-reviewer panels.
Builds or updates design systems in Figma from code, creating variables, tokens, component libraries with proper variant bindings, and theming. Orchestrates multi-phase workflows with user checkpoints.
Share bugs, ideas, or general feedback.
Bridge is a compiler-driven design workflow for generating Figma designs
and maintaining a design system via Claude Code. The compiler (at
lib/compiler/compile.ts) enforces all 26 Figma Plugin API rules, so Claude
NEVER writes raw Plugin API code and NEVER hardcodes primitive values.
This skill is force-loaded at every SessionStart via hooks/session-start.
Its job is to establish the discipline before any action skill runs. It is
deliberately small (~400 tokens) to keep the fixed per-session cost low.
| User intent (keywords) | Route to |
|---|---|
| "make", "design", "create", "build", "generate", "new component", "new screen" | generating-figma-design |
| "fix", "correct", "learn", "diff", "what changed", "I adjusted" | learning-from-corrections |
| "done", "ship", "ship it", "finish", "complete" | shipping-and-archiving |
| "setup", "setup bridge", "extract", "extract DS", "onboard", "initialize", "bootstrap" | extracting-design-system |
| "drop", "abandon", "cancel" | inline Drop Procedure (this skill) |
| "status", "what's next", "workflow" | inline status logic (this skill) |
drop is handled inline here — it is small enough not to warrant its
own skill. Invoke when the user says "drop", "abandon", or "cancel".
fix first to
capture corrections before archiving.drop: block to the CSpec with
date, reason, and learnings.specs/active/{name}.cspec.yaml →
specs/dropped/{name}.cspec.yaml. Move the snapshot JSON too if it
exists.{ISO date} | {name} | DROPPED | {reason}
to specs/history.log./tmp/bridge-scene-{name}.json if present.Output template:
## Dropped: {name}
Reason: {reason}
CSpec archived: specs/dropped/{name}.cspec.yaml
Learnings: {captured | skipped}
Ready for the next design. Run: `make <description>`.
## Verification section.| Rationalization | Reality |
|---|---|
| "I'll just hardcode this hex once" | Always use a semantic token. No exceptions. |
| "The compiler is overkill for this tiny thing" | The compiler is the only path. |
| "Skip the screenshot, it's obviously right" | 'Looks right' ≠ 'is right'. |
| "I remember this nodeId from my last session" | Node IDs are session-scoped. Re-search. |
| "I'll use figma-api-rules.md for context" | That file is forbidden. Compiler owns all rules. |
| "The user approved, I can skip the compile exit code check" | Compile exit 0 is Gate A. Independent of user approval. |
| "Let me write a small inline Plugin API script for this fix" | No inline scripts. Scene graph → compiler → execute. |
references/compiler-reference.md (repo-root)references/transport-adapter.md (repo-root)references/verification-gates.md (repo-root)references/red-flags-catalog.md (repo-root)