# memi-design/memi architecture

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

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

## Overview

Memi is a design-intelligence CLI and agent companion: it audits a frontend repository, returns evidence-anchored findings, and provides context for an agent to make and verify changes. The sampled diagnosis engine supports the scan, app-graph construction, and artifact-writing links shown below. Other major README capabilities—frontend briefs, MCP access, Figma evidence, Studio, and research—are represented at their documented subsystem paths; their internal wiring is not inferred from unsampled source.

Main entry points: [`src/app-quality/engine.ts`](https://github.com/memi-design/memi/blob/main/src/app-quality/engine.ts) (Quality Engine), [`src/mcp/server.ts`](https://github.com/memi-design/memi/blob/main/src/mcp/server.ts) (MCP Server), [`src/research/engine.ts`](https://github.com/memi-design/memi/blob/main/src/research/engine.ts) (Research Engine), [`src/figma/bridge.ts`](https://github.com/memi-design/memi/blob/main/src/figma/bridge.ts) (Figma Bridge)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["CLI and Agent Entry"]
  node_cli["CLI<br/>[index.ts]"]
  node_diagnose["Diagnose Command<br/>[diagnose.ts]"]
end

subgraph group_quality["Frontend Quality"]
  node_quality_engine["Quality Engine<br/>[engine.ts]"]
  node_source_scan["Source Scanner<br/>[source-scanner.ts]"]
  node_app_graph["App Graph<br/>[app-graph.ts]"]
  node_quality_policy["Quality Policy<br/>[policy.ts]"]
  node_diagnosis_artifacts["Diagnosis Artifacts<br/>[persistence.ts]"]
  node_quality_history[("Score History<br/>[history.ts]")]
end

subgraph group_agent["Agent Interfaces"]
  node_frontend_brief["Frontend Brief"]
  node_mcp_server["MCP Server<br/>[server.ts]"]
  node_mcp_frontend["Frontend Tools<br/>[frontend-tools.ts]"]
  node_mcp_read["Read Tools<br/>[read-tools.ts]"]
  node_studio_server["Studio Runtime<br/>[server.ts]"]
end

subgraph group_design["Design Integrations"]
  node_figma_controller["Figma Controller"]
  node_figma_bridge["Figma Bridge<br/>[bridge.ts]"]
  node_plugin_ui["Figma Plugin UI<br/>[main.ts]"]
  node_design_system["Design System<br/>[core.ts]"]
end

subgraph group_research["Research"]
  node_research_engine["Research Engine<br/>[engine.ts]"]
  node_research_store[("Research Store")]
  node_research_reports["Research Reports<br/>[synthesis.ts]"]
end

node_engineer(("Engineer / Agent"))

node_engineer -->|"runs"| node_cli
node_cli -->|"dispatches"| node_diagnose
node_diagnose -->|"invokes"| node_quality_engine
node_quality_engine -->|"scans sources"| node_source_scan
node_quality_engine -->|"builds graph"| node_app_graph
node_quality_engine -->|"applies policy"| node_quality_policy
node_quality_engine -->|"writes findings"| node_diagnosis_artifacts
node_quality_engine -->|"appends history"| node_quality_history
node_engineer -->|"requests context"| node_frontend_brief
node_engineer -->|"connects via stdio"| node_mcp_server
node_mcp_server -->|"registers"| node_mcp_frontend
node_mcp_server -->|"registers"| node_mcp_read
node_engineer -->|"uses Studio"| node_studio_server
node_studio_server -->|"handles actions"| node_figma_controller
node_figma_controller -->|"calls"| node_figma_bridge
node_plugin_ui -.->|"bridges messages"| node_figma_bridge
node_figma_bridge -->|"extracts design data"| node_design_system
node_engineer -->|"runs research"| node_research_engine
node_research_engine -->|"reads and writes"| node_research_store
node_research_engine -->|"generates reports"| node_research_reports

click node_cli "https://github.com/memi-design/memi/blob/main/src/index.ts"
click node_diagnose "https://github.com/memi-design/memi/blob/main/src/commands/diagnose.ts"
click node_quality_engine "https://github.com/memi-design/memi/blob/main/src/app-quality/engine.ts"
click node_source_scan "https://github.com/memi-design/memi/blob/main/src/utils/source-scanner.ts"
click node_app_graph "https://github.com/memi-design/memi/blob/main/src/app-quality/app-graph.ts"
click node_quality_policy "https://github.com/memi-design/memi/blob/main/src/app-quality/policy.ts"
click node_diagnosis_artifacts "https://github.com/memi-design/memi/blob/main/src/app-quality/persistence.ts"
click node_quality_history "https://github.com/memi-design/memi/blob/main/src/app-quality/history.ts"
click node_frontend_brief "https://github.com/memi-design/memi/blob/main/src/agents/design-agent-brief.ts"
click node_mcp_server "https://github.com/memi-design/memi/blob/main/src/mcp/server.ts"
click node_mcp_frontend "https://github.com/memi-design/memi/blob/main/src/mcp/frontend-tools.ts"
click node_mcp_read "https://github.com/memi-design/memi/blob/main/src/mcp/read-tools.ts"
click node_studio_server "https://github.com/memi-design/memi/blob/main/src/studio/server.ts"
click node_figma_controller "https://github.com/memi-design/memi/blob/main/src/studio/figma-controller.ts"
click node_figma_bridge "https://github.com/memi-design/memi/blob/main/src/figma/bridge.ts"
click node_plugin_ui "https://github.com/memi-design/memi/blob/main/src/plugin/ui/main.ts"
click node_design_system "https://github.com/memi-design/memi/blob/main/src/engine/core.ts"
click node_research_engine "https://github.com/memi-design/memi/blob/main/src/research/engine.ts"
click node_research_reports "https://github.com/memi-design/memi/blob/main/src/research/synthesis.ts"

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_cli,node_diagnose toneBlue
class node_quality_engine,node_source_scan,node_app_graph,node_quality_policy,node_diagnosis_artifacts,node_quality_history toneAmber
class node_frontend_brief,node_mcp_server,node_mcp_frontend,node_mcp_read,node_studio_server toneMint
class node_figma_controller,node_figma_bridge,node_plugin_ui,node_design_system toneRose
class node_research_engine,node_research_store,node_research_reports,node_engineer toneIndigo
```

## Components

### CLI and Agent Entry

- [CLI](https://github.com/memi-design/memi/blob/main/src/index.ts): `src/index.ts`
- [Diagnose Command](https://github.com/memi-design/memi/blob/main/src/commands/diagnose.ts): `src/commands/diagnose.ts`

### Frontend Quality

- [Quality Engine](https://github.com/memi-design/memi/blob/main/src/app-quality/engine.ts): `src/app-quality/engine.ts`
- [Source Scanner](https://github.com/memi-design/memi/blob/main/src/utils/source-scanner.ts): `src/utils/source-scanner.ts`
- [App Graph](https://github.com/memi-design/memi/blob/main/src/app-quality/app-graph.ts): `src/app-quality/app-graph.ts`
- [Quality Policy](https://github.com/memi-design/memi/blob/main/src/app-quality/policy.ts): `src/app-quality/policy.ts`
- [Diagnosis Artifacts](https://github.com/memi-design/memi/blob/main/src/app-quality/persistence.ts): `src/app-quality/persistence.ts`
- [Score History](https://github.com/memi-design/memi/blob/main/src/app-quality/history.ts): `src/app-quality/history.ts`

### Agent Interfaces

- [Frontend Brief](https://github.com/memi-design/memi/blob/main/src/agents/design-agent-brief.ts): `src/agents/design-agent-brief.ts`
- [MCP Server](https://github.com/memi-design/memi/blob/main/src/mcp/server.ts): `src/mcp/server.ts`
- [Frontend Tools](https://github.com/memi-design/memi/blob/main/src/mcp/frontend-tools.ts): `src/mcp/frontend-tools.ts`
- [Read Tools](https://github.com/memi-design/memi/blob/main/src/mcp/read-tools.ts): `src/mcp/read-tools.ts`
- [Studio Runtime](https://github.com/memi-design/memi/blob/main/src/studio/server.ts): `src/studio/server.ts`

### Design Integrations

- [Figma Controller](https://github.com/memi-design/memi/blob/main/src/studio/figma-controller.ts): `src/studio/figma-controller.ts`
- [Figma Bridge](https://github.com/memi-design/memi/blob/main/src/figma/bridge.ts): `src/figma/bridge.ts`
- [Figma Plugin UI](https://github.com/memi-design/memi/blob/main/src/plugin/ui/main.ts): `src/plugin/ui/main.ts`
- [Design System](https://github.com/memi-design/memi/blob/main/src/engine/core.ts): `src/engine/core.ts`

### Research

- [Research Engine](https://github.com/memi-design/memi/blob/main/src/research/engine.ts): `src/research/engine.ts`
- **Research Store**
- [Research Reports](https://github.com/memi-design/memi/blob/main/src/research/synthesis.ts): `src/research/synthesis.ts`

### Other components

- **Engineer / Agent**

## Connections

- Engineer / Agent → CLI: runs
- CLI → Diagnose Command: dispatches
- Diagnose Command → Quality Engine: invokes
- Quality Engine → Source Scanner: scans sources
- Quality Engine → App Graph: builds graph
- Quality Engine → Quality Policy: applies policy
- Quality Engine → Diagnosis Artifacts: writes findings
- Quality Engine → Score History: appends history
- Engineer / Agent → Frontend Brief: requests context
- Engineer / Agent → MCP Server: connects via stdio
- MCP Server → Frontend Tools: registers
- MCP Server → Read Tools: registers
- Engineer / Agent → Studio Runtime: uses Studio
- Studio Runtime → Figma Controller: handles actions
- Figma Controller → Figma Bridge: calls
- Figma Plugin UI → Figma Bridge: bridges messages
- Figma Bridge → Design System: extracts design data
- Engineer / Agent → Research Engine: runs research
- Research Engine → Research Store: reads and writes
- Research Engine → Research Reports: generates reports