Components the model can use
A set of building blocks, such as text, cards, tables, steppers, file chips, charts and forms, each with a clear purpose so a model can pick the right one.
Service · our specialty
Dynamic design systems
A dynamic design system is a design system built for AI interfaces. In an AI product the model decides at run time what to show, so the system defines the components it can use, the states each one needs, and the rules for what it can and cannot show. We design them, document them and hand them to your engineers ready to build.
When you need it
When to bring us in for dynamic design systems
- Your AI returns text, but people need tables, cards, charts and forms.
- Every new AI feature gets designed from scratch and looks different from the last.
- Your engineers ask what to show when the model is slow, unsure or wrong.
- You need one system that serves both English and Arabic.
What we design
What dynamic design systems covers
States for every component
Loading, streaming, uncertain, empty, failed and done, designed for each component instead of left to chance.
Rules
What the model may show, where, and in what combination. The rules keep generated screens on brand and usable.
Tokens
Colour, type, spacing, radius, elevation and motion as tokens, so design and code use the same values.
Two directions
Components built with logical properties, start and end rather than left and right, so English and Arabic come from one library.
A specification engineers can use
Each component with its props, states and examples, in a format your engineers or your model's tooling can read.
Deliverables
What you get
- A Figma library: tokens, components, states and patterns
- A written specification for each component and rule
- An answer shape the model returns, which the front end renders into components
- Coded components, when we build them with your team
- A working example: this website's ask bar is built on one
How it runs
How we run dynamic design systems projects
- 01
Audit
We collect what the product shows today and what the model returns, and find the repeated patterns.
- 02
Define
We name the components, their states and the rules, and agree them with your engineers.
- 03
Design and test
We design the library and test generated screens with real users.
- 04
Build and document
We document everything and, if you want, build the components in code.
The same four steps run every project. Read the full process.
Related
Read next
FAQ
Questions about dynamic design systems
What is a dynamic design system?
A design system made for AI interfaces. It defines the components a model can use, the states each one needs, such as loading, streaming, uncertain and failed, and the rules for what the model can and cannot show.
How is it different from a normal design system?
A normal design system assumes a designer places every component. In a dynamic one the model places some of them at run time, so the system also needs states for uncertain and partial results, and rules the model can follow.
Do we need one if our AI only returns text?
Often yes. Most AI products start with text and then need tables, cards or forms because text is hard to act on. Defining those components early saves redesigning every feature later.
Is there an example we can try?
Yes. The ask bar at the bottom of this site answers with components such as case cards and service lists, chosen per question. It runs on a small dynamic design system.
Talk to us about dynamic design systems.
We reply by email to set up a call. Most projects start with a short conversation and a scoped proposal.