Examples corpus

These examples provide a baseline for producer implementation, consumer testing, and interoperability review.

Button

button.json

Reusable component with semantic role and tokenized style.

Modal

modal.json

Screen-like container with layered structure and actions.

Form

form.json

Input and button composition for common app workflows.

AI-Native extension

ai_native.json

Core v1 document with optional extensions.ai_native semantics and behavior for AI consumption.

AI-Native interactions

ai_native_interactions.json

AI-Native document with actions, eventHandlers, and a11y annotations.

AI-Native interactions (failure)

ai_native_interactions_failure.json

Deterministic failure path using an invoke fixture with error, exercising catch and emitted-event handlers.

AI-Native aliases + predicates

ai_native_alias_predicate.json

Demonstrates scopeAliases selector addressing, predicate ref/matches, and pointer-based setState writes.

AI-Native numeric + exists

ai_native_numeric_exists.json

Demonstrates deterministic predicate operators gte, lt, and exists against state via JSON Pointer refs.

AI-Native debounce + emitted events

ai_native_debounce_emit.json

Exercises deterministic debounceMs by emitting the same event twice and showing only the first handler run.

Assets

assets.json

Image/icon nodes with asset references and alt text.

Rich text

rich_text.json

Text node with optional textRuns spans and a link.

Example: button.jsonJSON

{
  "version": "1.0.0",
  "source": {"tool": "figma", "fileId": "sample-button"},
  "nodes": [
    {
      "id": "cmp_button_primary",
      "type": "component",
      "name": "Button/Primary",
      "role": "button",
      "children": ["txt_button_primary_label"],
      "layout": {
        "type": "flex",
        "direction": "row",
        "align": "center",
        "justify": "center",
        "gap": "{space.2}",
        "padding": {"x": "{space.4}", "y": "{space.2}"}
      },
      "style": {
        "background": "{color.brand.primary}",
        "text": "{typography.label.md}",
        "radius": "{radius.md}"
      },
      "confidence": 0.97
    },
    {
      "id": "txt_button_primary_label",
      "type": "text",
      "name": "Label",
      "text": "Continue",
      "parentId": "cmp_button_primary",
      "role": "text"
    }
  ]
}