v1.0 — Open Format

UI as text.

.gui is a portable, text-based format for describing user interfaces. Export any Figma screen to a single .gui file. Render it in a browser. Feed it to an AI agent. Build with it programmatically.

What it is

A UI file that tools can read

Most design formats are binary blobs — opaque to code, invisible to AI. .gui is different: it's plain XML that carries your complete screen exactly as Figma drew it, in a format any tool can parse.

Frames, stacks, text, images, shapes, tokens, fonts, effects — everything is in one file, with attributes you can read without a schema decoder.

checkout.gui XML

<!-- a complete mobile screen -->
<gui version="1.0" name="Checkout" viewport="390x844">

  <!-- design tokens -->
  <tokens>
    <color name="primary" value="#007AFF" />
    <number name="radius-card" value="12" />
  </tokens>

  <!-- the screen -->
  <stack direction="vertical" fill="#F2F2F7" gap="16" padding="24">

    <text value="Checkout"
          font-family="Inter" font-size="28"
          font-weight="700" color="#1C1C1E" />

    <stack fill="#FFFFFF" radius="$radius-card"
           direction="horizontal" padding="16"
           align="center" justify="space-between">
      <text value="Total" font-size="15" color="#8E8E93" />
      <text value="$84.00" font-size="15" font-weight="600" color="#1C1C1E" />
    </stack>

    <shape type="rect"
           fill="$primary" radius="12"
           sizing-h="fill" height="52" />

  </stack>
</gui>

Why it exists

Designed for AI agents

When an AI agent needs to understand or reproduce a UI, it needs text. Figma's native format is a binary API — not something you paste into a prompt. .gui bridges that gap: it's compact, human-readable XML that fits in a context window.

An agent can read a .gui file and know exactly what's on screen — the layout structure, every text value, colors, spacing, font weights — without screenshots or visual reasoning. It can also write .gui to produce screens that render correctly.

Portable

A single .gui file carries structure, styles, tokens, fonts, and assets. No external references needed.

Renderable

Drop in dotgui-render to turn any .gui string into live DOM with one function call. Zero dependencies.

Figma-accurate

1-1 mapping to Figma's layer model. Auto-layout, fills, gradients, effects, tokens — nothing is approximated.

AI-native

Plain text. No proprietary decoder required. LLMs can read, write, and reason about .gui files directly.

Renderer

dotgui-render

A standalone TypeScript library that takes a .gui document string and renders it into a live container element. It handles layout, fonts, images, shapes, gradients, effects — everything the format describes.

app.ts TypeScript

// render a .gui document into any container
import { render } from 'dotgui-render'

const setZoom = render(guiCode, containerEl)

setZoom?.(1)   // fit to container
setZoom?.(2)   // 2× zoom

The renderer also accepts a pre-built asset map — useful when you want to avoid re-parsing large base64 image blobs on each render update.

with-assets.ts TypeScript

// pass assets separately for faster re-renders
const assetMap = {
  '$img-1': 'data:image/webp;base64,AAAA...',
  '$svg-1': 'data:image/svg+xml;base64,AAAA...',
}

render(guiCode, containerEl, assetMap)

Export

Export from Figma

Select any layer — a frame, a component, a group, or even a single shape — and export it as .gui with the Figma plugin. The plugin handles everything: token extraction, font mapping, image encoding, gradient computation.

Install the plugin

Add the dotgui Figma plugin from the Figma Community.

Select a layer

Any visible layer works — frames, components, groups, or individual shapes.

Export as .gui

Small exports produce a single inline .gui XML file with embedded assets. Larger exports download as a packaged .gui container with an assets/ folder.

Render or process

Pass the file to dotgui-render for a live preview, or feed it directly to an AI agent as structured context.

Format

What a .gui file contains

Every .gui document is a self-contained XML file with these top-level blocks:

<tokens> — Design system primitives. Colors, numbers, strings, referenced by $name anywhere in the tree.

<fonts> — Font declarations. The renderer uses these to load Google Fonts or fall back gracefully to system fonts.

<assets> — Embedded images (WebP) and vector artwork (SVG), base64-encoded. Referenced as $img-1, $svg-1, etc.

<frame> / <stack> — The UI tree. Frames have absolutely-positioned children; stacks are auto-layout (flex or grid).

<text> — Text nodes, with full typography attributes and optional mixed-style <segment> children.

<shape> — Rectangles, ellipses, lines, and vector paths.

<appearance> — Multi-fill and multi-effect paint stacks for any node that needs more than a single solid color.