How Spotify Is Redesigning Its Design System for AI Agents

Spotify has put a name to a problem that most design system teams are still ignoring: developers are increasingly asking AI agents before checking design system documentation. And the agents don't know the system.

At the Into Design Systems Meetup in Stockholm, Victoria Tholerus (Web Engineer) and Aleksander Djordjevic (Senior Product Designer) presented how Spotify is responding. Over 220 designers attended. Here's what stood out.

The Core Problem

Encore is Spotify's design system. It works. But it works for humans. Developers using Cursor, Copilot, or Claude Code get answers that are technically correct but ignore Encore entirely. The generated code drifts from the system. Not out of carelessness, but because the agent simply has no access to the rules.

The consequences are tangible: inconsistent code, custom solutions, declining adoption. Not because the system is bad. Because it doesn't exist where the work actually happens now.

This is not an exotic Spotify problem. Every team where developers regularly use AI-assisted tooling faces the same question. Most just haven't framed it explicitly yet.

What Spotify Did

Spotify addressed two things in parallel.

Machine-Readable Documentation via MCP

Spotify built an MCP server for Encore. MCP (Model Context Protocol) makes design system rules, tokens, and component specs directly consumable by AI agents. Tools like Cursor can then generate code that aligns with Encore standards from the start.

The interesting part isn't the MCP server itself. It's what surrounds it: Spotify built a testing framework that systematically evaluates AI-generated output against their own components. Lint errors, similarity scores, visual output. Different MCP tools compared head to head. That level of rigor is rare in this space.

Layered Architecture Instead of Monolithic Bundles

The second initiative concerns the architecture itself. Encore now separates into three layers: a foundation layer, a component style layer, and a component behavior layer. On top of that, headless components built on React ARIA and Base UI. Interaction logic comes from these libraries. Encore handles brand, accessibility, and consistency.

From an agent perspective, this matters. Smaller, clearly separated context units are significantly easier for language models to process than nested component bundles. The headless systems are already in the training data of most models. The agent needs less context and can focus on what's Spotify-specific.

Five Principles from the Spotify Approach

Presence. A design system must be available where the work happens. If an AI agent is the first touchpoint for developers, the system needs to be accessible to that agent.

Structure over generation. Spotify gives the agent constraints, not generative features. Consistency comes from limitations, not from output volume.

Layered over monolithic. Clear layers, clear responsibilities, small context windows. Better for humans. Better for machines.

Test the output. Committing AI-generated code without review is like shipping a design without usability testing. Spotify has a systematic framework for it. Most teams have nothing.

Infrastructure mindset. Design systems are infrastructure, not documentation. Infrastructure must work for all its users. Today, that includes AI agents.

What This Means for Smaller Teams

Spotify has the resources for a dedicated MCP server and a custom testing framework. SaaS startups and small product teams typically don't.

But the core of the approach scales. Name tokens semantically so an agent can interpret them. Structure component specs to be machine-readable. Provide context documentation that explains when a component fits and when it doesn't. Review generated output against your own standards before it reaches production.

At Layr Eight, we work on exactly this question: what does a design system look like that works not only for designers and developers, but also for the AI agents that increasingly write the code? We call it agent-centered design systems. Spotify calls it something else, but the goal is the same.

If you want to talk about what this looks like for a smaller team: get in touch.