The Agent Needs a Vocabulary

Ask an agent for a settings page and it will build one. It will look fine. It will also use a gray that is close to, but not quite, the gray in the rest of the product, a button with a 10px radius where every other button has 8, and a modal written from scratch because it never found the one you already have. Each detail is small. Together, they make the page look like it came from a different company.

A team of people shares memory. Someone remembers that we already have a date picker, or that we stopped using that shade of blue last year. An agent has none of that. Every session starts from the code it can see and the patterns it was trained on. When the codebase does not give it an answer, it uses the internet’s.

That changes what a design system is for. It used to be a library people could choose to use. Now it is the vocabulary the agent composes from. If that vocabulary is small, named, and easy to find, the agent builds with it. If it is incomplete, or the rules live in a Figma file the agent cannot read, it improvises. At agent speed, that improvising adds up in weeks, not years.

Four things help most. Tokens instead of raw values, so there is no near-gray to pick. Components whose names and props explain themselves at the call site: <Button variant="danger">, not a wrapper that hides three layers of styling. Usage rules written in the repository, next to the code, where the agent reads them: when to use a dialog instead of a drawer, what an empty state should contain. And a lint rule that fails when anyone, human or agent, writes a hex code. A rule the build enforces beats a guideline the agent might not load.

None of this replaces design. A design system encodes decisions somebody had to make: what the product feels like, which patterns exist, which ones we refuse. The agent can apply those decisions. Someone still has to make them.

I would start with the last few UI changes an agent made and list every value or component it invented instead of reusing. Each item is a gap: a missing token, an undocumented component, a rule nobody wrote down. Fill the one that shows up most often, then run the same prompt again and see what it reuses.