Open in vscode.dev Install

Installing

Install UI Designer from the Marketplace, a VSIX file or in vscode.dev, and see what the first run sets up: the trial, the ud command and, when you ask, the Claude Code skills.

From the Marketplace#

  1. Open the Extensions view (CtrlShiftX).
  2. Search for UI Designer (publisher SoftForge, id SoftForge.softforge-ui-designer).
  3. Click Install.
  4. Open any *.design file, or run UI Designer: New Design from the Command Palette.

From a terminal, the code command does the same:

Install from the Marketplace
bash
code --install-extension SoftForge.softforge-ui-designer
code --list-extensions --show-versions | grep -i ui-designer

From a VSIX file#

A .vsix file installs without the Marketplace, for example on a machine without internet access: run Extensions: Install from VSIX… in the Command Palette and pick the file, or:

Install from a VSIX file
bash
code --install-extension softforge-ui-designer-1.2.0.vsix
ud version
ud where

ud version and ud where run in a new integrated terminal of VS Code, where the extension puts ud on the PATH (see below).

In vscode.dev and github.dev#

UI Designer in vscode.dev: the same editor, saving into the repository.
  • Open a repository on vscode.dev, or press . on a GitHub repository
  • Install UI Designer from the Extensions view
  • Open a .design file: it opens in the design editor
  • Save with CtrlS and commit from Source Control

The browser has no Node.js, no terminal and no local disk, so ud, the AI panel, the Figma and web page importers and a few exports stay on the desktop. The full list, and how fonts work there, is on UI Designer on the web.

The first run#

The first time UI Designer starts (when you open a design or run one of its commands), the 30-minute trial begins, with everything unlocked. The VS Code status bar shows UI Designer: Trial · 30 min, counting down, and turns into a warning for the last five minutes, when a notice offers the plans. After that the editor continues on the Free plan, which reads, inspects, comments and exports but does not edit; the status bar shows UI Designer: Free. Click the item for the Subscription menu: sign in, see the plans or enter a licence key. See Plans and licensing.

The ud command#

On the desktop the extension writes the ud command, a small script that runs the bundled command line with the runtime VS Code ships, so no Node.js installation is needed. It goes into the extension’s global storage, in a folder named bin:

System Folder
Linux ~/.config/Code/User/globalStorage/softforge.softforge-ui-designer/bin/
macOS ~/Library/Application Support/Code/User/globalStorage/softforge.softforge-ui-designer/bin/
Windows %APPDATA%\Code\User\globalStorage\softforge.softforge-ui-designer\bin\

The folder holds ud (POSIX shell), ud.cmd (Windows) and licence-ticket.json, which tells ud in a terminal which plan you have. (VS Code Insiders, VSCodium and other editors use their own folder instead of Code.) With the setting ud.cli.addToTerminalPath (on by default) every new integrated terminal has the folder on its PATH; nothing is changed in your shell profile. Outside VS Code, run node <extension folder>/dist/ud.js with Node.js 22.

When a design is open in the editor, ud edits it through the editor (ud.cli.liveEditing): its changes appear live and never overwrite yours. See Command line and agents.

The Claude Code skills#

Nothing is written into your repository until you ask. UI Designer: Let Claude Code Design in This Folder copies five skills into <workspace>/.claude/skills/: ui-designer, ui-designer-design-system, ui-designer-from-code, ui-designer-review and ui-designer-to-code. From a terminal, ud skill --install does the same and adds a .ud-skill.json manifest to each skill folder, so a later install keeps your local edits; ud skill --install --global installs them into ~/.claude/skills/ for every project. ud mcp install adds the ui-designer MCP server to the workspace’s .mcp.json.

Languages#

UI Designer is available in English and Portuguese (Brazil) and follows VS Code’s display language: run Configure Display Language, pick pt-br (VS Code offers to install the Portuguese (Brazil) language pack) and restart VS Code. The design editor, its panels, menus, dialogs and messages, the notifications, Quick Picks and status bar items, the command titles and the setting descriptions all follow it. A few things stay in English on purpose: the ud command line and ud mcp (machine interfaces), the names UI Designer gives new layers and pages and the undo labels in History (they are saved in the .design file, which your team shares), and the output channels’ logs. Any other display language shows English.

Settings#

All settings are under UI Designer in the Settings editor (ud.*). The ones most people change:

Setting What it does
ud.author.name The name that signs your changes. Empty uses your git user name.
ud.cli.addToTerminalPath Puts ud on the PATH of new integrated terminals (default on).
ud.cli.liveEditing Lets ud edit open designs through the editor (default on).
ud.layout.panels vscode (panels as VS Code views, the default) or editor (inside the editor).
ud.fonts.folders Workspace folders searched for fonts (default fonts, assets/fonts).
ud.ai.enabled Turns every AI surface on or off. ud and ud mcp stay.
ud.tokens.exportOnSave Exports the variables as tokens on every save, e.g. {"format": "css", "out": "src/styles/tokens.css"}.

Next: A 5-minute tour.

Edit this page