What is a Design System MCP?
A Model Context Protocol (MCP) gives AI agents on-demand access to external tools and structured knowledge. A design system MCP codifies your components, tokens and guidelines into machine-readable metadata so LLMs can query and generate UI code that conforms to your system. This guide is based on real talks from 4 speakers at the AI Design Systems Conference 2026 by Into Design Systems: Diana Wolosin (Indeed, with her 1056-prompt benchmark), Jesse Gardner (New York State), Laura Fehre (Figma) and Romina Kavcic (The Design System Guide). All 15+ hours of conference recordings are available at intodesignsystems.com.
Key concepts
- AI is a new user (Diana Wolosin, Indeed): Your design system was written for humans. The new user is AI, and it needs structured metadata, not documentation prose.
- MCP deterministic, LLM stochastic (Diana Wolosin, Indeed): Same MCP query returns the same data every time. Same MCP results sent to the LLM produce different reasoning each time. Structured data mitigates that randomness.
- JSON for structured data, Markdown for rules (Diana Wolosin, Indeed): JSON for MCP component APIs (props, sizes, variants): it's a contract. Markdown for natural-language instructions and rules for the LLM.
- Progressive disclosure of context (Diana Wolosin, Indeed): Always-on rules for foundations (spacing, color, typography), MCP on-demand for components, AGENTS.md as orchestration layer. Together they form a plugin.
- Foundations must be always-on (Diana Wolosin, Indeed): MCP only returns what you asked for. If the prompt says 'build me a card,' the LLM fills gaps with assumptions. Spacing and color belong in always-on rules.
- Guidelines are not laws (Laura Fehre, Figma): Writing more rules into a guideline file doesn't control the outcome. In nearly 100% of cases the prompt will win over the guidelines.
- Don't just plug MDX into an MCP (Diana Wolosin, Indeed): Connecting human documentation to an MCP is 5x more expensive and less accurate than structured JSON. Diana's benchmark proved this on Indeed's real design system.
- Code as source of truth for MCP (Jesse Gardner, New York State): JSDoc on Lit web components feeds the MCP with props, types, and usage guidance. Design and code stay in sync through a single structured source.
Diana's MCP benchmark findings
- Setup: Cursor plus Claude Sonnet 4.5 plus Indeed's design system MCP, stored in Vectra (open source vector DB). 22 prompts run 3 times each across 8 MCP configurations for a total of 1,056 prompts.
- Formats tested: Markdown MDX (the original human docs), plain Markdown, hybrid Markdown + JSON, JSON (baseline and variations), and TOON (Token-Oriented Object Notation designed for AI).
- Metrics: Input quality (cost, average tokens, relevance, query coverage) and output quality (coverage, hallucinations, average props found).
- Finding #1: MCP is deterministic, LLM is stochastic. Same input to MCP returns the same output. Same MCP results sent to the LLM produce different reasoning each time.
- Finding #2: Structured data mitigates AI uncertainty. Hybrid (MD + JSON) showed the most variation across runs and was unreliable. JSON showed the most consistency.
- Finding #3: JSON has the highest accuracy when verified against actual documentation, and uses 80% fewer tokens than hybrid Markdown for equal or better accuracy.
- Winner: JSON. Sharpest responses at the lowest token cost. Diana built this benchmark in ~3 months, vibe-coded with Cursor.
Real-world implementations
- Indeed (Diana Wolosin): 77 components processed via JavaScript parsers (one per knowledge domain: accessibility, development, localization, design) generating structured JSON. Original MDX in GitLab → parsers built with Cursor → JSON → ingestion into Vectra vector DB. Pipeline auto-triggers on every MDX update. The pilot produced 4,300 AI prototypes in 4 months using React design system components and Indeed Visual Language.
- New York State (Jesse Gardner): Web components built with Lit and TypeScript, Figma parity via Code Connect. Custom MCP server exposes components and tokens documented via JSDoc with usage guidance baked in. Rich JSDoc → custom element manifest → MCP server. Fed a 5-page foster-adoptive parent PDF into Claude Code to generate a working multi-step NY State-styled form in 13 minutes.
- Figma (Laura Fehre): Experiment translating Figma Make output (React, Tailwind, shadcn, Radix) into SwiftUI for a Notes app clone. Cursor parsed Apple Human Interface Guidelines URL into structured markdown files, drag-and-dropped into Figma Make's code editor with a mapping file translating Radix components to HIG components.
- The Design System Guide (Romina Kavcic): Tidy Figma plugin with 66 MCP tools: audits naming, scores health across 6 categories, validates new variables, composes patterns (login form, destructive confirmation) from existing components. Paired with Observatory, a dashboard visualizing the knowledge graph across Figma, GitHub, Storybook, Linear, Chromatic, Playwright and PostHog.
How to build your design system MCP
- Start small (Romina Kavcic): Just add and document your naming conventions. Then add your 10 components or maybe 5, it's enough. Plant seeds, not trees.
- Codify foundations first (Romina Kavcic): Naming conventions, token taxonomy, component intent. Structure before automation.
- Pick a parser strategy (Diana Wolosin, Indeed): Diana built JavaScript parsers per knowledge domain (a11y, dev, localization, design) that read MDX and emit JSON. Cursor wrote them iteratively to handle every edge case.
- Use JSON for structured data (Diana Wolosin, Indeed): JSON for component APIs, props, sizes, variants. Markdown with frontmatter for natural-language rules. Don't dump MDX as-is.
- Build the pipeline (Diana Wolosin, Indeed): Ingestion → chunking (as sharp as possible) → indexing → vector database. Vectra is open source and a solid starting point.
- Automate freshness (Diana Wolosin, Indeed): Trigger the parser and ingestion pipeline on every MDX update so metadata is always current. Indeed's pipeline does this automatically.
- Add always-on rules and AGENTS.md (Diana Wolosin, Indeed): Foundations (typography, spacing, color, icon conventions) go into always-on rules so the LLM can't escape them. MCP is on-demand, rules are safety net.
- Benchmark before committing (Diana Wolosin, Indeed): Don't guess. Test multiple formats with the same prompts. Measure cost, accuracy and hallucinations. Diana spent 3 months on this and it paid off.
- Add usage guidance, not just APIs (Jesse Gardner, New York State): JSDoc with 'use filled for primary action, outline for secondary.' Guidance is useful for both humans and AI.