Skip to main content
reopt Handbook
reopt Handbook
Design Systems for the AI Era

Foundation

Token ArchitectureComponent SpecBuilt-in Accessibility

AI Workflow

Prompt InterfaceDESIGN.md InterfaceAgentic Design Quality ControlWorkflow StrategiesAI-Based Design System EvolutionContext Injection

User Experience

Consistency PatternsInteraction DesignForms and Data Input

Next Interfaces

Agent UI ProtocolsGenerative UISpatial and Multimodal Interfaces

Practice

Execution PlaybookMigration StrategyGovernance and CollaborationCase Studies

Operations

Verification ChecklistUpdate Log
Handbook›Design Systems for the AI Era›Generative UI
한국어English

Generative UI

Runtime UI generation with design-system constraints.

Key takeaways

  • Generative UI lets AI assemble interfaces at runtime from user context and tools, with the design system as the guardrail that keeps it coherent.
  • Fix the components, tokens, accessibility, layout templates, and validation schemas; leave only data and flow branching flexible.
  • The runtime flow validates each declaration in the renderer and renders only with approved design-system primitives.
  • Control key risks by rendering only approved components, requiring action metadata and confirmation, and logging declarations for debugging.
  • Good fits are data exploration, ops dashboards, and copilots; avoid generative UI for legal, financial, or safety-critical flows unless tightly governed.

Traditional UI is defined ahead of time by developers. Generative UI lets AI assemble interfaces at runtime based on user context, task state, and available tools. The design system is the guardrail that keeps this flexible UI coherent.

What Must Be Fixed

Generative UI should not mean arbitrary UI.

Fixed layerFlexible layer
ComponentsWhich component appears for the task.
TokensWhich semantic role is selected.
AccessibilityWhich fields/actions are present.
Layout templatesWhich data fills the layout.
Validation schemasWhich branch of the flow is shown.

Runtime Flow

  1. User asks for a task.
  2. Agent determines intent and available data.
  3. Agent selects approved UI components.
  4. Renderer validates the declaration.
  5. UI renders with design-system primitives.
  6. User actions feed back into the agent or backend.

Risks

RiskControl
Inconsistent UIRender only approved components.
Unsafe actionsRequire action metadata and confirmation.
Accessibility gapsBuild accessibility into primitives.
Debugging difficultyLog declarations and renderer decisions.
Visual driftSnapshot representative generated states.

Good Use Cases

  • Data exploration.
  • Support and operations dashboards.
  • AI copilots that assemble task-specific controls.
  • Internal tools with many low-volume workflows.

Avoid generative UI for legal, financial, or safety-critical flows unless the renderer and action policy are tightly governed.

Related docs

Agent UI Protocols

Declarative protocols for AI agents that construct user interfaces.

Cmd. /tui

Claude Code Command Master · Switch TUI renderer while preserving the conversation.

Case Studies

Practical patterns from shadcn, Radix, Stitch, Material, Fluent, and AI-first systems.

AI SDK Runtime

Vercel Enterprise AI Platform · Use AI SDK as the application runtime layer for streaming, tools, agents, and telemetry.

Agent UI Protocols

Declarative protocols for AI agents that construct user interfaces.

Spatial and Multimodal Interfaces

Spatial computing, voice, gesture, and multimodal AI in design systems.

On this page

What Must Be FixedRuntime FlowRisksGood Use Cases