Thursday, March 26, 2026

Generative UI Notes | CSS-Tips


I’m actually on this rising concept that the way forward for net design is Generative UI Design. We see hints of this already in merchandise, like Figma Websites, that tout having the ability to create web sites on the fly with prompts.

Placing apart the clear downsides of delivery half-baked expertise as a production-ready product (which is tough to do), the angle I’m notably is analysis geared toward utilizing Generative AI (or GenAI) to output personalised interfaces. It’s wild as a result of it fully flips the best way we take into consideration UI design on its head. Somewhat than anticipating person wants and designing round them, GenAI sees the person wants and produces an interface custom-tailored to them. In a way, an internet site turns into a snowflake the place no two experiences with it are the identical.

Once more, it’s wild. I’m not right here to invest, opine, or preach on Generative UI Design (let’s name it GenUI for now). Simply unfastened notes that I’ll replace as I proceed studying about it.

Defining GenUI

Google Analysis (PDF):

Generative UI is a brand new modality the place the AI mannequin generates not solely content material, however all the person expertise. This ends in {custom} interactive experiences, together with wealthy formatting, photos, maps, audio and even simulations and video games, in response to any immediate (as a substitute of the extensively adopted “walls-of-text”).

NN/Group:

generative UI (genUI) is a person interface that’s dynamically generated in actual time by synthetic intelligence to offer an expertise personalized to suit the person’s wants and context.

UX Collective:

A Generative Consumer Interface (GenUI) is an interface that adapts to, or processes, context similar to inputs, directions, behaviors, and preferences via using generative AI fashions (e.g. LLMs) so as to improve the person expertise.

Put merely, a GenUI interface shows totally different parts, data, layouts, or types, based mostly on who’s utilizing it and what they want at that second.

Credit score: UX Collective

Generative vs. Predictive AI

It’s straightforward to dump “AI” into one large bucket, however it’s usually distinguished as two differing types: predictive and generative.

Predictive AI Generative AI
Inputs Makes use of smaller, extra focused datasets as enter information. (Smashing Journal) Educated on massive datasets containing thousands and thousands of pattern content material. (U.S. Congress, PDF)
Outputs Forecasts future occasions and outcomes. (IBM) New content material, together with audio, code, photos, textual content, simulations, and movies. (McKinsey)
Examples ChatGPT, Claude Sora, Suno, Cursor

So, once we’re speaking about GenAI, we’re speaking concerning the capability to create new supplies skilled on current supplies. And once we’re speaking particularly about GenUI, it’s about producing a person interface based mostly on what the AI is aware of concerning the person.

Accessibility

And I ought to word that what I’m speaking about right here is just not strictly GenUI in how we’ve outlined it as far as UI output that adapts to particular person person experiences, however fairly “growing” generated interfaces. These so-called AI web site builders don’t adapt to the person person, however it’s straightforward to see it heading in that course.

The factor I’m most all in favour of — involved with, frankly — is to what extent GenUI can reliably output experiences that cater to all customers, no matter impairment, be it aural, visible, bodily, and so forth. There are numerous totally different inputs to contemplate right here, and we’ve seen simply how terrible the early outcomes have been.

That final hyperlink is an enormous poke at Figma Websites. They’re straightforward to poke as a result of they made the biggest industrial push into GenUI-based net improvement. To their credit score (maybe?), they acquired the extreme pushback and determined to do one thing about it, saying updates and publishing a information for enhancing accessibility on Figma-generated websites. However even these have their limitations that take the time and recommendation appear much less helpful and extra about saving face.

Anyway. There are many different gamers to leap into the sport, notably WordPress, but in addition others like Vercel, Squarespace, Wix, GoDaddy, Lovable, and Reeady.

Some of us are extra optimistic than others that GenUI is just not solely able to producing accessible experiences, however will substitute accessibility practitioners altogether because the expertise evolves. Jakob Nielsen famously made that declare in 2024 which drew fierce criticism from the neighborhood. Nielsen walked that again a 12 months later, however not a lot.

I’m not even remotely certified to supply greatest practices, opine on the way forward for accessibility apply, or speculate on future developments and capabilities. However as I have a look at Google’s Folks + AI Guidebook, I see no point out in any respect of accessibility regardless of dripping with “human-centered” design rules.

Accessibility is a lagging consideration to the hype, a minimum of to me. That has to vary if GenUI is actually the “future” of net design and improvement.

Examples & Sources

Google has a repository of examples displaying how person enter can be utilized to render quite a lot of interfaces. Going a step additional is Google’s Undertaking Genie that payments itself as creating “interactive worlds” which can be “generated in real-time.” I couldn’t get an invitation to attempt it out, however perhaps you’ll be able to.

Along with that, Google has a GenUI SDK designed to combine into Flutter apps. So, yeah. Hook up with your LLM supplier and let it rip to create adaptive interfaces.

Thesys is one other one within the adaptive GenUI area. Copilot, too.

References

Related Articles

Latest Articles