--- title: "The 19 design systems" description: "Every system in the study with its AI maturity, affordance count and technique count." url: "https://state-of-ai-in-design-systems.netlify.app/systems.md" canonical: "https://state-of-ai-in-design-systems.netlify.app/systems" type: "view" id: "systems" system_count: 19 data_collected: "2026-07-26/27" generated: "2026-07-28T06:01:02Z" report: "State of AI in Design Systems — July 2026" author: "Kaelig Deloumeau-Prigent" license: "CC-BY-4.0" citation: "Deloumeau-Prigent, K. (2026). State of AI in Design Systems. https://state-of-ai-in-design-systems.netlify.app/systems.md" --- > Snapshot of 2026-07-27. Every claim below links to the source URL it was taken from. Check the source before citing. # The 19 design systems One line each, alphabetical by record id. Open a record for the full detail: affordances with verbatim snippets, techniques, platform integrations, gaps and sources. Each has a JSON twin with the same content typed. | System | Maturity | Affordances | Techniques | Record | JSON | |---|---|---:|---:|---|---| | Ant Design | ai-native | 10 | 8 | https://state-of-ai-in-design-systems.netlify.app/systems/ant-design.md | https://state-of-ai-in-design-systems.netlify.app/systems/ant-design.json | | Atlassian Design System | ai-native | 8 | 8 | https://state-of-ai-in-design-systems.netlify.app/systems/atlassian-design-system.md | https://state-of-ai-in-design-systems.netlify.app/systems/atlassian-design-system.json | | Carbon Design System | ai-native | 10 | 8 | https://state-of-ai-in-design-systems.netlify.app/systems/carbon-design-system.md | https://state-of-ai-in-design-systems.netlify.app/systems/carbon-design-system.json | | Chakra UI | ai-native | 8 | 8 | https://state-of-ai-in-design-systems.netlify.app/systems/chakra-ui.md | https://state-of-ai-in-design-systems.netlify.app/systems/chakra-ui.json | | daisyUI | ai-native | 9 | 8 | https://state-of-ai-in-design-systems.netlify.app/systems/daisyui.md | https://state-of-ai-in-design-systems.netlify.app/systems/daisyui.json | | HeroUI | ai-native | 10 | 8 | https://state-of-ai-in-design-systems.netlify.app/systems/heroui.md | https://state-of-ai-in-design-systems.netlify.app/systems/heroui.json | | Nuxt UI | ai-native | 10 | 8 | https://state-of-ai-in-design-systems.netlify.app/systems/nuxt-ui.md | https://state-of-ai-in-design-systems.netlify.app/systems/nuxt-ui.json | | PatternFly | ai-native | 10 | 8 | https://state-of-ai-in-design-systems.netlify.app/systems/patternfly.md | https://state-of-ai-in-design-systems.netlify.app/systems/patternfly.json | | Primer | ai-native | 10 | 8 | https://state-of-ai-in-design-systems.netlify.app/systems/primer-github.md | https://state-of-ai-in-design-systems.netlify.app/systems/primer-github.json | | React Spectrum / Spectrum 2 (S2) | ai-native | 10 | 8 | https://state-of-ai-in-design-systems.netlify.app/systems/react-spectrum-s2.md | https://state-of-ai-in-design-systems.netlify.app/systems/react-spectrum-s2.json | | Salesforce Lightning Design System | ai-native | 10 | 8 | https://state-of-ai-in-design-systems.netlify.app/systems/salesforce-slds.md | https://state-of-ai-in-design-systems.netlify.app/systems/salesforce-slds.json | | shadcn/ui | ai-native | 10 | 8 | https://state-of-ai-in-design-systems.netlify.app/systems/shadcn-ui.md | https://state-of-ai-in-design-systems.netlify.app/systems/shadcn-ui.json | | Shopify Polaris | ai-native | 7 | 8 | https://state-of-ai-in-design-systems.netlify.app/systems/shopify-polaris.md | https://state-of-ai-in-design-systems.netlify.app/systems/shopify-polaris.json | | Cloudscape Design System | invested | 8 | 7 | https://state-of-ai-in-design-systems.netlify.app/systems/cloudscape-design-system.md | https://state-of-ai-in-design-systems.netlify.app/systems/cloudscape-design-system.json | | Mantine | invested | 9 | 7 | https://state-of-ai-in-design-systems.netlify.app/systems/mantine.md | https://state-of-ai-in-design-systems.netlify.app/systems/mantine.json | | Material UI (MUI) | invested | 8 | 8 | https://state-of-ai-in-design-systems.netlify.app/systems/material-ui.md | https://state-of-ai-in-design-systems.netlify.app/systems/material-ui.json | | Microsoft Fluent UI | invested | 8 | 8 | https://state-of-ai-in-design-systems.netlify.app/systems/fluent-ui-microsoft.md | https://state-of-ai-in-design-systems.netlify.app/systems/fluent-ui-microsoft.json | | Nord Design System | invested | 7 | 6 | https://state-of-ai-in-design-systems.netlify.app/systems/nord-design-system.md | https://state-of-ai-in-design-systems.netlify.app/systems/nord-design-system.json | | U.S. Web Design System (USWDS) | emerging | 6 | 8 | https://state-of-ai-in-design-systems.netlify.app/systems/uswds.md | https://state-of-ai-in-design-systems.netlify.app/systems/uswds.json | ## Summaries ### Ant Design ai-native · Ant Group · 10 affordances · 8 techniques Ant Design is one of the most AI-invested open-source design systems as of mid-2026. Full record: https://state-of-ai-in-design-systems.netlify.app/systems/ant-design.md ### Atlassian Design System ai-native · Atlassian · 8 affordances · 8 techniques ADS is one of the most deliberately AI-engineered design systems in the study: an official MCP server shipped both hosted (https://mcp.atlassian.com/v1/ads/public/mcp) and as npm stdio (@atlaskit/ads-mcp, v1.7.1 published the day of this research), a topic-split llms.txt suite, a public DESIGN.md portable… Full record: https://state-of-ai-in-design-systems.netlify.app/systems/atlassian-design-system.md ### Carbon Design System ai-native · IBM · 10 affordances · 8 techniques Carbon is the most complete AI-affordance stack of any open-source design system I’ve surveyed, and it is built on both sides of the fence. Full record: https://state-of-ai-in-design-systems.netlify.app/systems/carbon-design-system.md ### Chakra UI ai-native · Chakra UI (Segun Adebayo / Chakra Systems) · 8 affordances · 8 techniques Chakra UI is one of the most AI-invested open-source React component libraries: it ships an official MCP server (@chakra-ui/react-mcp, 10 tools, developed in-tree at apps/mcp), six curated llms.txt variants sliced by concern (components / styling / theming / charts / v3-migration) so agents with small context windows… Full record: https://state-of-ai-in-design-systems.netlify.app/systems/chakra-ui.md ### daisyUI ai-native · Saadeghi (open source) · 9 affordances · 8 techniques daisyUI is the most AI-forward system in this study outside of shadcn/ui, and the only one that has turned AI consumption into a commercial product line. Full record: https://state-of-ai-in-design-systems.netlify.app/systems/daisyui.md ### HeroUI ai-native · HeroUI Inc · 10 affordances · 8 techniques HeroUI (formerly NextUI) is a 30k-star React component library, now shipping v3 on Tailwind CSS v4 + React Aria Components. Full record: https://state-of-ai-in-design-systems.netlify.app/systems/heroui.md ### Nuxt UI ai-native · NuxtLabs / Nuxt · 10 affordances · 8 techniques Nuxt UI v4 is one of the most thoroughly AI-instrumented open-source component libraries in the survey: it ships an official streamable-HTTP MCP server (https://ui.nuxt.com/mcp, 12 tools + 5 resources + 3 prompts, built on @nuxtjs/mcp-toolkit inside the docs Nuxt app), an official agent Skill (skills/nuxt-ui/ with a… Full record: https://state-of-ai-in-design-systems.netlify.app/systems/nuxt-ui.md ### PatternFly ai-native · Red Hat · 10 affordances · 8 techniques PatternFly runs one of the most engineered AI programs of any open design system, but almost none of it lives in patternfly-org. Full record: https://state-of-ai-in-design-systems.netlify.app/systems/patternfly.md ### Primer ai-native · GitHub · 10 affordances · 8 techniques Primer is GitHub’s design system, and it is one of the most thoroughly AI-instrumented systems in the study, in both directions. Full record: https://state-of-ai-in-design-systems.netlify.app/systems/primer-github.md ### React Spectrum / Spectrum 2 (S2) ai-native · Adobe · 10 affordances · 8 techniques React Spectrum S2 is one of the most AI-invested public design systems as of mid-2026. Full record: https://state-of-ai-in-design-systems.netlify.app/systems/react-spectrum-s2.md ### Salesforce Lightning Design System ai-native · Salesforce · 10 affordances · 8 techniques SLDS is one of the most aggressively AI-instrumented design systems in the study, but almost none of that instrumentation lives in the design system’s own repo. Full record: https://state-of-ai-in-design-systems.netlify.app/systems/salesforce-slds.md ### shadcn/ui ai-native · shadcn (Vercel) · 10 affordances · 8 techniques shadcn/ui is the reference case for an AI-native design system: “AI-Ready — Open code for LLMs to read, understand, and improve” is one of its five stated founding principles, and the whole distribution model (flat-file registry JSON + CLI + MCP server) is machine-consumable by construction. Full record: https://state-of-ai-in-design-systems.netlify.app/systems/shadcn-ui.md ### Shopify Polaris ai-native · Shopify · 7 affordances · 8 techniques Polaris is the most instructive split-personality case in this study. Full record: https://state-of-ai-in-design-systems.netlify.app/systems/shopify-polaris.md ### Cloudscape Design System invested · Amazon Web Services (AWS) · 8 affordances · 7 techniques Cloudscape’s AI story is almost entirely on the CONSUMPTION side, and it is built as a documentation-pipeline problem rather than a tooling problem. Full record: https://state-of-ai-in-design-systems.netlify.app/systems/cloudscape-design-system.md ### Mantine invested · Mantine (mantinedev, maintained by Vitaly Rtishchev) · 9 affordances · 7 techniques Mantine is one of the few open-source React component libraries that ships a first-party, versioned AI surface: an official @mantine/mcp-server npm package released in lockstep with the library (9.5.0 on 2026-07-27), a machine-readable static MCP data registry at mantine.dev/mcp/index.json, llms.txt plus a 4.2MB… Full record: https://state-of-ai-in-design-systems.netlify.app/systems/mantine.md ### Material UI (MUI) invested · MUI · 8 affordances · 8 techniques Material UI is one of the most heavily invested design systems in AI affordances, on both sides of the fence. Full record: https://state-of-ai-in-design-systems.netlify.app/systems/material-ui.md ### Microsoft Fluent UI invested · Microsoft · 8 affordances · 8 techniques Fluent UI’s AI story is lopsided. The React monorepo has one of the most sophisticated builder-side agent setups of any major design system: a root AGENTS.md with numbered “never violate” rules, CLAUDE.md symlinked to it, .agents/skills/ + .claude/skills/ with nine executable slash-command skills (scaffolding, token… Full record: https://state-of-ai-in-design-systems.netlify.app/systems/fluent-ui-microsoft.md ### Nord Design System invested · Nordhealth · 7 affordances · 6 techniques Nord is Nordhealth’s healthcare (veterinary/therapy) design system: 156+ Lit-based web components, CSS custom-property tokens, Tailwind CSS v4 integration with an n: variant prefix, two brands with dark and high-contrast variants. Full record: https://state-of-ai-in-design-systems.netlify.app/systems/nord-design-system.md ### U.S. Web Design System (USWDS) emerging · U.S. General Services Administration (GSA) / Technology Transformation Services · 6 affordances · 8 techniques USWDS is the sharpest public-sector contrast case in this study: a heavily-used, actively-committed federal design system with essentially zero consumer-facing AI affordances and exactly one builder-facing one. Full record: https://state-of-ai-in-design-systems.netlify.app/systems/uswds.md --- Generated 2026-07-28T06:01:02Z from the State of AI in Design Systems — July 2026 dataset. Index of every machine-readable file: https://state-of-ai-in-design-systems.netlify.app/llms.txt. JSON, SQLite and the MCP endpoint: https://state-of-ai-in-design-systems.netlify.app/ai.md. Kaelig Deloumeau-Prigent, CC BY 4.0.