UI Design: editor layout and screens
The editor layout, design tokens, component inventory and every screen, with an annotated screenshot of each Figma frame.
Esta página está em inglês; a tradução está a caminho.
| Field | Value |
|---|---|
| Product | SoftForge UI Designer (SoftForge.softforge-ui-designer) |
| Document id | UI-001 |
| Status | Draft; review decisions D2, D4, D6, D19, D23 applied |
| Date | 2026-10-10 |
| Owner | Arthur de Araújo Farias |
| Parent | SRS-001 Software Requirements Specification (#1) |
| Companions | FMT-001 Design file format (#2), CLI-001 CLI (#3), AI-001 AI agents (#4), ARC-001 Architecture (#5) |
This document fixes the editor’s layout, design tokens, components and screens. It is the input for the Figma file “SoftForge UI Designer — Editor UI” (§9). The 0.0 deliverable “UI-001 Figma frames per UI-001 §9.7” is the subset of that file defined in §9.7; §9.8 records what the file contains.
All sizes are CSS pixels at 100 % webview zoom. Coordinates are x, y from the top left of the webview. “Token” means a VS Code theme colour id. Requirement ids (UI-1, CAN-2) refer to SRS-001.
Generated from issue #6 of planning.pb by
scripts/docs-specs.mjs; the board is the source of truth.
Status. Done 2026-10-10. UI-001 complete with D2, D4, D6, D19, D23 applied; the document, with one annotated screenshot per screen, now lives in the comments of this issue.
- 1. Principles
- 2. Design tokensEach role has a short name used by themeColor() in code and as a Figma variable ud/<role> in the Theme collection (§9.2).
- 3. Editor layoutThe webview is 1440 × 900 (the editor area of a VS Code window on a large screen, without VS Code's own chrome).
- 4. Component inventoryEach component is a custom element.
- 5. ScreensEvery screen is a 1440 × 900 frame of the webview content, at Dark Modern, unless noted.
- S01 Empty file and new designFirst view of a new or empty .design file; start from a template, an import or a prompt.
- S02 Editor with a selectionDefault editing state; reference for the whole layout.
- S03 Design tab: auto layout frameFull Design tab for a frame with auto layout; the densest panel.
- S04 Design tab: text selectedTypography properties of a text layer.
- S05 Design tab: component instanceEdit an instance through its component properties.
- S06 VariablesCreate and edit variables, collections and modes.
- S07a AssetsFind and insert components and styles.
- S07b LibrariesEnable libraries from the workspace and publish this file's library.
- S07c Library updatesReview library changes before they apply.
- S08 Prototype tab and connectionsDefine interactions and flows.
- S09 Preview playerPlay a prototype.
- S10 Inspect (Dev Mode)What a developer needs to implement a node.
- S11 AI panelAsk Claude to design with the selection as context.
- S12 Agent working liveAn external agent (Claude Code in the terminal) edits the open file through ud and the bridge; the user watches and can stop it. This is the 0.1 exit scenario.
- S13 History and versionsSee who changed what; preview, restore and name versions.
- S14 CommentsDiscuss designs in place.
- S15 Quick actionsFind and run any command, insert any component or style.
- S16 ExportExport the selection, frames or a page.
- S17 Figma import reportShow what came across from a Figma file and what was approximated.
- S18 LicensingCallouts: 1.
- S19 Run Script outputRun a usefigma script file on the selection and see its output.
- theme and layout checks T01–T03The three check frames of §9.4: S03 in Light Modern, S03 in Dark High Contrast, and S02 at 960 × 640.
- 6. Interaction detailsThe zoom control (ud-zoom-controls, §4.30) in the right tabs row opens the zoom menu: Zoom in, Zoom out, Zoom to fit (Shift+1), Zoom to selection (Shift+2), 50 %, 100 % (Shift+0), 200 %, then toggl…
- 7. AccessibilityTarget: UI-4 at 1.0; structure and ARIA are built from 0.1.
- 8. Light, dark and high contrastThe Figma file shows S03 in Light Modern (T01) and Dark High Contrast (T02) to verify the token mapping.
- 9. Figma deliverableFile name: SoftForge UI Designer — Editor UI.