Open in vscode.dev Install

SoftForge UI Designer — Architecture

Layers and source tree, the command registry and the one write path, document core, layout and text engines, rendering, host and webview.
Product SoftForge UI Designer (SoftForge.softforge-ui-designer)
Document ARC-001
Status Draft; review decisions applied (D3, D5, D7, D15–D18, D20–D22, D24)
Date 2026-10-10
Owner Arthur de Araújo Farias
Specification SRS-001 (#1) · FMT-001 file format (#2) · CLI-001 the ud command (#3) · AI-001 agents and skills (#4) · UI-001 editor design (#6)

UI Designer is one document per .design file. Every way of changing it (the canvas, the panels, the Command Palette, ud, a use_figma script, an MCP client, the AI panel) runs a command from one registry against one document core, so a change looks and behaves the same whoever made it, and every change is a signed event in the file. This document says how the code is cut into layers, what each layer owns, where it runs, and why.

It is written for the engineers who implement and review the extension. Requirement IDs refer to SRS-001. Event names and file layout are illustrative here; FMT-001 is authoritative for anything written to disk.

text
      VS Code window                  a browser (npm run dev)            a terminal / Claude Code
┌──────────────────────────┐      ┌──────────────────────────┐      ┌──────────────────────────────┐
│ src/host/vscode          │      │ dev/                     │      │ src/cli   ud <tool|cmd|verb> │
│ custom editor, commands, │      │ HTTP + event stream,     │      │ src/mcp   ud mcp (stdio)     │
│ LM tools, licensing, AI  │      │ stands in for VS Code    │      │ src/headless  file + lock    │
└────────────┬─────────────┘      └────────────┬─────────────┘      └───────┬──────────────┬───────┘
             │ Workbench, buffer               │                            │ no editor    │ editor open
             ▼                                 ▼                            ▼              ▼
┌────────────────────────────────────────────────────────────┐      (in process)    src/bridge
│ src/host/controller  DesignController: one per document.   │◄───────────────────── socket + token
│ command queue, undo groups, merge of external events,      │
│ proposals, script worker, deltas to every webview          │
└────────────┬──────────────────────────────┬────────────────┘
             ▼                              ▼ events (delta)
┌────────────────────────────┐      ┌───────────────────────────────────────────────┐
│ src/commands  registry     │      │ media/  webview: custom elements, <canvas>    │
│ src/plugin-api  figma glob.│      │ media/lib/  the same core, text, layout,      │
│ src/core  model, events    │      │ render and commands compiled to ESM (replica) │
│ src/layout · src/text      │      └───────────────────────────────────────────────┘
│ src/render                 │
└────────────────────────────┘

Generated from issue #5 of planning.pb by scripts/docs-specs.mjs; the board is the source of truth.

Status. Done 2026-10-10. ARC-001 complete with D3, D5, D7, D15–D18, D20–D22, D24 applied; the document now lives in the comments of this issue.