2. Overall description

2.1 Product perspective#

UI Designer is the fourth product of the SoftForge VS Code family and follows the same pattern as its siblings:

Product	File	CLI	What it designs
Project Board	.pb	pb	plans, requirements, issues
Software Board	.uml	uml	software architecture in UML
Control Board	.control.dashboard	—	telemetry dashboards
UI Designer	.design	ud	user interfaces

All of them open a single JSON file in a custom editor, keep history as an append-only event list that git merges without conflicts, run their webview under the same page contract, let Claude Code edit the file through a CLI while the editor is open, and are sold under the same subscription model.

What sets UI Designer apart from Figma:

1. The design is a file in the repository. No cloud, no export step: the design is versioned, branched, reviewed in pull requests and found by grep, next to the code that implements it.
2. Agents are first-class designers. Everything a person can do in the editor, an agent can do through ud, see through ud render, and undo through the same history. ud speaks the Figma MCP interface, so agents and skills that design in Figma design here without changes.
3. Design and code meet in one editor. Components map to code components of the workspace, tokens export to the codebase, and frames generate code where it will live.

2.2 Product functions#

• Create and edit .design files in a canvas editor with layers, assets and properties panels.
• Draw and style vector UI: shapes, pen paths, boolean operations, text, images, fills, strokes, effects.
• Build responsive layouts with constraints, auto layout and layout guides.
• Build and consume design systems: components, variants, properties, styles, variables and modes, libraries.
• Prototype flows and play them in a preview panel.
• Inspect designs and hand them to code: measurements, CSS and code snippets, tokens, assets, code generation.
• Drive all of the above from a shell with ud, from Claude Code skills, from MCP clients (with the Figma MCP tool names) and from VS Code chat agents.
• Import designs from SVG, images, HTML and Figma; export images and documents.
• Keep history, named versions, branches (through git) and comments in the file.

2.3 User classes#

Class	Needs
Product designer	Figma-grade drawing, layout, components and prototyping without leaving the repository.
Front-end developer	Read designs next to code, inspect, export assets and tokens, generate starter code, keep design and code in sync.
AI agent (Claude Code)	A complete, scriptable, well-documented command surface; a compact text form of designs; rendered images to check its work; safe, reviewable, undoable edits.
Design-system maintainer	Libraries, variables with modes, component properties, usage reports, token export and lint rules.
Reviewer	Visual diffs between versions and branches, comments, read-only access on the Free plan.

2.4 Operating environment#

VS Code Desktop 1.108 or newer, and API-compatible forks (VSCodium, Cursor, Windsurf), on Windows, macOS and Linux. The CLI runs on Node.js 22 or newer (the Node that ships with VS Code is used when available; Appendix D, issue 6). The web extension host (vscode.dev) is a Could for 1.x (PLT-10).

2.5 Design and implementation constraints#

• TypeScript on the host, plain ES modules and custom elements in the webview, per the page contract (no framework, no bundler, no stylesheets). The “no bundler” rule applies to the webview only: the CLI and the extension host may be bundled with esbuild (ARC-001 ADR) so that ud starts within the CMD-31 budget.
• No native Node modules. WebAssembly is allowed (text shaping, raster export, the QuickJS sandbox for use_figma).
• Strict Content Security Policy: no remote scripts, styles or fonts in the webview.
• One write path: every change is a command from the registry, applied by the document core (ARC-001 §3).
• The same document core runs on the host, in the CLI and in the webview, so geometry is identical everywhere.

2.6 Assumptions and dependencies#

• Claude Code is installed and signed in for AI features; nothing else requires it.
• Fonts are available as files: bundled fonts, a workspace fonts folder, or the operating system’s fonts.
• git is used for history across machines; the extension does not require it.