2. Surfaces

An agent reaches a design through one of four surfaces. All four end in the same registry commands and the same signed events.

Surface	Who drives	Transport	Skills	Writes land	Milestone
Claude Code in a terminal	the user’s Claude Code session	ud in Bash, and/or ud mcp tools	installed in .claude/skills/ (§3)	live editor through the bridge, else the file under a lock (CMD-27)	0.1
ud mcp for any MCP client	Claude Code, Claude Desktop, Cursor, any MCP client	stdio MCP server ui-designer (§5)	as MCP resources skill://ui-designer/…; Figma’s skills also apply	same as above; with ud mcp install --proposal auto, a proposal per MCP session accepted in the panel (§6.5)	0.1
The AI panel	the extension, running claude --print	ud mcp attached with --mcp-config (§6)	the same installed skills, or the bundled copy	a proposal (scratch branch) of the open document, applied on Accept	0.7
VS Code chat (Copilot agent mode, others)	the user’s chat agent	vscode.lm tools registered by the extension (§10)	none; tool descriptions carry the essentials	the open document, one undo step per tool call	0.7

2.1 Claude Code in a terminal#

The user runs claude in the integrated terminal with a .design file open beside it. The extension puts ud on the PATH of its terminals (as pb and uml do). Claude reads the ui-designer skill, calls ud commands in Bash or the ud mcp tools, and the user watches nodes appear: changed nodes flash with the actor’s colour and name, and the status bar shows the running agent with a Stop button (UI-7). The same stop is the command “UI Designer: Stop Agent”, default key Ctrl+Shift+Escape (App. B of the SRS); it works from the canvas, the panel and the terminal alike, and stops whichever agent run is active (§6.6).

Bash and MCP are equivalent. MCP is preferred when it is configured, because results come back as structured content and screenshots as images; Bash is the fallback and is handy for files (ud use_figma --code-file build.js, ud render … --out shot.png).

2.2 ud mcp for any MCP client#

ud mcp is a stdio MCP server named ui-designer (CMD-7). It speaks the Figma MCP tool interface for local .design files, so a client configured for Figma’s server only needs a second server entry. §5 has the detail.

2.3 The AI panel#

The editor’s AI panel (AI-4) is a chat beside the canvas. It runs Claude Code non-interactively with ud mcp attached and an allowlist of tools and commands, streams its progress, and shows its changes as a proposal to accept or discard. The panel is not available in a VS Code Restricted Mode (untrusted) workspace. §6 has the detail.

2.4 VS Code language model tools#

The extension registers the main Figma-named tools with vscode.lm.registerTool so Copilot agent mode and other chat agents can read and change the open design (AI-12). The same vscode.lm API is an alternative backend for the AI panel when Claude Code is not installed. §10 has the detail.