3. Editor layout
The webview is 1440 × 900 (the editor area of a VS Code window on a large screen, without VS Code's own chrome).
3.1 Wireframe at 1440 × 900#
The webview is 1440 × 900 (the editor area of a VS Code window on a large screen, without VS Code’s own chrome). The wireframe is to scale on the horizontal regions (1 character ≈ 12 px) and shows screen S02 with S03’s Design tab.
text
+--------------------+----------------------------------------------------------------------------+----------------------+
| = checkout.design <| | oo+2 > AI [Export] |
| Screens - edited 2m| .------------------------------------------. | |
|--------------------| | (C) Claude use_figma 12 changes [Stop] | agent pill|----------------------|
| [Layers] Assets (s)| '------------------------------------------' | [Design] Prototype |
|--------------------| Login Cart Payment | Inspect 100% v |
| Pages [+]| +--------------+ +--------------+ +--------------+ |----------------------|
| v Screens | | | | | | | | @ Button v [K] AI |
| Components | | Welcome | | | | | |----------------------|
| Playground | | +----------+ | | | | | | Position |
|====================| | | Email | | | | | | | |< + >| ^ - v |
| Layers [-] (s) | | +----------+ | | | | | | X [ 32 ] Y [ 676 ] |
| v # Login | | +----------+ | | | | | | R [ 0 ] <> ^v |
| v # Form || | | | Password | | | | | | |----------------------|
| > @ Email | | +----------+ | | | | | | Auto layout [-] |
| > @ Password | | o==========o | | | | | | W [326 v] H [Hug v] |
| > @ Button | | H Sign in H | | | | | | [v > w g] = [ 8 ] |
| T Forgot? | | o==========o | | | | | | ::: [<>16] [^v12] . |
| > # Header | | [326 x 48] | | | | | | [x] Clip content o |
| [] Background | | | | | | | |----------------------|
| > # Cart | | | | | | | | Appearance eye bl |
| > # Payment | +--------------+ +--------------+ +--------------+ | % [ 100] r [ 8 ] . |
| > # Done | |----------------------|
| | | Fill ## + |
| | canvas 936 x 878 | [#] color/primary e- |
| | background = page.background |----------------------|
| | | Stroke ## + |
| | | [#] 1E1E1E 10% e - |
| | | [Inside v] [ 1 ] . |
| | |----------------------|
| | | Effects ## + |
| | | [*] Drop shadow e- |
| | |----------------------|
| | | Layout guide + |
| | |----------------------|
| | | Export + |
| | | [1x v][PNG v] ... |
| | | [ Export Button ] |
| | | |
| | .-----------------------------------. .----------. | |
| | | V~ F~ R~ P~ T C | / AI | </> | | minimap | | |
| | '-----------------------------------' '----------' | |
| | | |
+--------------------+----------------------------------------------------------------------------+----------------------+
| Button 326 x 48 Screens (C) Claude editing [Stop] Saved Signed as Arthur Pro ! 1 font |
+------------------------------------------------------------------------------------------------------------------------+Legend:
| Mark | Meaning |
|---|---|
= |
Main menu button “≡” |
< |
Collapse panel |
(s) |
Search |
# |
Frame layer |
@ |
Component or instance layer (purple) |
T |
Text layer |
[] |
Rectangle layer |
| ` | |
o==o, H |
Selection box with corner and edge handles |
[326 x 48] |
Size label under the selection |
V~ F~ R~ P~ |
Tool groups with a flyout chevron: Move, Frame, Shapes, Pen |
/ |
Quick actions |
</> |
Inspect (Dev Mode) toggle |
(C) |
Actor avatar (Claude) |
oo+2 |
Avatars of actors active in the last minute |
> |
Preview (play) |
e - |
Style/variable picker and remove buttons on a paint row |
## |
Styles and variables picker for the section |
. and o |
Trailing slot: more options or variable binding |
3.2 Regions and coordinates#
| Region | x | y | w | h | Contents | SRS |
|---|---|---|---|---|---|---|
| Left panel | 0 | 0 | 240 | 878 | Header, tabs, Pages, Layers or Assets | UI-1 |
| ↳ Header | 0 | 0 | 240 | 40 | “≡” main menu 24, file name (strong, ellipsis), page and “edited 2m ago” (tiny, muted) as a second line, collapse button 24 |
— |
| ↳ Tabs | 0 | 40 | 240 | 36 | “Layers”, “Assets” text tabs; search icon button right | CMP-7 |
| ↳ Pages section | 0 | 76 | 240 | 112 | Header 32 with “Pages” and “+”; rows 24; collapses to its header | — |
| ↳ Splitter | 0 | 188 | 240 | 1 | 5 px hit area; drag to resize Pages | — |
| ↳ Layers section | 0 | 189 | 240 | 689 | Header 32 with “Layers”, collapse-all and search; tree rows 24 | UI-4 |
| Canvas | 240 | 0 | 936 | 878 | Document, overlays, floating bars | CAN-1 |
| ↳ Agent pill | centred | 12 | ≤ 480 | 28 | Shown while an agent edits (§4.23) | UI-7 |
| ↳ Rulers (Shift+R) | 240 | 0 | 936 | 16 | Top ruler 16 tall; left ruler 16 wide | CAN-8 |
| ↳ Floating tool bar | 487 | 818 | 442 | 44 | §4.1; 16 above the status strip | DRW-1 |
| ↳ Minimap (Could) | 1000 | 762 | 160 | 100 | Bottom right, 16 from the right panel and 16 above the strip | CAN-10 |
| ↳ Toast stack | centred | bottom 72 | ≤ 480 | — | Above the tool bar | — |
| Right panel | 1176 | 0 | 264 | 878 | Header, tabs, properties | UI-1 |
| ↳ Header | 1176 | 0 | 264 | 40 | Actor avatars (max 3 + “+n”), Preview (play), AI toggle, primary “Export” button (opens S16 with selection) | — |
| ↳ Tabs | 1176 | 40 | 264 | 36 | “Design”, “Prototype”, “Inspect” text tabs; zoom control “100 %” (ud-zoom-controls, §4.30) right |
UI-1 |
| ↳ Properties | 1176 | 76 | 264 | 802 | Sections scroll vertically; selection header first | — |
| Status strip | 0 | 878 | 1440 | 22 | Selection summary, page, agent item and Stop, save state, account, licence, warnings | UI-7, LIC-6 |
The status strip is inside the webview. It is separate from the VS Code status bar, which also gets a $(sparkle) Claude editing login.design item while an agent runs (S12).
3.3 Right panel grid#
| Part | Value |
|---|---|
| Padding | 16 left, 8 right |
| Content width | 240 |
| Two-field row | field 104 + gap 8 + field 104 + trailing slot 24 |
| Full-width row | field 216 + trailing slot 24 |
| Trailing slot | 24 × 24 icon button: variable binding, more options or remove |
| Row height and gap | 24 tall, 8 between rows |
| Section | header 32, rows, 12 bottom padding, 1 px divider |
| Selection header | 40 tall: type icon, name (strong, editable on double-click), dropdown chevron (component swap or mode list), action buttons right |
3.4 Resizing, collapsing and narrow windows#
| Behaviour | Rule |
|---|---|
| Left panel width | Drag its right edge: 200–400, default 240 |
| Right panel width | Drag its left edge: 240–400, default 264. The AI panel sets it to 360 while open and restores it after. |
| Ctrl+\ | Hides both panels. A 32 px mini header stays at the top left of the canvas with “≡”, file name and “show panels”. |
| Collapse one panel | Header button “<” or the quick actions “Toggle left panel” / “Toggle right panel”; panel collapses to a 40 px rail with tab icons |
| Width < 1000 | Left panel collapses to its 40 px rail; clicking a rail icon opens it as an overlay above the canvas |
| Width < 720 | Both panels collapse to rails; the tool bar hides group chevrons and the “/”, “AI”, “</>” segment moves into an overflow “…” button |
| Height < 600 | Pages section collapses to its header; status strip hides account and licence items |
Panel widths and collapsed state persist per workspace in webview state.