| P1 |
Figma UI3, adapted to VS Code |
Same regions and the same muscle memory as Figma UI3 (UI-1): floating tool bar at the bottom centre, Pages/Layers/Assets left, Design/Prototype/Inspect right, zoom top right. VS Code already owns the title bar, activity bar and status bar, so the editor has no top bar and no file menu of its own. Its main menu is a “≡” button in the left panel header. |
| P2 |
The theme owns the chrome |
Every chrome colour is a VS Code theme token read through themeColor(token); every chrome font is a themeFont(role) (UI-2). No literal colours in chrome. Literal colours are allowed only for document data: the canvas content, the page background, actor colours and colour swatches. |
| P3 |
The page contract |
Plain ES modules and custom elements ud-*, no framework, no bundler, no stylesheets, codicons through createIcon (UI-3). Every component in §4 maps one-to-one to a class UdThing in media/views/UdThing.js with tag ud-thing. |
| P4 |
Dense, like VS Code |
24 px rows and fields, 32 px section headers, 11–13 px text. A 1440 × 900 window shows a full auto layout frame’s properties with little scrolling. Nothing is larger than VS Code’s own Settings or Explorer. |
| P5 |
Keyboard first |
Every action is a registry command (CMD-17, CMD-18) with a shortcut or a quick action (UI-6). Every canvas node is reachable through the Layers tree (UI-4). Tooltips show the shortcut. |
| P6 |
One write path |
Panels, tool bar, menus and canvas gestures all call registry.run(id, params). A gesture commits once on pointer-up as one command and one undo step. The UI never edits the model directly. |
| P7 |
Agents are visible |
When Claude or any ud client changes the document, the user sees who changed what and can stop it (UI-7). Agent activity has its own pill, status item, actor colours and flash. It never hides behind a spinner. |
| P8 |
Reading is never blocked |
Read-only states (licence, history preview, library file) disable tools, not navigation, selection, Inspect or export (LIC-5). |
| P9 |
Content first |
Chrome uses neutral theme surfaces so the design on the canvas carries the colour. Accent colour is reserved for selection, focus and the primary action. |