Most design systems are a look that a team agreed on. People can read a look. AI cannot. Agentic turns the look into structure, so AI can build with it and the result still looks like you.
What it is
Nothing yet, or the system you have
The shell. Standard structure, filled with your colours, type and spacing
A system AI can build from
- A foundation
- Tokens, components and rules, written down so people and AI read them the same way.
- A shell
- The structure is always the same. What goes inside is yours: your colours, your type, your spacing.
- A pipeline
- Start from nothing, or bring the system you have. A system AI can build from comes out.
Standard structure. Your identity.
What AI can do with it
With a person always in the loop, AI can:
Build with it
- Build components and screens that follow the system.
- Suggest interface copy in the system's voice.
- Recognise a template and build new screens from it.
Keep it right
- Audit a screen against the system and say what breaks the rules.
- Keep documentation and code in step when something changes.
Two ways to start
AI does most of the work. A designer makes the judgement calls.
Starting from zero
1
Tokens first
Every colour, size and space gets a name and a job. Everything else is built on this.
2
Components and rules
Built on the tokens, with how and when to use each one.
3
AI context
The guidance that lets AI read the system and follow it.
Starting from a system you have
1
Read
We look at how your design is really used, not at what things are named.
2
Map
Each colour, component and rule is placed into the shell by the job it does.
3
Theme
Five settings carry your identity: brand colour, neutral colours, corner radius, spacing and type.
4
Check
Contrast and accessibility are tested, and a designer decides every unclear case.
Why it changes fast
Every value lives in one place and everything else points to it. Change the brand colour once, at the base, and every button, link and state follows.
Brand colour
Buttons, links and states follow.
color/brand/500
Corner radius
Cards, inputs and buttons follow.
radius/base
Heading typeface
Every heading style follows.
font-family/display
Change a few settings and the shell becomes your system. The structure underneath does not change.
What you get
Documentation and code, delivered as files in a repository your team owns.
your-system/
- tokens/
- components/
- docs/rules
- docs/specs
- checks/
- llms.txt
- Foundation
- Tokens, components, states and patterns, as working code you can open and try.
- Rules
- Usage, accessibility and product conventions, with the reason behind each decision written down.
- AI context
- An entry file that tells an AI agent what to read first, and a spec for every component that it can read.
- Checks
- Scripts that warn when tokens, documentation or contrast drift from the system.
A new team member, or a new AI agent, can open the repository and start working.
Case study: Accura
Accura is quality management software for regulated companies, made by a startup. Teams use it to control their documents, train their staff and follow quality issues through to the fix. The product was already built. It needed a clearer experience, and a system that would keep it consistent as it grew.
| What we did |
|---|
1Audited the flowsWe went through the main journeys and marked where people would lose their way. |
2Built its design systemAgentic's shell, themed to Accura: its own green, rounder corners and its own heading typeface. Parts the product needed, such as a stepper for multi-stage processes, went into the system first, then into the screens. |
3Reworked the flows and their logicNot only new screens: for every step we decided what it allows, who can do it, and what happens when something is missing or goes wrong. |
What got stricter
One signature step for every approval
Approve, reject and cancel use the same electronic signature dialog in every module, and one person cannot sign for two roles.
No skipping ahead
A record cannot be signed until the steps before it are done, and every action goes into one shared audit trail.
The cases nobody draws
One empty state across all eleven lists, with its own message when a filter finds nothing. Overdue shows on the due date itself. A locked record folds away what can no longer be changed.
Eight modules on one system in twelve days.
Accura became its own system by changing three of the five settings. The structure underneath did not change.
