# The End of the Static Screen: Architecting Intent-Driven UX — Gus Iwanaga, commercetools

## Executive summary

The presentation outlines a shift from static, complex SaaS UIs to dynamic, intent-driven experiences using generative UI protocols. The core architecture involves an orchestrator that classifies user intent and calls tools, which then map results onto eligible components defined in a component catalog. This process generates a structured UI specification (UI spec) that ensures the final output adheres strictly to the design system, mitigating the unpredictability inherent in pure LLM-generated markup.

## Key takeaways

- The Failure of Pure Generative Output: Relying solely on an LLM to compose an entire experience (e.g., generating a sales report) leads to inconsistency, such as varying date ranges or KPI card layouts for the same query (7:00). The speaker asserts that this non-deterministic output is unsuitable for production.
- The Declarative Middle Ground: A robust approach requires an orchestrator to classify intent, invoke tools (first or third party), and then generate a UI spec. This spec dictates the placement of components from a catalog, ensuring the final output is compliant with the design system every time.
- The Importance of Hierarchy (Atomic Design): To maintain control over layout and arrangement—a critical aspect of UX—the architecture must invert the traditional hierarchy: components map to sub-slots, which map to slots, which finally map to templates. This codifies UX knowledge into the agent.

## Technical details

- Intent Classification and Orchestration: The system uses an orchestrator to extract user intent from a query. This intent guides the selection of tools (first or third party) and retrieves necessary data, providing context for the UX agent to render meaningful content.
- The Component Catalog as Contract: The component catalog serves as the contract between the generative agent and the interface. Every property within this catalog, including those defining slots and sub-slots, must be curated to allow for controlled, meaningful output.
- Generative UI Protocols: The speaker discusses three rendering methods based on desired control: 1) Fixed component (highest control); 2) Component selection from a catalog (declarative, recommended for B2B SaaS); and 3) Full LLM autonomy (lowest control, highest risk). Examples of protocols include HTMX, JSON Render, and OpenUI.

## Practical implications

- Adopt a declarative UI specification approach rather than relying on pure LLM markup generation to maintain design system compliance.
- Implement an architectural layer (the orchestrator) responsible for intent classification and tool invocation before rendering the UI spec.
- Model UX knowledge using atomic design principles, defining explicit hierarchies (Layout $ ightarrow$ Slot $ ightarrow$ Sub-slot $ ightarrow$ Component) to guide component placement.

## Topics

Generative AI, UX Architecture, Intent-Driven Design, Component Modeling, Declarative UI

Source: https://www.youtube.com/watch?v=QrMcNe2jjt8