User guide
From installing UI Designer to removing it: drawing, layout, components, prototyping, handoff, the AI panel, the ud command line and agents.
Esta página está em inglês; a tradução está a caminho.
UI Designer is a vector design editor for user interfaces that runs inside VS Code. A design is one .design file in your repository; you draw it in a canvas editor, and Claude Code or your own scripts change it through the ud command line, which reaches every command the editor has.
Every page starts with what you need, shows the feature in a short clip or a terminal recording with the steps or commands under it, and ends with a tip. Read them in this order:
- Installing — the Marketplace, a VSIX or vscode.dev; the trial, the
udcommand and the Claude Code skills. - A 5-minute tour — one clip per pillar: draw, components, prototype, code.
- Your first design — a new
.designfile, frames, shapes and text, saving. - Tools — every tool and its key, the canvas menu, selecting, vectors, zoom.
- Panels — the VS Code views, Layers drag and drop, the Design panel, History, Problems.
- Layout, components and variables — auto layout, components, styles, variables, libraries, tokens.
- Prototyping — interactions, overlays, flows, the player, headless runs.
- Handoff to code — Inspect, snippets, code generation, the code map, lint, comments, traces.
- The AI panel — Claude Code as the backend, proposals, quick actions, Stop.
- Importing — Figma, web pages, Sketch and Penpot.
- Plans and licensing — the trial, Free, Pro and Team, the Subscription menu.
- Keyboard and accessibility — every shortcut, F6 regions, screen readers, themes.
- Designing together — Live Share, multiplayer cursors, guests.
- Command line and agents —
ud, the live bridge,ud mcp, skills, agent safety. - UI Designer on the web — vscode.dev and github.dev.
- Troubleshooting — licence, fonts, PATH, the bridge, Chromium, logs.
- Uninstalling — free the seat, remove the shim and skills, uninstall, clean up.
The behaviour of every feature is specified in SRS-001 and the screens in UI-001.
- InstallingInstall 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.
- A 5-minute tourFour short clips and one terminal session: draw a screen, make it a component, click through it as a prototype, and turn it into code.
- Your first designCreate a .design file next to your code, draw frames, shapes and text, find your way around the editor, and save.
- ToolsThe tool bar holds every way to draw — move and scale, frames, shapes, the pen and pencil, text and comments — each with a single key; the canvas menu creates layers where you right-click.
- PanelsThe panels are VS Code views: Pages, Layers, Assets, History and Comments in the primary side bar, Design, Prototype, Inspect and Claude in the secondary side bar.
- Layout, components and variablesConstraints, auto layout and grid layout; components with variants and properties; styles, variables with modes and expressions, libraries and design tokens.
- PrototypingConnect frames with interactions, transitions and overlays, group them into flows, click through them in the player, and run them headless from the terminal.
- Handoff to codeInspect a design for its measurements and code, generate files into the workspace, map components to your code, lint, comment, compare versions and trace layers to requirements and models.
- The AI panelAsk Claude to design, change or review a design; it runs Claude Code on your machine, and its answer is a proposal you review on the canvas before you keep it.
- ImportingBring designs in from Figma, from a running web page, and from Sketch and Penpot files, each with a report of what was approximated.
- Plans and licensingThe 30-minute trial, the Free plan, Pro and Team; the Subscription menu, sign-in, licence keys and how long a plan works offline.
- Keyboard and accessibilityEvery keyboard shortcut, moving between the editor's regions with F6, screen readers, high contrast themes and reduced motion.
- Designing togetherEdit one design with other people at the same time through VS Code Live Share: pointers, selections and changes signed with each person's name.
- Command line and agentsud 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.
- UI Designer on the webUI 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.
- TroubleshootingWhat to check when the licence is not found, fonts are missing, ud is not on the PATH, ud does not reach the open editor, Chromium is not found or a workspace is in Restricted Mode.
- UninstallingFree your seat, remove the ud command and the Claude Code skills, uninstall the extension, and know what stays behind.