DEV Community

Mauricio Juba
Mauricio Juba

Posted on • Originally published at mauriciojuba.com

The Store That Rearranges Itself — Generative UI, part 2

I took the salesman concept from blueprint to a working e-commerce funnel: five personas, a real model in the loop, two hundred simulated shoppers. The experiment says generative UI at the page level is closer than it looks.

Part 1 made the argument: a web page can behave like a good salesman, observing with consent, classifying through behavior, and removing friction per visitor. Arguments about runtime behavior are cheap until a runtime survives them. So I built the whole thing: ui-morph driving a complete e-commerce store on IBM Carbon, from entry page to order confirmation, with a real model proposing the adaptations and a laboratory replaying two hundred deterministic shoppers. This article is what the experiment showed. The short version: the concept holds, the economics close, and the most interesting consequences are about how we design interfaces, so that is where this ends.

Five shoppers walk into one store

The demo store is called NOVA. It sells laptops and gear, and there is exactly one version of it: one HTML per page, one manifest per route, five allowed operations. Every difference you are about to see was decided by the engine from the visitor's quantized persona, and nothing else changed hands.

Five shoppers, one store, same five ops — only the persona changed

The most photogenic slice of that table is the theming. A technical reader gets the data-first dark theme. A gamer gets the g100 tokens with purple accents. Both arrived at the same URL as everyone else:

The same page, generic visitor, default theme

Technical reader: tech-savvy theme, comparison upfront

Gamer: g100 tokens, gear emphasized

My favorite persona is the least technical one. "Dona Marta" arrives from an ad for "laptop fino branco presente": a thin white laptop, as a gift. Her search terms become first-party signals. By the product page, the engine has reordered the gallery ahead of the spec table, surfaced a size comparison against everyday objects, preselected the white color, folded the specs away and routed checkout to guest mode. Every op cites its reason, in plain words, in the audit log:

Dona Marta's product page: gallery first, size-compare, white preselected

No designer drew any of these pages for these personas. Each one is a composition the engine chose from the vocabulary the page already declared. That sentence is the whole experiment.

The next room, prepared before you enter

Part 1's sharpest promise was pre-adaptation: compile the next page's changes while the visitor is still on this one, apply them at the boundary, and the layout never moves under anyone's cursor. On camera it looks like this: the visitor reads the laptop listing as a fresh persona, and by the time they open the accessories page it is already arranged for them.

Accessories page as the generic visitor would see it

Accessories page pre-adapted while the visitor was still on the previous page

The economics closed

The part of the thesis I most needed to verify was the caching claim, because it carries the cost argument alone. The laboratory replays seeded, scripted shoppers through the full funnel, deterministically. Two hundred sessions produced over a thousand page arrivals:

Persona laboratory, N=200, 72% served from cache

72% of arrivals were answered from cache, split between exact hits and a similarity fallback. That second mechanism was itself a discovery of the experiment. Early in a session the persona grows on every page, so exact keys kept missing while the visitor was still becoming somebody. Deterministic similarity over the quantized keys closed the gap and now serves a third of all arrivals by itself. The phrase from part 1, the model compiling itself out of the runtime, stopped being a slogan here. It is a measured majority case, and it gets better as the chain library grows.

The model earned its place

Same persona, same page, two cold paths

For most of the journey the cold path was a deterministic, human-authored mock, which is what keeps the test suites reproducible. Then a real model took over, and for the same gift persona it made different, defensible choices. It kept the visual hero, hid the comparison table, surfaced the gift guide. I find this genuinely exciting: the system produces real judgment inside a vocabulary it cannot escape. The guard filtered both cold paths identically, the audit trail reads identically, and the median exchange cost 5.5 seconds of background time that no visitor ever waited on.

Where the engineering lives

The experiment also mapped where the real work is, and it surprised me: almost none of it was in the model. The hard territory is the page lifecycle, the physics of dying pages, consent that must survive teardown, caches keyed by identities that evolve mid-session. All of it is documented, tested and reproducible in the repo's post-mortem, which I kept honest on purpose: it is the map I wish had existed before I started, and it is exactly where a contributor should start reading.

Blueprint to persona laboratory, seven increments

No designer drew these pages. Each one is a composition the engine chose from the vocabulary the page already declared. That sentence is the whole experiment.

What this changes about designing interfaces

Here is where I think this goes, and why I keep working on it. For twenty years, interface design has meant choosing one arrangement for everyone: we research, we pick the persona we believe in hardest, and we freeze her page. Everyone else visits a compromise. Generative UI dissolves that constraint, and the designer's medium shifts one level up. Instead of the arrangement, you design the space of allowed arrangements: the manifest that says what may move, the variants and token themes worth offering, the protected zones that may never change, the traits worth reading and the objectives worth serving. NN/g calls the direction outcome-oriented design; after this experiment I would put it more concretely. The deliverable becomes a vocabulary plus its boundaries, and the runtime does the layout.

The part that matters most to me is the edge cases. Today, the visitor whose needs sit outside the main persona hits friction, and serving her costs a research cycle, a design cycle and a sprint, so she usually never gets served. In the experiment, Dona Marta got her page the moment the engine could read her, out of components that already existed. That inverts the economics of caring about the long tail, and honestly, it is the future I want for interface design: coverage as a property of the system, instead of a budget line that edge cases always lose.

Next steps

The roadmap, in the order I intend to attack it. An outcome feedback loop, so chains that fail to help a persona evict themselves and recompile. React and Vue store adapters, since the DOM adapter covers any site but framework stores deserve first-class treatment. A richer trait vocabulary: the laboratory surfaced twelve unmapped search terms, and each one is a candidate trait or objective. A shared chain store, turning compiled adaptations into collective knowledge so a new visitor who quantizes like a known persona gets the warm path on first visit. And a pilot on a real site with real traffic, which is where the question about conversion finally gets an honest answer.

Back in the TV section, the salesman is still watching from a distance. He always knew the thing our best design systems never learned: the customer in front of you is the only one that matters. For the first time, a web page can afford to know it too.

We spent twenty years designing the store. Now we get to design the salesman.


Built in the open, contributions welcome: everything in this article is committed and reproducible at github.com/Type-zero-labs/ui-morph: one runtime dependency, five ops, 52 tests, the Carbon funnel demo, the persona showcase, and the seeded laboratory (npm run sim) that regenerates every number above. If any of the next steps sound like your kind of problem, the adapters, the quantizer rules and the theme packs are the friendliest doors in. Open an issue, or just send the PR.

Top comments (0)