| DEV-1 |
An Inspect mode shall show what developers need. Toggled with Shift+D: measurements between nodes on hover, properties as CSS (and as iOS/Android/Flutter values), variables and styles by name with their code syntax, assets to export, component name and properties. |
Must |
functional |
test |
0.6 |
| DEV-2 |
Code snippets shall be generated per node. Must: CSS, HTML + CSS, React (TSX, inline styles or CSS modules), Tailwind classes, custom elements (SoftForge page contract). Should: SwiftUI and Jetpack Compose. Auto layout maps to flex/grid; variables map to their code syntax. |
Must |
functional |
test |
0.6 |
| DEV-3 |
Frames shall generate code into the workspace. “Generate Code” writes files for a frame or component in a chosen language to a chosen folder, with a preview diff before writing; regeneration only touches regions between generated markers. Also ud codegen. |
Should |
functional |
test |
0.6 |
| DEV-4 |
Components shall map to code components. A mapping (in the file and in ud.codeMap settings) from a component and its properties to a code component and its props, e.g. Button(Size=sm, Label="Go") → <Button size="sm">Go</Button>; snippets and generated code use it; suggestions come from scanning the workspace (TS/JS exports, custom element registrations). |
Must |
functional |
test |
0.6 |
| DEV-5 |
Status marks shall track handoff. Frames and sections can be “Ready for dev” and “Completed”; changes after “Ready” are highlighted with a compare view. |
Should |
functional |
test |
0.6 |
| DEV-6 |
Code shall link back to designs. CodeLens/hover in source files that reference a design node id (@design nd-… comments or code-map entries) shows a thumbnail and “Open in UI Designer”. |
Should |
functional |
demonstration |
0.6 |
| DEV-7 |
Annotations shall be supported. Measurement and note annotations attached to nodes for developers, with categories (behaviour, accessibility, interaction). |
Should |
functional |
test |
0.6 |
| DEV-8 |
Accessibility metadata shall be stored per node. Role, accessible name, description, heading level, focus order, alt text for images; used by code generation and checked by lint (CMD-36). |
Should |
functional |
test |
0.6 |