A design system written only for people leaves a coding agent guessing. An agentic one ships the rules, catalog, examples and checks the agent needs. Here is what that means, and how Once UI does it.
Ask a coding agent to build a settings page with your component library and it will. The page compiles, the buttons are your buttons, and it still looks slightly wrong: a padding of 18 where your scale says 16 or 24, a grey that isn't in the palette, a custom div with a border where a Card already exists.The agent didn't misbehave. It started from zero, read only what was in front of it, and filled every gap with a reasonable guess. A design system written for people expects you to learn its conventions over time. An agent never gets that time.
The short definition
An agentic design system is a design system that a coding agent can use as well as a person can. Next to the components and tokens, it ships the context an agent needs, in a form it can read in a few steps, and a way to check what the agent wrote.The components themselves can be ordinary React components. What changes is everything around them.
What it ships besides components
Rules the agent can hold in context. The conventions a senior designer would explain in a review, written as a short file the agent loads before any UI task: which component to reach for, which props replace custom CSS, what never to write.A catalog to choose from. A machine-readable list of every component and what it is for, so the agent picks a Dialog by purpose instead of inventing one.Tokens, not values. Spacing, colour, radius and type as named tokens. An agent that writes padding="24" and onBackground="neutral-weak" can't drift off the scale, and a theme change still reaches every screen it built.Examples for the whole task. Agents copy structure well. A reviewed example of a pricing page or a dashboard shows how the parts fit together, which a props table never does.A check after the code is written. A validator that reads the generated file and flags props that don't exist, raw HTML where a component belongs and wrong imports, before a person has to review it.Instructions where agents look.AGENTS.md, CLAUDE.md and editor rules inside the project, so the agent finds all of the above without being told every session.
How Once UI does it
Once UI ships all of this inside the npm package, under ai/. A manifest lists the files. A compact rules file covers layout, tokens and the mistakes agents make most. A catalog describes every component by purpose. Task bundles cover the screens people build most (a hero, pricing, settings, a dashboard, chat, auth and more), and each bundle carries every component, type and gotcha that task needs, so the agent can write from one read.
Two commands connect a project to it:
The first writes the harness section into AGENTS.md, CLAUDE.md and a Cursor rule. The second checks a file the agent wrote.
An agentic design system doesn't replace taste. It carries decisions someone made once (the scale, the palette, the components, the layout patterns) so an agent can apply them consistently. Deciding what the product should be, and how it should feel, is still the job of the people building it.
