Open in vscode.dev Install

Command line and agents

ud reaches every command of the editor and speaks the Figma MCP tools, so Claude Code, other agents and your scripts design the same file, live in the open editor.

ud — tour
bash
ud new tour --template web
ud where tour.design
ud tree tour.design --depth 2
ud run node.create tour.design --type RECTANGLE --width 160 --height 96
ud render tour.design --out tour.png

ud basics#

A word after ud is a verb, then a Figma MCP tool, then a registry command id (ud node.create is ud run node.create). The same command definitions run behind the tool bar, the menus, the Command Palette and ud.

Command What it does
ud where [file] Which file a command would use, live (through the editor) or headless, the actor and the licence
ud tree [file] --depth 2 A compact indented layer tree
ud get_metadata [file] The layers of a page as Figma’s sparse XML
ud run <command> [file] --param value Any registry command; ud commands lists them, ud help <id> explains one
ud use_figma [file] --code-file script.js A Figma Plugin API script, as one transaction
ud render [file] --node n --out f.png PNG, JPG, WebP, SVG or PDF of a node, a page or a region
ud export [file] --format pdf Exports as PNG, JPG, WebP, SVG, PDF, UDX or design tokens

Every verb, tool and command with its parameters is in the ud command reference; exit codes: 0 ok, 1 failed, 2 usage, 3 conflict, 4 licence, 5 not found, 6 unsupported.

use_figma scripts#

use_figma runs JavaScript with a Figma Plugin API compatible figma global in a sandbox, as one transaction and one undo step: if the script throws, nothing is applied. A script written for Figma works on a .design file; the members of figma are listed in Plugin API coverage.

A Figma Plugin API script
bash
ud use_figma app.design --description "Add a card" --code 'const f = figma.createFrame(); f.name = "Card"; f.resize(342, 200); return f.id;'
ud use_figma app.design --description "Add a footer" --code-file footer.js
ud get_screenshot app.design --nodeId "Card" --out card.png

Scripts in .design-scripts/ also appear in Quick actions; UI Designer: Run Script… runs one from the editor.

The bridge to the open editor#

When a design is open in VS Code, ud edits it through the editor (ud.cli.liveEditing, on by default): its changes appear live, flashed in the agent’s colour with a pill at the top of the canvas, each call is one undo step signed with the agent’s name, and your edits and the agent’s never overwrite each other. When no editor has the file open, ud edits the file directly. --live and --no-live force one or the other; ud where says which applies.

The MCP server#

ud mcp runs a stdio MCP server named ui-designer with the same tools; ud mcp install writes it into the workspace’s .mcp.json, so Claude Code and other MCP clients find it.

ud mcp
bash
ud mcp install --dry-run
ud mcp install
ud help tools

The tools: use_figma, get_metadata, get_screenshot, get_design_context, get_variable_defs, search_design_system, get_libraries, get_motion_context, upload_assets, download_assets, create_new_file, whoami, get_figma_skill, the Code Connect tools (get_code_connect_map, add_code_connect_map, get_code_connect_suggestions, send_code_connect_mappings, get_context_for_code_connect, list_file_components_for_code_connect), generate_figma_design, and the native ud_run, ud_apply, ud_help, ud_tree, ud_render, ud_system, ud_prototype_run, ud_diff, ud_compare, ud_comments, ud_lint, ud_import_html, ud_import_figma and ud_capture. Figma tools UI Designer does not serve (FigJam, shaders, Weave) fail with exit code 6 and a hint.

Option Effect
--read-only Only tools that do not change the design
--allow a,b Only the listed tools
--proposal auto Changes go into a proposal you review in the editor instead of the design
--file f The design the server works on by default
--as name The name that signs its changes

The extension also registers language model tools, so agents in VS Code chat can read and change designs; their changes are signed Copilot or ud.ai.lm.actor.

Claude Code skills#

UI Designer: Let Claude Code Design in This Folder (or ud skill --install) copies five skills into <workspace>/.claude/skills/:

Skill For
ui-designer Any work on .design files through ud: creating, editing, inspecting or exporting
ui-designer-design-system Variables, modes, styles and components as reusable design-system assets
ui-designer-from-code Designs from existing code: a component, a route, a page
ui-designer-review Reviewing a frame, flow or page: consistency, accessibility, hierarchy, spacing
ui-designer-to-code Implementing a frame, screen or component as code in the workspace
Skills for Claude Code
bash
ud skill
ud skill --install --dry-run
ud skill --install

Then ask Claude Code in an integrated terminal, for example claude "Design a settings screen in app.design using our design system". It runs ud, looks at its own work with get_screenshot, and you watch the changes appear in the editor.

Agent safety#

  • Allowlist. Serve only what an agent needs: ud mcp --read-only, or ud mcp --allow get_metadata,get_screenshot,use_figma.
  • Proposals. ud mcp --proposal auto sends an agent’s changes into a proposal; you review it in the editor (Before, After, Split) and accept it as one undo step, or discard it. ud proposal list|review|accept|discard does the same from a terminal.
  • Stop. CtrlShiftEscape (UI Designer: Stop Agent) stops every agent editing the design at once; the status bar shows who is editing.
  • Signed changes. Every change carries its actor, so History and ud history show what each agent did, and Restore takes you back.
  • The licence. An agent’s edits need the trial or a paid plan like yours; refused edits exit with code 4.

Edit this page