Overview
Generative UI promises to reverse a decades-old relationship: instead of forcing people to learn the static structure and mental model of every application, software can adapt its interface to the user’s immediate intent. The speaker’s early experiments show why unconstrained generation is not enough: identical sales-report requests produced inconsistent terminology, information architecture, component density, and visual hierarchy. The team therefore adopted a declarative middle ground between shipping completely fixed components and allowing an LLM to generate arbitrary interfaces. An orchestrator classifies intent, invokes relevant first- or third-party tools, retrieves data, maps entities to eligible catalog components, and emits a structured UI specification that renders as native React components. Reliability comes from treating the design system and component catalog as executable contracts, with Zod schemas describing valid properties and atomic-design-inspired rules governing placement. Pages are modeled as layouts containing slots, sub-slots, component categories, and components; generation traverses this hierarchy in reverse to assemble an appropriate template. This approach preserves adaptability while keeping output aligned with the company’s design system, UX writing, and interaction standards. It also transforms product work: designers and PMs increasingly curate schemas, rules, synthetic queries, mappings, and interaction patterns rather than specifying every pixel of a predetermined flow.
Sections
Lessons Learned
Practical lessons from moving a generative interface from inconsistent experiments toward a production-oriented system.
- Do not judge generative UI from a single attractive output; repeat the same intent and evaluate terminology, hierarchy, density, and interaction consistency across runs.
- Retain human control over UX quality by constraining model decisions with approved components, schemas, templates, and placement rules.
- Treat information architecture as part of the generation system rather than expecting component selection to produce a coherent page automatically.
- Invest continuously in component-catalog curation because every property and layout attribute affects what the agent can safely compose.
- Prepare designers and product managers to work with schemas, rules, mappings, synthetic queries, and interaction patterns instead of only fixed mockups.
Strategic Insights
Broader implications derived from the speaker’s architecture and organizational experience.
- In generative products, the design system evolves from a visual reference into a machine-readable policy layer that defines the model’s legitimate action space.
- Consistency in generative UI should be defined as invariants rather than identical screens: terminology, hierarchy, component eligibility, and interaction behavior can remain stable while composition adapts.
- The core UX artifact is no longer a finished page but a compositional grammar connecting user intent, domain entities, components, and layout constraints.
- The most defensible generative-UI advantage may come from encoded organizational judgment—templates, mappings, writing rules, and catalog curation—rather than from access to a particular model or protocol.
Technical Architecture
Specific mechanisms, protocols, schemas, and data flows described in the presentation.
- The orchestration flow performs intent classification, invokes relevant first- or third-party tools or MCP servers, retrieves data, maps returned entities to eligible components, and sends a UI description for rendering.
- The declarative output is a structured UI specification resolved against a component catalog and rendered as native React components.
- Zod schemas define catalog contracts and help ensure that generated UI descriptions comply with the selected protocol and component properties.
- The layout model follows the hierarchy layout → slot → sub-slot → component, while runtime composition reverses the mapping from components through sub-slots and slots to templates.
- The transcript names HTMX from Google, JSON Render from Vercel, and OpenUI by Thesis as examples of protocols occupying the declarative middle ground; these names and attributions may reflect transcription errors.
- In the open-ended approach, an MCP tool can return HTML that is rendered inside a sandboxed iframe within a host such as a chat application.