What are Agentic Design Systems?
An agentic design system is infrastructure that lets AI agents autonomously read, reason over and build with your components, tokens and guidelines. Unlike traditional design systems written for humans, agentic design systems encode intent, relationships and constraints as machine-readable context. Agents can then observe, detect, suggest, fix and learn inside a self-healing loop with human oversight.
This guide is based on talks from 5 speakers at the AI Design Systems Conference 2026 by Into Design Systems: Romina Kavcic (The Design System Guide), Diana Wolosin (Indeed), Jesse Gardner (New York State), Jan Six (GitHub) and Brad Frost (Brad Frost Web). All 15+ hours of conference recordings including these sessions are available for instant access at intodesignsystems.com.
Key concepts of agentic design systems
- Design system as infrastructure: Think of your design system less like a Figma library and more like a CI/CD pipeline or database. It becomes the API that lets AI agents build your product safely.
- Observe, detect, suggest, fix, learn: A self-healing loop based on IBM's 2003 MAPE-K framework. Signals from Figma API, CI hooks and usage analytics flow into a drift-scoring engine that creates PRs automatically.
- AI is a new user: Your design system was written for humans. The new user, AI, needs structured metadata, not documentation prose. Components need to be machine-readable.
- MCP is deterministic, LLM is stochastic: The same MCP query returns the same data, but the LLM reasons differently each time. Structured data like JSON mitigates that randomness.
- Context > Probability: Without infrastructure, AI collapses toward the average of the internet. Design systems give AI something it cannot get from training data: your encoded decisions.
- Trust levels, not full autonomy: Agents earn trust like career progression. Start as an intern (suggest only), then junior (mechanical fixes), then more autonomy. Some decisions will always need human judgment.
- Plant seeds, not trees: Foundations before automation. Naming conventions, token structure and component descriptions first, then build agents on top.
- Progressive disclosure of context: Always-on rules for foundations (spacing, color, typography), MCP on-demand for components, AGENTS.md as orchestration layer. Together they form a plugin.
Real-world examples
- Indeed (Diana Wolosin): Parsed 77 components from MDX docs into JSON metadata via Cursor-built parsers, ingested into a Vectra vector database, ran a benchmark with 1,056 prompts across 8 MCP configurations. JSON won on both accuracy and token efficiency. Pipeline auto-triggers on MDX updates. Pilot produced 4,300 AI prototypes in 4 months.
- New York State (Jesse Gardner): Design system built on Lit and TypeScript web components with Figma parity via Code Connect. Custom MCP server exposes components and tokens documented via JSDoc with usage guidance baked in. Fed a 5-page foster-adoptive parent PDF into Claude Code to generate a working multi-step NY State-styled form in 13 minutes.
- GitHub (Jan Six): GitHub Primer has a public MCP and instruction files. Workflow: start in Storybook, push to preview env, invite review. Uses sub-agents like an accessibility reviewer to keep main context clean. Agentic workflows run daily QA and maintenance with safe outputs, where an agent can only create an issue.
- The Design System Guide (Romina Kavcic): Built Tidy, a Figma plugin with 66 MCP tools that audits naming, scores health across 6 categories, validates new variables and composes patterns from existing components. Paired with Observatory, a dashboard that visualizes the knowledge graph across Figma, GitHub, Storybook, Linear, Chromatic, Playwright and PostHog.
- Brad Frost Web & Southleft (Brad Frost, Ian Frost, TJ Pitre): FigmaLint plugin runs deterministic and AI analysis on Figma components, scores them (26/100 up to 100/100 after fixes), checks token usage, layer naming, accessibility and component descriptions. Figma Console MCP demo: "Create a new theme called Lavender" instantly rolls out new tokens to Figma, Storybook and React Native.
How to start building an agentic design system
- Plant seeds, not trees (Romina Kavcic): Start with foundations: naming conventions, token structure, component descriptions. Don't chase full autonomy on day one.
- Make components machine-readable (Diana Wolosin, Indeed): Codify knowledge as structured metadata, not documentation prose. Start with a JSON schema per component: identity, props, variants, sizes, states, usage.
- Add intent to Figma descriptions (Romina Kavcic): Write what the component does and how it can be combined, not just specs. Agents need intent, not just visuals.
- Set trust levels per action (Romina Kavcic): Decide whether an agent can auto-merge, draft a PR, or only suggest. Low-risk and high-confidence = auto. Everything else = human review.
- Colocate and name semantically (Jan Six, GitHub): Keep component rules in one place. Use semantic token names like danger.background, not raw red-500. Add front-matter to docs so they're parseable.
- Benchmark before committing to a format (Diana Wolosin, Indeed): Don't plug your Markdown into an MCP and call it done. Test JSON vs MD vs hybrid against accuracy and token cost on real queries.
- Pair with a developer (Romina Kavcic): Not just weekly syncs. Real pair programming. This is what's missing in most teams building agent-ready systems.
Spotify Encore: layered component architecture for AI
Spotify's Encore design system uses a layered architecture separating foundations, styles and behaviors into independent layers. This creates smaller context bubbles for AI reasoning. With 220,000+ shared style uses, 86,000 component instances, 93% developer satisfaction and support for iOS, web, Android, TVs and watches, Encore is Spotify's golden technology. The team built a custom MCP evaluation framework testing prompts against multiple LLMs with both code and visual comparison.
Frequently asked questions about agentic design systems
- What is an agentic design system? An agentic design system is infrastructure that lets AI agents autonomously read, reason over and build with your components, tokens and guidelines. Unlike traditional systems written for humans, it encodes intent, relationships and constraints as machine-readable context, so agents can observe, detect, suggest, fix and learn inside a self-healing loop with human oversight.
- Should I just connect my existing Markdown docs to an MCP? No. Diana Wolosin's benchmark at Indeed showed Markdown burned roughly 30,000 tokens per query with 82% coverage and hallucinations, while JSON hit higher accuracy with 80% fewer tokens and 5x lower annual cost. As Diana put it: our docs are written for humans, the new user (AI) needs structured metadata.
- When do I use JSON vs Markdown? Diana's rule: JSON for MCP and Markdown for LLM. Structured data like component APIs, props, sizes and variants belongs in JSON because it's a contract. Instructions and rules for an LLM are natural language, so Markdown works there.
- Will AI replace design systems? The opposite. AI makes design systems more critical than ever. As Romina Kavcic said at the conference: AI generates code, design systems generate understanding. Without a strong system, AI collapses toward the average of the internet.
- Should agents run fully autonomously? No. You don't want agents to run in the wild. Some decisions will never go past level three because they'll always need human judgment. The goal is autonomy that still feels safe, with human oversight where it matters most.
- Why does my agent keep breaking foundations like spacing, typography and color? MCP is on-demand, it only returns what the prompt asks for. If the prompt says build me a card, MCP returns card and button info but ignores spacing, typography and colors. The LLM fills the gap with its own assumptions. Use always-on rules for foundational knowledge, MCP for retrieval.
- How do I benchmark my MCP server for design systems? Diana Wolosin at Indeed tested 8 MCP configurations with 1,056 prompts and measured accuracy, token usage and cost. JSON metadata achieved higher accuracy with 80% fewer tokens and 5x lower annual cost ($300 vs $1,500) compared to Markdown. Don't plug your docs into an MCP and call it done. Test JSON vs Markdown vs hybrid against accuracy and cost on real queries from your team.
- What is an AGENTS.md file and do I need one? AGENTS.md is an orchestration file that tells AI agents how to work with your design system. It defines always-on rules for foundations (spacing, color, typography), points to your MCP server for component retrieval, and sets trust levels for what agents can and cannot do. Think of it as the entry point that combines progressive disclosure of context with governance rules.
- Can I start with agentic design systems if my system is not mature yet? Yes. Brad Frost emphasized that this applies to all design system maturity levels. Start with plant seeds, not trees: naming conventions, token structure and component descriptions first. Even basic structured metadata like a JSON schema per component (identity, props, variants, sizes, states, usage) gives agents dramatically better output than no context at all.
- How does Spotify make their design system work with AI agents? Spotify's Encore team built a layered component architecture that separates foundations, styles and behaviors into independent layers. This creates smaller context bubbles for AI to reason about. They also built a custom MCP evaluation framework that tests prompts against multiple LLMs and compares generated components visually and in code. With 93% developer satisfaction and 220,000+ shared style uses, Encore is Spotify's designated golden technology for building UI.