Controlled Generative UI

Overview

A B2B analytics product answers data questions in natural language and replies with visual artifacts. The hard part is letting an AI generate visualizations without breaking the design system, accessibility, performance, or trust. I designed a Controlled Generative UI pattern: the AI picks from a fixed catalog of pre-built components and fills them with data, and the frontend renders the real components. Never raw markup, never runtime code.

Context

The product needed to answer data questions with charts the user could read, toggle, export, and keep. The market alternatives sacrifice either consistency or safety. The AI emitting loose JSON drifts from the design system, and the AI generating HTML or SVG directly breaks accessibility and opens a security risk, unacceptable in a product handling sensitive data. The real problem was control. Generation had to stay inside the system's rules, and every answer had to be auditable.

Role

• Evaluated three Generative UI patterns (Controlled, Schema/JSON-driven, Open-ended) and chose Controlled for B2B, justified on identity, accessibility, performance, predictability, and trust.
• Designed the typed artifact schema, six types (bar, pie, line, radar, KPI, table), each with its own constraints.
• Built the decision matrix that maps question intent and data shape to a chart type, distilled from classic visualization literature.
• Defined the semantic color system, where the AI chooses the palette intent, not the hex.
• Specified the artifact features: the chart/table switch, export to PNG and CSV, and saving an analysis as a living artifact.

Process

• Closed universe, not open code. The AI picks from pre-built design-system components through tool calling instead of emitting markup. Every choice is safe, reversible, and shows up in the reasoning.
• Typing at the AI→frontend boundary. A schema validates each artifact before it renders, with per-type constraints (a pie caps its slices, a radar needs a minimum number of axes) built into the schema itself.
• Decision by reasoning, not rigid rules. The intent-and-shape matrix is taught to the AI by examples in the system prompt, updatable without a deploy.
• Auditable by default. Every chart ships with the table behind it, the exact data it was built from, so the user can check the numbers instead of just trusting the picture. In a B2B product that traceability is not optional. That same chart/table switch is the accessibility path, color is never the only signal.

Outcome

• Six artifact types cover the common analytics formats: comparison, trend, distribution, multidimensional profile, single value, tabular detail.
• AA accessibility on the components, the chart/table switch guarantees non-visual access to the data.
• Auditable by construction, the underlying table travels with every answer, so the data behind a chart is always one tap away.
• A rare portfolio combination, Product Design and Design System and AI in one project, grounded in classic visualization research.

How the AI picks the chart

The chart type is a reasoning step, not a hardcoded rule. The AI reads the question's intent (comparison, composition, trend, relationship, distribution) and the shape of the retrieved data, then picks the type. The rules are distilled from the classics, Cleveland & McGill (position beats angle, so a bar beats a pie), Tufte (data-ink, no chartjunk), Few (the comparison/composition/distribution/relationship/trend taxonomy), Brewer (the canonical palette groups). When in doubt it falls back to the safest option, a table, which keeps the full data with no loss. The same matrix that guides the AI is the chart-usage rule the design system hands to human developers, one taxonomy for both.

Color by intent, not hex

The AI never picks a color. It picks the palette's intent, and the frontend resolves it to design-system tokens. Five semantic palettes, each solving a distinct problem:

• Categorical for independent categories with no order, the safe default.
• Sequential for intensity, low to high.
• Divergent for a meaningful midpoint with opposite sides.
• Status for fixed meanings, success, warning, error, info, neutral.
• Highlight for one series in focus against muted context.

The AI declares which one fits the data, and the renderer maps that intent to --chart-* tokens, so dark mode and theme changes never touch the AI. The palettes are built on ColorBrewer's peer-reviewed research, not personal taste, and validated against WCAG 2.2 AA on both color criteria, 1.4.1 (color is never the only signal) and 1.4.11 (non-text contrast).

Reflection

The discipline that made this work was refusing open generation. A closed, typed universe is what kept an AI feature consistent, accessible, and auditable, the things a B2B product can't trade away. Treating chart choice and color as semantic decisions, intent resolved to tokens, is what let the AI generate visualizations without the result turning into chaos.

Tags

Generative UI · AI · Design System · Data Viz