# jadewuu/design-bridge architecture

> Architecture diagram of the GitHub repository jadewuu/design-bridge, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/jadewuu/design-bridge
- Repository: https://github.com/jadewuu/design-bridge

## Overview

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: [`packages/extension/mcp/broker/service-worker.ts`](https://github.com/jadewuu/design-bridge/blob/main/packages/extension/mcp/broker/service-worker.ts) (Extension broker), [`packages/mcp-server/src/tools.ts`](https://github.com/jadewuu/design-bridge/blob/main/packages/mcp-server/src/tools.ts) (MCP tool routing), [`packages/extension/entrypoints/ui/App.vue`](https://github.com/jadewuu/design-bridge/blob/main/packages/extension/entrypoints/ui/App.vue) (Extension panel), [`packages/mcp-server/src/hub.ts`](https://github.com/jadewuu/design-bridge/blob/main/packages/mcp-server/src/hub.ts) (MCP server hub)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_extension["Chrome Extension"]
  node_extension_ui["Extension panel<br/>[App.vue]"]
  node_task_status["Task status UI"]
  node_canvas_tools["Canvas tools"]
  node_code_tools["Code inspection"]
  node_design_system["Design system tools<br/>[design-system.ts]"]
  node_codegen["Code generation<br/>[worker.ts]"]
  node_plugin_sandbox["Plugin sandbox<br/>[client.ts]"]
end

subgraph group_mcp["MCP Bridge"]
  node_broker_worker["Extension broker<br/>[service-worker.ts]"]
  node_hub_client["Hub connection<br/>[hub-client.ts]"]
  node_server_hub["MCP server hub<br/>[hub.ts]"]
  node_server_tools["MCP tool routing<br/>[tools.ts]"]
  node_design_tasks["Design task lifecycle<br/>[design-tasks.ts]"]
  node_task_store[("Task persistence")]
end

subgraph group_agent["Agent Integration"]
  node_agent_feedback["Codex feedback<br/>[codex-feedback.ts]"]
  node_agent_queue["Codex queue<br/>[codex-queue.ts]"]
  node_agent_installer["Agent installation<br/>[install.ts]"]
end

subgraph group_shared["Shared Protocol"]
  node_shared_canvas["Canvas schemas<br/>[canvas.ts]"]
  node_shared_tasks["Task protocol<br/>[design-task.ts]"]
end

subgraph group_web["Product Website"]
  node_website["Product website<br/>[App.vue]"]
end

node_designer(("Designer"))
node_figma["Figma in Chrome"]
node_coding_agent(("Local coding agent"))

node_designer -->|"selects design"| node_figma
node_designer -->|"requests implementation"| node_coding_agent
node_figma -->|"provides selection"| node_extension_ui
node_extension_ui -->|"enables MCP"| node_broker_worker
node_broker_worker -->|"uses hub client"| node_hub_client
node_hub_client -.->|"connects to hub"| node_server_hub
node_server_hub -->|"serves MCP"| node_coding_agent
node_coding_agent -->|"invokes tools"| node_server_tools
node_server_tools -.->|"dispatches canvas"| node_canvas_tools
node_server_tools -.->|"dispatches code"| node_code_tools
node_server_tools -.->|"dispatches design system"| node_design_system
node_figma -->|"supplies design data"| node_canvas_tools
node_canvas_tools -->|"uses schemas"| node_shared_canvas
node_shared_canvas -->|"uses task schemas"| node_shared_tasks
node_broker_worker -->|"coordinates tasks"| node_design_tasks
node_design_tasks -.->|"persists tasks"| node_task_store
node_task_status -.->|"renders task status"| node_extension_ui
node_broker_worker -.->|"sends task state"| node_task_status
node_server_hub -.->|"routes feedback"| node_agent_feedback
node_agent_feedback -->|"uses queue"| node_agent_queue
node_agent_feedback -->|"delivers comments"| node_coding_agent
node_code_tools -.->|"generates code"| node_codegen
node_extension_ui -.->|"runs plugins"| node_plugin_sandbox
node_agent_installer -->|"configures client"| node_coding_agent
node_designer -.->|"learns product"| node_website

click node_extension_ui "https://github.com/jadewuu/design-bridge/blob/main/packages/extension/entrypoints/ui/App.vue"
click node_task_status "https://github.com/jadewuu/design-bridge/blob/main/packages/extension/components/DesignTaskStatus.vue"
click node_canvas_tools "https://github.com/jadewuu/design-bridge/tree/main/packages/extension/mcp/tools/canvas"
click node_code_tools "https://github.com/jadewuu/design-bridge/tree/main/packages/extension/mcp/tools/code"
click node_design_system "https://github.com/jadewuu/design-bridge/blob/main/packages/extension/mcp/tools/design-system.ts"
click node_codegen "https://github.com/jadewuu/design-bridge/blob/main/packages/extension/codegen/worker.ts"
click node_plugin_sandbox "https://github.com/jadewuu/design-bridge/blob/main/packages/extension/plugin-sandbox/client.ts"
click node_broker_worker "https://github.com/jadewuu/design-bridge/blob/main/packages/extension/mcp/broker/service-worker.ts"
click node_hub_client "https://github.com/jadewuu/design-bridge/blob/main/packages/extension/mcp/broker/hub-client.ts"
click node_server_hub "https://github.com/jadewuu/design-bridge/blob/main/packages/mcp-server/src/hub.ts"
click node_server_tools "https://github.com/jadewuu/design-bridge/blob/main/packages/mcp-server/src/tools.ts"
click node_design_tasks "https://github.com/jadewuu/design-bridge/blob/main/packages/mcp-server/src/design-tasks.ts"
click node_task_store "https://github.com/jadewuu/design-bridge/blob/main/packages/mcp-server/src/design-task-store.ts"
click node_shared_canvas "https://github.com/jadewuu/design-bridge/blob/main/packages/shared/src/mcp/canvas.ts"
click node_shared_tasks "https://github.com/jadewuu/design-bridge/blob/main/packages/shared/src/mcp/design-task.ts"
click node_agent_feedback "https://github.com/jadewuu/design-bridge/blob/main/packages/mcp-server/src/agent-clients/codex-feedback.ts"
click node_agent_queue "https://github.com/jadewuu/design-bridge/blob/main/packages/mcp-server/src/agent-clients/codex-queue.ts"
click node_agent_installer "https://github.com/jadewuu/design-bridge/blob/main/packages/shared/src/mcp/install.ts"
click node_website "https://github.com/jadewuu/design-bridge/blob/main/packages/site/src/App.vue"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_extension_ui,node_task_status,node_canvas_tools,node_code_tools,node_design_system,node_codegen,node_plugin_sandbox toneBlue
class node_broker_worker,node_hub_client,node_server_hub,node_server_tools,node_design_tasks,node_task_store toneAmber
class node_agent_feedback,node_agent_queue,node_agent_installer toneMint
class node_shared_canvas,node_shared_tasks toneRose
class node_website,node_designer,node_figma,node_coding_agent toneIndigo
```

## Components

### Chrome Extension

- [Extension panel](https://github.com/jadewuu/design-bridge/blob/main/packages/extension/entrypoints/ui/App.vue): `packages/extension/entrypoints/ui/App.vue`
- [Task status UI](https://github.com/jadewuu/design-bridge/blob/main/packages/extension/components/DesignTaskStatus.vue): `packages/extension/components/DesignTaskStatus.vue`
- [Canvas tools](https://github.com/jadewuu/design-bridge/tree/main/packages/extension/mcp/tools/canvas): `packages/extension/mcp/tools/canvas`
- [Code inspection](https://github.com/jadewuu/design-bridge/tree/main/packages/extension/mcp/tools/code): `packages/extension/mcp/tools/code`
- [Design system tools](https://github.com/jadewuu/design-bridge/blob/main/packages/extension/mcp/tools/design-system.ts): `packages/extension/mcp/tools/design-system.ts`
- [Code generation](https://github.com/jadewuu/design-bridge/blob/main/packages/extension/codegen/worker.ts): `packages/extension/codegen/worker.ts`
- [Plugin sandbox](https://github.com/jadewuu/design-bridge/blob/main/packages/extension/plugin-sandbox/client.ts): `packages/extension/plugin-sandbox/client.ts`

### MCP Bridge

- [Extension broker](https://github.com/jadewuu/design-bridge/blob/main/packages/extension/mcp/broker/service-worker.ts): `packages/extension/mcp/broker/service-worker.ts`
- [Hub connection](https://github.com/jadewuu/design-bridge/blob/main/packages/extension/mcp/broker/hub-client.ts): `packages/extension/mcp/broker/hub-client.ts`
- [MCP server hub](https://github.com/jadewuu/design-bridge/blob/main/packages/mcp-server/src/hub.ts): `packages/mcp-server/src/hub.ts`
- [MCP tool routing](https://github.com/jadewuu/design-bridge/blob/main/packages/mcp-server/src/tools.ts): `packages/mcp-server/src/tools.ts`
- [Design task lifecycle](https://github.com/jadewuu/design-bridge/blob/main/packages/mcp-server/src/design-tasks.ts): `packages/mcp-server/src/design-tasks.ts`
- [Task persistence](https://github.com/jadewuu/design-bridge/blob/main/packages/mcp-server/src/design-task-store.ts): `packages/mcp-server/src/design-task-store.ts`

### Agent Integration

- [Codex feedback](https://github.com/jadewuu/design-bridge/blob/main/packages/mcp-server/src/agent-clients/codex-feedback.ts): `packages/mcp-server/src/agent-clients/codex-feedback.ts`
- [Codex queue](https://github.com/jadewuu/design-bridge/blob/main/packages/mcp-server/src/agent-clients/codex-queue.ts): `packages/mcp-server/src/agent-clients/codex-queue.ts`
- [Agent installation](https://github.com/jadewuu/design-bridge/blob/main/packages/shared/src/mcp/install.ts): `packages/shared/src/mcp/install.ts`

### Shared Protocol

- [Canvas schemas](https://github.com/jadewuu/design-bridge/blob/main/packages/shared/src/mcp/canvas.ts): `packages/shared/src/mcp/canvas.ts`
- [Task protocol](https://github.com/jadewuu/design-bridge/blob/main/packages/shared/src/mcp/design-task.ts): `packages/shared/src/mcp/design-task.ts`

### Product Website

- [Product website](https://github.com/jadewuu/design-bridge/blob/main/packages/site/src/App.vue): `packages/site/src/App.vue`

### Other components

- **Designer**
- **Figma in Chrome**
- **Local coding agent**

## Connections

- Designer → Figma in Chrome: selects design (evidence: `README.md`)
- Designer → Local coding agent: requests implementation (evidence: `README.md`)
- Figma in Chrome → Extension panel: provides selection (evidence: `README.md`)
- Extension panel → Extension broker: enables MCP (evidence: `packages/extension/mcp/broker/service-worker.ts`)
- Extension broker → Hub connection: uses hub client (evidence: `packages/extension/mcp/broker/service-worker.ts`)
- Hub connection → MCP server hub: connects to hub
- MCP server hub → Local coding agent: serves MCP (evidence: `README.md`)
- Local coding agent → MCP tool routing: invokes tools (evidence: `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 (evidence: `README.md`)
- Canvas tools → Canvas schemas: uses schemas (evidence: `packages/shared/src/mcp/canvas.ts`)
- Canvas schemas → Task protocol: uses task schemas (evidence: `packages/shared/src/mcp/canvas.ts`)
- Extension broker → Design task lifecycle: coordinates tasks (evidence: `packages/extension/mcp/broker/service-worker.ts`)
- Design task lifecycle → Task persistence: persists tasks (evidence: `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 (evidence: `packages/mcp-server/src/agent-clients/codex-feedback.ts`)
- Codex feedback → Local coding agent: delivers comments (evidence: `README.md`)
- Code inspection → Code generation: generates code
- Extension panel → Plugin sandbox: runs plugins
- Agent installation → Local coding agent: configures client (evidence: `README.md`)
- Designer → Product website: learns product