# How can AI agents reuse existing design tokens?

Source: https://saer.app/guides/ai-agents-reuse-design-tokens
Updated: 2026-10-22

**Short answer.** An agent reuses tokens when it knows they exist, knows what each one means, and is checked when it does not. Give it the resolved token list (name, role, value in each theme) rather than a config file it has to interpret, state one rule plainly (never write a raw value when a token exists), and scan its output for exact drift: a raw value identical to a token is always a mistake you can fix mechanically.

## Resolved, not raw

A token like `--content-brand` may be defined as `rgb(var(--content-brand) / <alpha-value>)` in a Tailwind config and resolve to different values in light and dark mode. An agent reading the config sees indirection; an agent given the resolved table sees `#b094e6` in dark and `#5227a5` in light, and can choose correctly.

## Roles beat values

Agents pick tokens by meaning. Names like `color-bg`, `fg-muted` or `verified` carry a role; names like `purple-500` do not. Where your tokens are named by value, add the role in the hand-over.

## Make reuse checkable

Exact drift is the cleanest signal there is: a hard-coded value string-identical to a declared token. Saer reports it with the token to use instead and every file it appears in.

Machine-readable summary on stdout:

```
$ saer scan . --json
```

## What Saer does about this today

- Colour tokens resolved across themes and modes, with exact drift and near-matches: in the beta.
- `system.json` with every token, its value per context and its derivation chain.

## Not built yet

- Agents other than Codex: `saer mcp` works with Claude Code and Cursor, but its benchmark so far measured Codex only.