State of AI in Design Systems — July 2026

A field survey of how 20 actively maintained open-source design systems make themselves legible to machines, plus the six platforms around them.

For each system: what it ships so coding agents can build with it (MCP servers, agent skills, llms.txt, editor rules, component registries) and the techniques that keep a model using real components and tokens instead of inventing its own. Both directions are covered: AI for consumption (agents building UIs with the system) and AI for building (the team using AI to maintain the system itself).

Read it: https://state-of-ai-in-design-systems.netlify.app

20 design systems · 6 platforms · 179 affordances · 157 coercion techniques · every snippet linked to its source. Data gathered 26–28 July 2026.

Using it

As a reader, start at the overview: the findings, and all 20 systems against each other at once. Every claim links to the page it came from. Open the link before you cite it. The data is a snapshot and the underlying systems keep moving.

With an AI tool, point one at the report and ask it something. Every route has a markdown twin and every record has a JSON twin, and /llms.txt indexes all of them with measured file sizes so an agent can budget context before fetching. Paste this into any chat window and the answers come back grounded in the records, with the source link on each:

Read https://state-of-ai-in-design-systems.netlify.app/llms.txt, then answer from
what you read there and cite the source_url on each record. My question: …

Connecting it costs one more step and pays for itself. The server is public, read-only and unauthenticated:

claude mcp add --transport http --scope user ds-state-of-ai https://state-of-ai-in-design-systems.netlify.app/mcp

That installs the prompts the server ships, and build-my-roadmap is the one to run: tell it what your design system has and hasn’t got, and it hands back the gaps in the order worth closing them, carrying the record each one came from so you can read what somebody else did before committing to it. Setup for every other client: /ai.

As a contributor, the report is wrong in places and corrections are welcome. CONTRIBUTING.md covers how; AGENTS.md is the same ground written for agents. Filing an issue with a link in it is a complete contribution. You don’t need to clone anything.

How it’s built

data/*.json is the only place facts are written. Everything published is derived from it by one command:

data/*.json  ──▶ validate_data.mjs ──▶ every record against schema/*.json,
                        │               or the build stops here
                        ▼
                 build_dashboard.py ──▶ dashboard/{index,artifact}.html, data.js
                        │                build/{payload,routes}.json
                        ▼
                   build_md.py ──▶ 62 × .md, 33 × .json, llms.txt + slices,
                        │          public SQLite, sitemap, edge route table,
                        │          build/{md-map,ai-page-content}.json
                        ▼
          build_dashboard.py --final ──▶ same HTML, now carrying the /ai copy
                        ▼
                  prerender.mjs ──▶ dashboard/<route>/index.html × 29

Validation runs first and on the deploy, not only in CI, so a record with a bad enum or a missing source_url fails the build instead of reaching the site, the mirrors, the SQLite export and /mcp.