14. Inspect, handoff and code
Esta página está em inglês; a tradução está a caminho.
| ID | Requirement | P | Type | Ver. | M |
|---|---|---|---|---|---|
| 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 |