Abrir no vscode.dev Instalar

UI Designer on the web

UI Designer runs in VS Code for the Web: open a repository on vscode.dev or github.dev and edit its .design files in the browser.

Esta página está em inglês; a tradução está a caminho.

The design editor in vscode.dev: draw, save, commit.
  • Open the repository on vscode.dev, or press . on GitHub
  • Install UI Designer from the Extensions view
  • Open a .design file
  • Edit, save with CtrlS, and commit from Source Control

What works and what does not#

The browser has no Node.js, no terminal and no local disk, so part of the extension stays on the desktop.

Works in the browser Desktop only
The design editor, the panels (as VS Code views or in the page), undo and history The ud command, its live bridge and ud mcp
Drawing, text, components, variables, styles, libraries in the workspace The AI panel, quick actions and the other Claude Code features
Prototyping and the preview panel Preview in browser and Serve locally
Export to PNG, JPG, WebP, SVG and PDF, written into the repository Figma import, HTML import, page capture, compare with a running page
Sketch and Penpot import from files in the repository Prototype site export, Generate code, Compare with revision, Export tokens
use_figma scripts from the editor Run Script from a workspace file, Install Claude Code skills
Comments, Inspect and lint Git authors and revisions (the author is ud.author.name, else “Unknown”)
Sign-in and licence keys The licence ticket that ud reads

The desktop-only commands are hidden in the browser; run from a keybinding or another extension, they say they need VS Code on the desktop.

Fonts#

There are no operating-system fonts to read in a browser. The editor offers the bundled fonts (Inter, Roboto, Noto Sans, Source Serif, JetBrains Mono), the fonts in the repository’s ud.fonts.folders and in each design’s assets folder, and the font files listed in ud.fonts.web:

json
{
  "ud.fonts.web": ["https://example.com/fonts/Brand-Regular.ttf", "https://example.com/fonts/Brand-Bold.ttf"]
}

The files are .ttf or .otf, and their server must allow cross-origin requests. The setting is ignored on the desktop, which reads the system’s fonts.

Saving#

Saving writes through the repository’s file system: on github.dev and vscode.dev, the change shows in Source Control, and you commit it as usual. Set ud.author.name so your changes are not signed “Unknown”. PDFs exported in the browser are larger, because their streams are not compressed.

Editar esta página