Generative UI.
Making AI thinking visible.

Generative UI

A case study in making AI thinking visible.

Index

The premise

Waiting is part of the interface. So it should show its work.

AI tools do real work behind a spinner. People cannot tell progress from a stall.

A spinner says one thing: wait.

Show. Ask. Be honest.

The principle list

The orb thinks. The UI answers.

Orbs carry the dither, because they stand for work in progress. Every interface stays sharp, because it is the answer.

One matte palette, one type pair, nine orbs.

Matte black

Matte black lets the orbs and the data lead, while colour keeps one job: meaning.

Inter and IBM Plex Mono

Nine orbs, one verb each.

Effects, used sparingly.

Beam means running. Metal means the one main action. Gooey means two things becoming one.

Reasoning as a trail you can follow, not a spinner.

Show the path, including the wrong turns.

A spinner hides whether the agent is progressing or stuck.

Thinking Process on desktop

Thinking Process on mobile

Facts arrive one at a time, each with its source.

Every claim arrives with its source attached.

Research tools go quiet, then return a wall of text nobody can check.

Research Card on desktop

Research Card on mobile

A contract, reduced to the three things only you can answer.

Ask only what the document cannot answer.

Contracts bury a few real decisions inside pages of fields.

Document Signing on desktop

Document Signing on mobile

An invisible limit, given a shape.

Make the invisible limit visible before it bites.

Running out of context arrives as a surprise, mid-task.

Context Window on desktop

Context Window on mobile

Production changes you can watch, row by row.

Scary work deserves to be watched, not trusted.

A migration is a black box run against live data.

Database Migration on desktop

Database Migration on mobile

The commit graph becomes the status bar.

One card, from first commit to merged.

PR status is scattered across tabs, checks and notifications.

PR Timeline on desktop

PR Timeline on mobile

The same story, told as a shape.

A conflict is a line that cannot reach main.

A list says what happened. It does not show where you stand.

PR Graph on desktop

PR Graph on mobile

Size the task first, then stay honest about it.

Should I wait, or go and get a coffee?

Long agent tasks give no sense of whether to stay or leave.

Time Estimate on desktop

Time Estimate on mobile

With no screen to read, the interface needs a body.

When you stop reading, the UI needs a body.

Talking to an agent gives no sign that it heard you or is working.

Voice Mode on desktop

Voice Mode on mobile

One line from Faster to Smarter, and a last stop that breaks it.

Effort is a trade-off, so show it as a line.

Effort settings hide a real trade-off behind a list of words.

Effort Slider on desktop

Six stops, one line.

One system, four surfaces.

Every flow was built for light and dark. This case study shows the black version.

Every desktop flow

Every mobile flow

AI waiting time is design material.

The UI should narrate the work and stay honest about it. The best moment is the one that hands control back.

Credits

Thank you