How jadewuu/design-bridge works
Design Bridge connects a Figma selection in Chrome to a local MCP server and coding agent, which can inspect design data and implement it in an existing project. The extension also supports canvas editing, code generation, design tasks/reviews, feedback, and agent plugins. The graph includes the documented workflow and major source-indexed subsystems; several tool implementations and server routing details were not excerpted, so those connections are omitted where evidence is insufficient.
Main entry points: service-worker.ts Extension broker · tools.ts MCP tool routing · App.vue Extension panel · hub.ts MCP server hub
Components 22
Chrome Extension
- Extension panel
packages/extension/entrypoints/ui/App.vue - Task status UI
packages/extension/components/DesignTaskStatus.vue - Canvas tools
packages/extension/mcp/tools/canvas - Code inspection
packages/extension/mcp/tools/code - Design system tools
packages/extension/mcp/tools/design-system.ts - Code generation
packages/extension/codegen/worker.ts - Plugin sandbox
packages/extension/plugin-sandbox/client.ts
MCP Bridge
- Extension broker
packages/extension/mcp/broker/service-worker.ts - Hub connection
packages/extension/mcp/broker/hub-client.ts - MCP server hub
packages/mcp-server/src/hub.ts - MCP tool routing
packages/mcp-server/src/tools.ts - Design task lifecycle
packages/mcp-server/src/design-tasks.ts - Task persistence
packages/mcp-server/src/design-task-store.ts
Agent Integration
- Codex feedback
packages/mcp-server/src/agent-clients/codex-feedback.ts - Codex queue
packages/mcp-server/src/agent-clients/codex-queue.ts - Agent installation
packages/shared/src/mcp/install.ts
Shared Protocol
- Canvas schemas
packages/shared/src/mcp/canvas.ts - Task protocol
packages/shared/src/mcp/design-task.ts
Product Website
- Product website
packages/site/src/App.vue
Other components
- Designer
- Figma in Chrome
- Local coding agent
Connections 25
- Designer → Figma in Chrome: selects design
README.md - Designer → Local coding agent: requests implementation
README.md - Figma in Chrome → Extension panel: provides selection
README.md - Extension panel → Extension broker: enables MCP
packages/extension/mcp/broker/service-worker.ts - Extension broker → Hub connection: uses hub client
packages/extension/mcp/broker/service-worker.ts - Hub connection → MCP server hub: connects to hub
- MCP server hub → Local coding agent: serves MCP
README.md - Local coding agent → MCP tool routing: invokes tools
README.md - MCP tool routing → Canvas tools: dispatches canvas
- MCP tool routing → Code inspection: dispatches code
- MCP tool routing → Design system tools: dispatches design system
- Figma in Chrome → Canvas tools: supplies design data
README.md - Canvas tools → Canvas schemas: uses schemas
packages/shared/src/mcp/canvas.ts - Canvas schemas → Task protocol: uses task schemas
packages/shared/src/mcp/canvas.ts - Extension broker → Design task lifecycle: coordinates tasks
packages/extension/mcp/broker/service-worker.ts - Design task lifecycle → Task persistence: persists tasks
packages/mcp-server/src/design-tasks.ts - Task status UI → Extension panel: renders task status
- Extension broker → Task status UI: sends task state
- MCP server hub → Codex feedback: routes feedback
- Codex feedback → Codex queue: uses queue
packages/mcp-server/src/agent-clients/codex-feedback.ts - Codex feedback → Local coding agent: delivers comments
README.md - Code inspection → Code generation: generates code
- Extension panel → Plugin sandbox: runs plugins
- Agent installation → Local coding agent: configures client
README.md - Designer → Product website: learns product