Design System AI MCP

Chat

Hi! Ask me anything about the design system — tokens, components, colors, spacing, or accessibility. I'll query the live MCP server to give you accurate answers.

Live Preview

✦
Generated UI will appear here.
Try a prompt like "Create a login form" to get started.
▯
Loading components…

Design System Manager

Load your own design system, generate one from a website, or export what's currently active. Tokens, components, themes, style guide, and more — all manageable here. MCP tools always reflect the active data.

⬆

Import Design System

Load a design system JSON file — replace tokens, components, themes, style guide, icons, or all sections at once. MCP tools reflect the new data immediately.

✶

Generate from Website

Enter a public website URL to extract its design tokens and auto-generate a matching design system. The AI infers colors, typography, spacing, and more from the live page.

⬡

View Schema

Browse the expected JSON structure for any data type — design system, tokens, components, themes, style guide, and icons. Useful for authoring or validating files before importing.

⬇

Export Design System

Download the currently active design system as a JSON file. Includes all loaded sections: tokens, components, themes, style guide, icons, and more.

⚠

Reset to Defaults

Restore all design system data to the bundled defaults. Any imported or generated data will be discarded. This cannot be undone.

Agents

Inspect each agent's role, MCP tools, model settings, and system instructions.

Loading agent info…

Scenarios & Evals

Watch agents work through real design-system requests — then run structured evaluations to measure quality and grounding.

MCP — Model Context Protocol

A live, queryable contract between your design system and the AI tools your team uses every day.

Why MCP?

When you ask an AI to build UI, it guesses. It invents token names, uses hardcoded hex values, and ignores your component library. You can paste docs into the prompt — but those docs go stale the moment your system changes, and large files eat your context window.

The Model Context Protocol is an open standard that lets AI tools call external tools — structured functions that return real data on demand. Instead of guessing, the AI asks for exactly what it needs and gets the live answer. Every chat message in this demo routes through the MCP server; the MCP Tools panel in shows which tools were called.

Without MCPWith MCP
AI reads static docs pasted into a promptAI fetches structured data at query time
Token names are guessed or hallucinatedToken names come from the live source of truth
Component constraints exist only as proseConstraints are machine-readable and enforceable
Validation happens in code reviewValidation happens before code is written
Design system changes require re-promptingAI always queries the current state of the system

The 28 MCP tools — and when to use them

AI clients call these tools via POST /mcp using JSON-RPC. Each tool returns structured, live data — never a cached snapshot.

Token tools
list_token_categoriesGet a top-level map of the design system — useful as a first call to orient the AI
get_tokensFetch all tokens in a category (e.g. color, spacing, typography)
get_tokenLook up one specific token by path (e.g. color.primary.600)
suggest_tokenDescribe an intent in plain language (e.g. "error text color") and get the best matching token
validate_colorCheck whether a hex or RGB value matches a named token
diff_against_systemCompare CSS property values against the token set — flags non-token values
get_spacing_scaleGet the structured spacing scale with semantic usage hints for each step
Component tools
list_componentsGet names, descriptions, variants, and sizes for every component
get_componentFull spec for one component — props, tokens, constraints, and accessibility
get_component_tokensEvery token a component depends on
get_component_constraintsUsage rules, do's and don'ts, required props
validate_component_usageCheck whether a variant/size/props combo is valid before generating code
get_component_variantsVariant list with when-to-use guidance for each
get_component_anatomyInternal slots, valid children, and composition patterns
get_component_relationshipsParent, sibling, and related components
Theme & icon tools
list_themesList all available themes (e.g. light, dark)
get_themeFull theme definition with semantic token overrides
list_iconsList icons, optionally filtered by category or tag
get_iconSingle icon by name with metadata, sizes, and usage guidance
search_iconsSemantic search across the icon set (e.g. "warning" returns alert-triangle)
Accessibility & layout tools
check_contrastWCAG 2.1 AA/AAA contrast ratio checker between two hex colors
get_accessibility_guidancePer-component ARIA roles, keyboard interaction, and focus-order spec
get_layout_guidancePage gutters, max-widths, breakpoints, grid columns, and region spacing
History & search tools
get_changelogVersion history filterable by version range
get_deprecationsDeprecated tokens and components with migration paths and removal timelines
get_style_guideDesign principles, color usage rules, typography guidance, and composition patterns
searchFull-text search across all tokens, components, and icons at once
get_schemaJSON Schema for a data file — use before loading custom JSON to validate shape

Connect your own AI client

Claude Desktop, Cursor, and GitHub Copilot can all connect to this server directly. Click MCP server in the top bar for copy-paste setup instructions.

System Diagram

Follow a chat message from your keyboard through the AI routing layer to a grounded, design-system-aware response. Click or hover any block to learn what it does.

Hover or tab to a node to learn more · click or press Enter to pin
Design System AI is a live demo of a Model Context Protocol (MCP) server that connects AI coding tools directly to a design system — so Claude, Cursor, GitHub Copilot, and others look up your real tokens and component rules instead of guessing.
→ Open to start a chat. The AI will query your design system live.

The problem it solves

When you ask an AI to build UI, it guesses. It invents token names, uses hardcoded hex values, and ignores your component library. You can paste docs into the prompt to help — but those docs go stale the moment your system changes, and big files eat your context window.

This demo shows a different approach: expose your design system as a live, queryable server. The AI asks for exactly what it needs, gets the real answer, and generates code that actually matches your system.

How it works

  1. You type a UI prompt — e.g. "Create a login form with a primary submit button"
  2. The AI recognizes it needs design system context and calls tools automatically — fetching exact button variants, spacing tokens, and accessibility rules from this server
  3. The server returns live, structured data — not a snapshot, not a guess
  4. The AI generates a response grounded in your actual token names and component constraints
  5. The Live Preview tab renders the result; the MCP Tools panel below shows exactly which queries were made

What this demo includes

Token lookup
Ask for any spacing, color, or typography token and get the real value from your live source of truth — not a cached guess.
Component constraints
Fetch approved variants, required props, and usage rules for any component so the AI generates only what your system supports.
Accessibility guidance
Get WCAG notes, aria requirements, and contrast ratios for components at query time — enforced before code is written.
Color & contrast validation
Check whether a color is in the system and meets contrast thresholds against your defined themes.
Diff & changelog
Detect when generated CSS diverges from your design system tokens and surface what changed between versions.

28 MCP tools total — covering tokens, components, color, icons, themes, style guide, and more.

Connect your own AI client

Claude Desktop, Cursor, and GitHub Copilot can all connect to this server directly. Click MCP server in the top bar for copy-paste setup instructions.

Go to to load your own tokens and components, or generate a design system from any website URL.