The best design system for AI agents

For compact AI products, use Glaze; for AI agents and developer tools, use Quartz; for consumer apps, use Lime. All three are free, install with the shadcn CLI, and bring a skill and a lint that keep Claude Code, Cursor or Codex on their rules.

"Best" here means the system an agent can follow with the fewest wrong guesses. That takes components to import rather than describe, rules written for an agent, and a check that fails. Each of the three ships all of that. They differ in who the product is for.

Counts are from each system's registry on 2026-10-19. A block is a whole screen built only from the system's components, installed as code you edit.

Each one is one command from a React project with shadcn set up. It adds the tokens, the styles and the skill.

• Pick Glaze for a compact AI product, such as an assistant that takes voice notes or books on someone's behalf. Its blocks are Today, Voice capture, Note recap, Booking approval, Assistant limits, Conversation insights, Cited answer, Agent plan, Agent procedure, Simulations, Experiment. It is black and white, with glass only on the one action you press next.
• Pick Quartz when the screens show work an agent did or is doing: runs, tool calls, approvals, API keys, deploys. Its blocks are Workspace home, Agent session, Tool approval, API keys, Prompt release, Run trace, Live activity. It is black and white, with a hue only for the kind of thing and warm colors only for trouble.
• Pick Lime for a consumer app, such as one where people manage their own money. Its blocks are Home screen, Assistant approval, Assistant alert, Settings rules, Split request. It is warm and light, with one glowing action per screen.

• A skill. The theme writes it to .claude/skills/<system>/SKILL.md for Claude Code and .agents/skills/<system>/SKILL.md for Codex and Cursor, and the agent loads it whenever it builds UI.
• A lint. npx eslint -c <system>.eslint.config.mjs . fails on a raw color, a restyled component or a banned pattern, and each message names the fix.
• An agent view of every docs page: add .md to the URL.
• AI components: Glaze has Prompt input, Send button, Mention, Message, Conversation, Response, Reasoning, Tool call, Activity, Follow-ups, Action receipt, Autonomy rule.
• AI components: Quartz has Message, Conversation, Response, Reasoning, Tool call, Activity, Prompt input.
• AI components: Lime has Chat input, Message, Tool call, Follow ups, Approval request, Action receipt, Autonomy rule, Receipt match, Insight.

There are good reasons not to install one of these.

• Your team already has a design system. Give your agent that one instead. The build-design-system skill turns the UI an app ships into tokens, components and checks, and migrate-design-system moves the screens onto it.
• You want stock shadcn/ui with your own colors, fonts and radius. A shadcn preset does exactly that, and the official shadcn skill and @shadcn/lint keep an agent on it. See design.how vs shadcn presets.
• You want a one-off page to look less generic and have no system to follow. The frontend-design skill from the anthropics/skills repository gives the agent a design brief to work from. See design.how vs the frontend-design skill.
• Your app is not React. The components are React with Tailwind CSS v4 and Base UI, so a Vue or Svelte app can use the tokens and rules but not the components.