One Design System, Every Agent.

Ask five coding agents for five screens and you will get five dialects. Each one is locally reasonable — a sensible button, a plausible card — and the sum is a product that looks like it was built by five strangers, because it was. The failure mode is not ugliness. It is genericness: many accents, decorative chrome, a fourth font size where the third would do.

Human teams solved this with design systems, and the interesting discovery of the last two months is that agents take to them better than humans do — if the system is written so it can be enforced rather than admired. The studio now treats a design system as a first-class, configurable surface: point it at a bundle and every agent that touches your UI builds against it.

What a system an agent can be held to looks like

The bundle the studio reads is deliberately boring: a manifest, a token source, a principles file, and one directory per component. What makes it work for agents is that every layer is checkable.

• Tokens carry meaning, not just values. Every semantic token declares a role, where to use it, and where not to — an agent picks bg.selected because the metadata says selection, not because the hex looked right. Consumers style with --sem-* variables only; the raw ramps are plumbing.
• The principles file quantifies restraint. Not "be minimal" but ceilings a script can count: one accent per view, three font sizes, two radii, one animation at a time, nothing readable below 12px. Where a human reviewer would say "this feels busy", the gate says "4 > 3".
• A lint gate is the contribution contract. A raw hex in component CSS fails. An off-scale spacing value fails. A token without semantic metadata fails. The agent's work is done when the lint exits 0 — the same definition of done a human contributor gets.

The gallery is honest about what does not exist

Five of the thirty-five components in the system are placeholders — badge, checkbox, combobox, empty-state, table. Their cards say so, and each names the backlog item that will build it. That is not a gap in the demo; it is the point. The design system participates in the same plan-build-review loop as the code: a missing component is a backlog item with an owner, not a surprise an agent improvises around at 2am.

We hold our own website to it

Every interactive product replica on this site — the sprint board in the hero, the backlog panel, the phone, the browser above — is measured against the same ceilings by a script in this repo. When the system first landed, the twins failed it on measurable counts: seventeen font sizes against a ceiling of three, hundreds of text runs below the 12px floor, twelve radii against a ceiling of two. The sweep that followed was a re-typing, not a redesign — which is the design system working exactly as intended: the anatomy was right, the dialect had drifted.

The design system ships with the studio today and is on its way to the marketplace as the Design System Kit — the listing already runs the live browser instead of a screenshot. If you want the deeper mechanics, the bundle's own principles file is the authority, and it is written to be read.