A Framework for AI-Native Design
I’ve been building UIs for 25 years — implementing design systems, not designing them. What follows is what that vantage point reveals.
Design systems today are component libraries with visual tokens. They handle buttons, cards, theming, accessibility checklists. They’re good at it. But they were built for interfaces where you know what’s on the screen before the screen renders. AI breaks that assumption.
A fair caveat: not all of these shifts are new. Designing for spectrums instead of states, building truly adaptive layout, baking accessibility into architecture — good designers have aspired to these things for decades. Bill Buxton has been saying for years that what matters is designing what happens between states, not the states themselves. The technology and the economics never quite caught up to the ambition. AI is the forcing function. It doesn’t invent these needs — it removes every excuse for not addressing them. The dimensions where design systems were “good enough” are now the dimensions where they’re visibly behind.
Here’s why I think this matters: computer interfaces are already mostly awful for normal people. Ads, paywalls, dark patterns, and hostile complexity have made the everyday web an obstacle course. AI doesn’t automatically fix that. If the design layer doesn’t keep up, it makes it worse — agents speaking agent-talk, interfaces optimized for machine efficiency instead of human understanding, people reduced to reading at a first-grade level and hoping they’re being led somewhere good. The design work is what brings humans along. Without it, we build a world that’s faster and more capable but harder for people to navigate, trust, and enjoy.
Here are eight shifts I keep seeing. I think they matter. I’ve started scoring real systems against them. If you see a dimension I’m missing — or think I’ve scored one wrong — that’s the whole point. Let me know.
The Eight Dimensions
Eight from→to shifts in what design systems need to handle as AI enters the picture. Not laws — observations from building this stuff for a long time.
| # | Shift | What changes |
|---|---|---|
| 1 | Components → Conversations | Design systems handle buttons and cards. AI interfaces need turn choreography — input, processing, response, confirmation as a first-class pattern. |
| 2 | States → Continuity | Binary toggles don’t work when every value is a probability. Visual properties need to be continuous and data-driven, not switched. |
| 3 | Predictable → Uncertain Layout | Traditional layout knows the content shape ahead of time. AI output is uncertain — length, format, whether it arrives at all. Layout needs to handle the unknown. |
| 4 | Canned → Adaptive Motion | Pre-baked animations play the same regardless of context. Adaptive motion responds to live data — confidence drives visual treatment, streaming drives progressive reveal. |
| 5 | Compliance → Infrastructure | WCAG checklist per component isn’t enough when AI generates content dynamically. Accessibility needs to be system-level architecture — focus management, live regions, dynamic content announcement across unknown DOM trees. |
| 6 | Brand Expression → Trust Expression | Design systems have a rich vocabulary for brand. They have zero vocabulary for epistemic state. If your system can express “primary button” but can’t express “I’m 70% sure about this,” it’s not ready for AI. |
| 7 | Screen → Ambient | Design systems assume a rectangle. AI interfaces live in voice, wearables, notifications, background agents, and contexts where there’s no screen at all. |
| 8 | Docs → Guardrails | Design systems ship documentation that humans read. AI coding tools need machine-readable behavioral specs — the design system as a contract that constrains what generated code can do. |
Each dimension links to its full write-up below.
How We Score
The interesting question isn’t whether a design system is “AI-ready.” It’s where it’s ready — and where it’s asleep.
Each dimension is scored 1–10. The scale is simple:
| Score | What it means |
|---|---|
| 1–2 | No support. The system doesn’t address this dimension. |
| 3–4 | Building blocks exist but no coherent vision. Developers assemble it themselves. |
| 5–6 | Intentional support with gaps. Real features, incomplete coverage. |
| 7–8 | Strong support. The dimension is a design priority with real primitives. |
| 9–10 | Leading. Defines the state of the art. |
Eight dimensions, ten points each, eighty total. No design system is close to 80. But the total isn’t the point — the shape is. Where does a system lead? Where has it not started?
The scores come from code-level analysis — what’s actually in the source, not what’s in the marketing materials. Each dimension page includes its own scoring rubric — what a 3 looks like, what pushes it to a 7, what a 9 would require.
The Shifts
1. Components → Conversations
Design systems ship buttons and cards. AI interfaces are organized around turns — input, processing, response, confirmation — which no major design system treats as a first-class primitive yet. Every team building a chat UI invents that layer from scratch. And turns won’t stay in chat boxes; the next move is ambient.
2. States → Continuity
Components have states. AI works in probabilities. A response isn’t loading or loaded — it’s streaming. Confidence isn’t a boolean — it’s a gradient. A design system that can only express these as discrete switches is lying about what’s happening underneath. Continuity means visual properties driven by continuous data, not toggled by events.
3. Predictable → Uncertain Layout
Traditional layout is a contract: the designer knows what’s going in the box. AI breaks the contract. You don’t know if the response will be ten words or a thousand, prose or code, with citations or without. Layout has to negotiate with content it hasn’t met yet — restructuring, not just resizing.
4. Canned → Adaptive Motion
Open any AI product and watch the loading state. It’s a spinner — the same spinner, at the same speed, whether the model takes 200ms or 30 seconds. Canned motion, played identically every time, regardless of context. Adaptive motion responds to live data: confidence drives visual treatment, streaming drives reveal cadence. The design artifact has to be the runtime artifact.
5. Compliance → Infrastructure
A per-component WCAG checklist isn’t enough when AI streams content into a changing DOM. Focus management and live regions become system-level problems no component can solve alone. And the accessibility tree isn’t just for screen readers anymore — it’s how AI agents read your interface. If your accessibility tree is garbage, your interface is invisible to the fastest-growing category of users on the web.
6. Brand Expression → Trust Expression
Design systems have a sophisticated vocabulary for brand. They have zero vocabulary for what the AI knows. No tokens for confidence, no components for citations, no visual grammar that distinguishes a verified source from a guess. In a consumer chatbot, that gap is annoying. In healthcare, finance, or legal, it’s disqualifying.
7. Screen → Ambient
Design systems assume a rectangle. AI doesn’t live on a rectangle — it lives in voice assistants, smartwatch notifications, agent-to-agent handoffs, background processes, car dashboards, and contexts where there’s no screen at all. The system needs to encode behavior across modalities, not just appearance across screen sizes.
8. Docs → Guardrails
Design systems ship documentation for humans to read, internalize, and apply through judgment. AI agents follow patterns or guess; they don’t exercise judgment. The shape of guardrails for AI-generated UI is still being figured out — skills, evaluators, and auditor agents are early candidates. Every AI-generated component without guardrails is a brand violation waiting to happen.
Where This Goes
Each of these dimensions has more to say than one section on a page can hold. The plan is to give the meatier ones their own deep-dive pages — Trust Expression is first, because it’s the gap that affects every AI product in enterprise. The system pages will score Fluent and Material in detail, with code-level evidence and quick wins for each — coming as each is written.
This framework is a starting point. The dimensions might be incomplete. The scores are debatable. If you’re building something that touches one of these shifts — or if you’ve found a tool or pattern that moves the needle — I want to hear about it.
Thanks
This framework is sharper because of the people who pushed back on it, pressure-tested the ideas, and shared what they’re seeing in their own work.
Arturo Toledo — for the Buxton reminder, the generative UI reality check, and the spectrums-over-personas insight that validated Dimension 2 from a completely different angle. Arturo’s team also published the Pixelspace Design and Product Manifesto — a more visionary take on where AI product design is headed. If the framework page is where we are now, their manifesto is where this all lands in a few years.
