Margo Sultenfuss

← / CASE STUDIES

Generative UI Content Schema

Agent.ai

Governing what two dozen AI agents say, not just how they look

When Agent.ai grew to 24 live premium agents, the interface stayed relatively consistent because every team pulled from the same design system. But the content inside those components drifted. One agent showed confidence as a percentage, another as a badge, a third left uncertainty off the output entirely. The visual layer had a clear owner. The layer underneath (what an output contains, how it marks a guess, what it does when data is thin) had none, so it fell to whichever engineer was shipping that agent's prompt.

Context Note

Visuals throughout use a fictional fintech surface, "Aria," as a faithful reconstruction. The original Agent.ai artifacts became HubSpot IP after the 2026 acquisition. The system itself governed 24 live premium agents and was validated by blind test.

Role

Lead Product Designer at Agent.ai. I scoped, built, and validated the content system across the platform.

Scope

24 live premium agents.

The Problem

Visual consistency was high, but output content drifted across every agent. No one owned the layer that governs it, so engineers were making product decisions in code while trying to ship.

What I Built

A content system in three parts: a registry of content types and the structural primitives that present them, platform-wide behavioral rules every agent inherits, and a generator that turns a product spec into a reviewable output spec engineering can build from.

How I Proved It

A blind run: a fresh model, no history, given only the system and a new agent's PRD, produced a conforming output spec and surfaced edge cases that were brought into the platform rules.

[ IMAGE PLACEHOLDER: LAYER MATRIX ]
The three layers of an AI output: visual, content, and reasoning. The middle one had no owner. That's the work.

Problem

Teams were losing weeks to inconsistent outputs, and because no one owned the content layer, engineers were solving design problems in code while shipping prompts.

The engineers were doing real work building multi-agent flows, but the specs they got stopped at business goals and mockups. When a payload came back with a missing field, an odd array length, or an ambiguous label, they had to decide on the spot how to render it: what to show, how to mark it, whether to hide the section or flag it. It wasn't a prompt problem or a styling problem. The platform had no content architecture, so edge cases got answered ad hoc in the backend instead of on purpose in design.

[ IMAGE PLACEHOLDER: AGENT OUTPUT DRIFT ]
Same data, three agents (prose, invented markup, a dense table), then the same three under one system.

Design decisions: building the missing layer

Prompt engineering and design tokens each governed a layer; neither governed what the output contained, so I built the layer between them: a content system in three parts.

A central registry of content types. The shared dictionary every agent draws from. Its main job is to settle how each kind of content is presented: a given kind of content maps to a specified type and the structural primitive that presents it, the same way every time, so a confidence score isn't a percentage on one agent and a badge on another, and the model can't invent a new shape or reach for the wrong one. Each type also defines its required pieces, its optional metadata, and what it falls back to when data is missing: if a primary metric isn't there, the output falls back to a less precise value rather than shipping an empty string.

[ IMAGE PLACEHOLDER: INFERENCE MARKER ]
Facts stay plain; only the model's own judgment is marked as inferred.

Behavioral rules every agent inherits. Uncertainty handling, null states, and copy limits live in one platform-wide rule set instead of being re-specified per agent. Every output marks inference the same way, every empty state explains itself the same way, every predictive figure carries its confidence the same way. A new agent starts compliant instead of starting from scratch.

[ IMAGE PLACEHOLDER: NULL-STATES TRIPTYCH ]
One missing field, three correct behaviors: omit, explain, or flag.

A generator that turns a spec into a reviewable output spec. It reads a simplified PRD against the registry and the rules, then produces a designer-reviewable output spec: the sections, the content types, the edge cases, and the calls it couldn't make from the inputs alone, flagged for a human. Engineering builds from that: structure, fallbacks, and uncertainty rules are settled in design before anyone writes rendering code, instead of improvised in the prompt.

[ IMAGE PLACEHOLDER: PIPELINE DIAGRAM ]
A product spec compiles against the system into a reviewable output spec engineering builds from.

What didn't work

The first versions didn't stop drift, and each failure taught the rule that fixed it.

The taxonomy was too granular. I'd made separate types for a person, a contact, and a user profile (nearly the same structure three times), and the redundancy confused the model during generation more than it helped. I consolidated them into a single Person type with optional flags and wrote a rule against duplicate types.

The input specs were too long. I'd assumed more background would produce a better output spec, but the extra prose added noise and pushed the model to invent structures that weren't there. Stripping the input to essentials (goals, inputs, and edge-case boundaries) produced cleaner specs. The system reasons better from goals than from prescriptions, so the input got simpler, not richer.

The validation was too soft. I was reviewing the pilot runs myself, and because I already knew what each output should look like, I kept reading right past edge cases that were only half-defined. It wasn't until I handed the system to a model with no context that those gaps actually showed up.

[ IMAGE PLACEHOLDER: SPEC BEFORE/AFTER ]
The over-done early spec vs. the stripped-down version that produced cleaner output.

Validation: proving it holds without me

The real test isn't whether the system works when I run it: it's whether it holds when someone else does, without me in the loop.

I ran a blind test: a fresh model, no prior context, given only the core system and a minimal PRD for a new agent. It produced a production-ready output spec that mapped every content type, applied the null rules, and marked uncertainty correctly. Better than the pass itself: the blind run surfaced edge cases my own audit had missed, which I brought back into the global rules. The system compounds: every spec it generates makes the next one better.

[ IMAGE PLACEHOLDER: BLIND-RUN COMPARISON ]
A fresh model, given only the system and a new spec, produced a conforming output spec with no steering.

What's next: self-serve governance

Content systems usually die when their builder leaves, so I packaged this one to outlast me.

Teams can maintain their own agent content specs from the registry, the inherited rules, and the generator, without me in the loop. That kit is now the core of my consulting practice, where I help product organizations build the same output governance for their own AI features. Since it runs on documented types, inherited rules, and the generator rather than my personal review, teams keep shipping consistent specs long after the engagement ends.

[ IMAGE PLACEHOLDER: SELF-SERVE TOOLKIT ]
Teams generate and maintain their own specs from the kit. No dependency on me.

The V2 vision: from documented specs to enforcement

V1, shipped. A human-reviewed output spec that engineering still translates into schemas and components by hand.

V2, designed but not yet built. The output spec becomes the source of truth. Edit a brief and it propagates: the system prompt re-compiles with version control, the API validates payloads against generated typed schemas, and validated data maps into the frontend components. No per-feature parsers. It's the move from documenting the right output to enforcing it, where an output that doesn't match the spec can't render. The design is fully specified; building the compiler is the next phase.