ai2 Design System

Your agent writes the UI. This is the system it reads.

Design Tools

Open Source

Developer Tools

GitHub

Visit WebsiteSee on Product HuntGithub ⧉Twitter ⧉

Every design system is complete until you need a small outline button in a warning tone. Then you are writing custom CSS at midnight, and the system you adopted for consistency has become the thing making you inconsistent. I am Berkay. I designed products for 15 years, watched that happen on every team I worked with, and built ai2 so that button is a prop. WHAT THAT MEANS IN PRACTICE Every component carries a real variant x tone x size matrix. Not three variants and a shrug. Button alone is 5 x 6 x 10 = 300 combinations, all generated from one OKLCH token layer, all working in light and dark from a single source. You stop leaving the system. THE PART I CARE ABOUT MOST I work with coding agents every day, and they kept getting component APIs wrong. Not because the components were bad, but because nothing in a normal library is written for a machine to read. So I built the registry the other way round: machine-readable axes on every item, an llms.txt index, an llms-full.txt that returns every component's axes and dependencies in one request, and MCP so your agent installs and themes without you pasting commands. The human docs fall out of the same source. If your agent writes most of your UI now, this is the difference between it guessing and it knowing. FREE, MIT, TODAY npx shadcn@latest add @ai2/button 51 components. 307 styled variations if the plain set is too plain. 8 presets. An accent theme generator. An inspiration gallery of 67 real sites broken down into their tokens. A live extractor: give it a URL, get its design tokens back. No account, nothing time-limited, nothing crippled. THE PAID SIDE, PLAINLY Pro is $99 (going to $149) for one seat, Ultimate $249 (going to $399) for up to ten. One-time, lifetime updates, no subscription. The core stays MIT either way. Shipping today in Pro: 14 pricing blocks installable through the CLI, a Pro MCP registry your agent can authenticate against, and every Framer product I publish (Halcyon, Helio, Pulsar). Still in development, and marked that way on the pricing page instead of sold as done: premium themes, the full theme generator, a Figma kit with variables in both modes, and Vite / Base UI / Radix starters. Ultimate adds the Framer design system with tokens synced to the code side. Tailwind v4, radix-ui, React 19. v0.7.0, so it is early. Source: https://github.com/ai2design/ai2... I would rather have criticism than upvotes. Tell me the axis naming is wrong (variant / tone / size), or that a matrix this wide cannot stay maintainable. Those are the two things I am least sure about.