The Failure of Full Autonomy

Building generative UX by simply asking an LLM to compose an interface is unreliable. In early experiments, the same query produced wildly different layouts, inconsistent data representations, and fluctuating copy. This happens because LLMs lack the business context to maintain design system integrity. When you hand a model a component catalog and full creative control, you lose the predictability required for professional SaaS products.

The Declarative Orchestration Pattern

To solve this, shift from generating raw markup to a declarative UI protocol. This approach sits between rigid, opinionated components and fully autonomous LLM generation. The architecture functions as follows:

  1. Intent Classification: An orchestrator analyzes the user query to determine the goal.
  2. Tool Invocation: The system calls relevant APIs to retrieve the necessary data.
  3. UI Specification: The orchestrator maps the data and intent to a set of eligible components from a strictly defined catalog.
  4. Rendering: The system broadcasts a UI spec that renders native components, ensuring the final output is always compliant with the design system.

Solving Information Architecture with Atomic Design

Even with a component catalog, the agent needs to know how to arrange elements. The team inverted the traditional hierarchy by applying Atomic Design principles. Instead of designing top-down, they defined a hierarchy of Layout -> Slot -> Sub-slot -> Component. By teaching the agent this structure, the system can programmatically assemble components into meaningful layouts rather than random arrangements. This turns the component catalog into a strict contract between the agent and the interface, where every property and schema definition becomes critical to the final user experience.

The Shift in Design Roles

Adopting this architecture fundamentally changes the role of designers and product managers. Teams no longer spend time designing individual pixels or static flows. Instead, the work shifts to:

  • Schema Curation: Defining the contracts that govern how components behave.
  • Rule Definition: Codifying UX knowledge into the agent's decision-making process.
  • Synthetic Data Generation: Creating queries to test and refine the mapping logic between intent and components.
  • Interaction Patterns: Focusing on the logic of the system rather than the visual output of a single screen.