7. UDX markup

UDX is an HTML-like text form of a node tree. Agents can write a whole screen in it and read one back compactly. ud export --format udx and ud insert --udx round-trip every property (SRS CMD-34).

Two examples of the same login screen follow. The first is the 0.2 exit example (review decision D11, SRS App. D #11): it uses only what 0.2 offers — absolute-positioned frames, rectangles, text and an image, with literal colours and fonts; no auto layout, instances, variables or styles. It is the screen an agent is asked to build from UDX in the 0.2 exit criterion.

html

<frame name="Login" x="0" y="0" w="390" h="844" fill="#FFFFFF">
  <image name="Logo" src="assets/logo.png" x="159" y="72" w="72" h="72" />
  <text name="Title" x="24" y="168" w="342" h="36" font="Inter" weight="600" size="28" lh="36" fill="#111827">Welcome back</text>
  <text name="Subtitle" x="24" y="208" w="342" h="20" font="Inter" size="14" lh="20" fill="#6B7280">Sign in to continue</text>
  <rect name="Email field" x="24" y="260" w="342" h="48" radius="8" fill="#F9FAFB" stroke="#D1D5DB" stroke-w="1" />
  <text name="Email placeholder" x="40" y="274" w="310" h="20" font="Inter" size="14" lh="20" fill="#9CA3AF">you@example.com</text>
  <rect name="Password field" x="24" y="320" w="342" h="48" radius="8" fill="#F9FAFB" stroke="#D1D5DB" stroke-w="1" />
  <text name="Password placeholder" x="40" y="334" w="310" h="20" font="Inter" size="14" lh="20" fill="#9CA3AF">Password</text>
  <frame name="Sign in button" x="24" y="392" w="342" h="48" radius="8" fill="#4F46E5">
    <text name="Label" x="0" y="14" w="342" h="20" align="center" font="Inter" weight="600" size="14" lh="20" fill="#FFFFFF">Sign in</text>
  </frame>
  <text name="Forgot" x="24" y="456" w="342" h="20" align="center" font="Inter" size="14" lh="20" fill="#4F46E5">Forgot password?</text>
</frame>

The second is the 0.4 form of the same screen: auto layout (0.3) and instances, variants, variables and styles (0.4). It is how the screen is written once the design system exists.

html

<frame name="Login" w="390" h="844" layout="column" gap="24" pad="24,24,32" fill="$color/surface">
  <text name="Title" style="Heading/H1">Welcome back</text>
  <frame name="Form" layout="column" gap="12" w="fill">
    <instance of="Input" w="fill" props="Label: Email; Placeholder: you@example.com" />
    <instance of="Input" w="fill" props="Label: Password; Type: password" />
  </frame>
  <spacer h="fill" />
  <instance of="Button" variant="Variant=Primary, Size=Large" w="fill" props="Label: Sign in" />
</frame>

Rules:

Elements are node types: frame, group, section, rect, ellipse, line, polygon, star, vector (with d), text, image (a rect with an image fill, src), component, component-set, instance, slot, and spacer (a frame that only fills space).
Geometry: x, y, w, h. Values are px, fill or hug.
Layout: layout="row|column|grid|none", gap, pad (CSS shorthand), align (start|center|end|between), cross (start|center|end|stretch|baseline), wrap, cols and rows for grid, abs for absolute children.
Appearance: fill, stroke, stroke-w, radius, opacity, shadow, blur, blend. Values can be a hex colour, a CSS-like gradient, a variable $path/name or a style @Style/Name.
Text: the content of text, with <span> runs for mixed styles, and font, size, weight, lh, ls, align attributes or style="@Text/Style".
Instances: of="Component" or of="Set" with variant, plus props for component properties.
id attributes keep ids on export and identify nodes on ud replace. Without id, nodes get new ids.
Attributes that are not listed above are any Plugin API property in kebab-case, for example corner-smoothing="0.6" or clips-content="false".

The grammar and every attribute are listed in the udx.md reference of the ui-designer skill (AI-001 §3) and by ud help udx.