How Spotify is Making Their Design System AI-Ready
Key learnings from Victoria Tholerus (Web Engineer, Spotify) and Aleksander Djordjevic (Senior Product Designer, Spotify)
Recently I organized an Into Design Systems Meetup at Spotify HQ in Stockholm. 200+ designers joined to learn how Victoria Tholerus (Web Engineer, Spotify) and Aleksander Djordjevic (Senior Product Designer, Spotify) are rethinking Encore (Spotify’s design system) for an AI-first world
The Problem Nobody Talks About
AI adoption has created a fundamental challenge for design systems.
Teams are now consulting AI agents before checking design documentation.
They are potentially bypassing the design system entirely.
Victoria and Aleksander asked a critical question:
“What happens when AI becomes the go-to teammate instead of our human ones?”
The risks:
Inconsistent UI implementations
Custom non-compliant code
Reduced design system adoption
Loss of system relevance
As Aleksander put it:
“The AI is not going to figure it out. It’s going to put the users on a different path.”
And the risk is concrete: If they don’t act now, developers will start getting AI-generated solutions that don’t follow Encore guidelines.
This could lead to more custom implementations that will reduce adoption of their design system.
Spotify’s Strategic Shift
Spotify reframed their design system’s purpose. It is no longer about serving humans only. It is about supporting both humans and machines.
Their challenge: “How do we become a system that isn’t just good for humans, but also good for machines?”
This led to two parallel initiatives:
Machine-Readable Documentation – Making design system rules accessible to AI agents through MCP
Component Architecture Redesign – Moving from rigid bundles to flexible layered structures
They Built an MCP
Spotify created an MCP (Model Context Protocol) server for Encore.
Their documentation is now exposed to AI agents directly. Tools like Cursor can generate code that is aligned with Spotify standards out of the box.
But they don’t just launch and hope for the best. They built a testing framework that evaluates:
Generated components vs their own Encore components
Lint errors
Similarity scores
Visual output (because at Spotify, prototypes matter as much as code)
They’re also comparing different MCP tools against each other to see which gives users more value.
The Architecture That Makes It Work
Encore uses three key architectural patterns:
Layered Architecture: Separates everything into three distinct layers:
Foundational layer
Component style layer
Component behavior layer
Headless Components: Built on systems like React ARIA and Base UI. Provides interaction logic while Encore focuses on brand, accessibility and consistency.
Reduced Friction: For humans: Work at the speed of innovation, the speed of Spotify. For machines: Way smaller context bubbles. AI can understand foundations, button context, and headless systems (which are already in their training sets).
As Aleksander said: “We’re removing a lot of the hurdles for AI as well.”
What This Means for You
If you are thinking about making your design system AI-ready start with these questions:
Is your documentation structured for machines not just humans?
Can AI tools access your design tokens and component specs?
Are you testing AI-generated output against your standards?
The foundation is machine-readable documentation.
Everything else builds on that.
Here are sessions to get you started with exactly that at our AI online conference:
Day 1 – March 19: → Machine-Readable Design Systems for MCP and LLMs – Diana Wolosin (Indeed) shares how to structure your design system for AI agents
→ Agentic Design Systems – Romina Kavcic on AI-driven design system architectures
→ Encoding Governance on Agentic Design Systems – Cristian Morales Achiardi (Enara Health) on automated governance and testing frameworks
Day 2 – March 20: → Building Real Design Systems with Agents – Jan Six (GitHub) on how Copilot uses agents to build design systems
→ Vibe Coding with Zero Drift – Shuaiqi (Mr.Biscuit) Sun shows how to connect Figma to code with MCP
→ AI Without the Chaos – Brad Frost, Ian Frost and TJ Pitre on bringing context to AI workflows
See you there!
Sil