How Spotify rethinks Design Systems in the age of AI
1. Context
Why the company talks about Design Systems
Spotify builds digital experiences across many platforms: mobile, web, TV, wearables and internal tools.
The Design System, called Encore, is part of Spotify's core platform and supports thousands of product teams across the company. Encore provides shared tokens, components and guidelines across all platforms, making it what Spotify considers a "golden technology."
Historically, teams came to the Design System for answers. Documentation, guidance and support lived in spaces controlled by humans, and this model worked well. Until AI became part of daily work.
2. The problem
What becomes difficult at scale
AI is now used by designers, engineers and product managers across Spotify. People start with AI instead of documentation, asking questions to AI agents first, often bypassing Design System teams entirely.
AI produces prototypes, code suggestions and decisions. But these outputs may ignore Design System rules, creating a fundamental problem.
- Inconsistent UI
- Custom implementations
- Reduced adoption
- Loss of relevance
If the Design System isn't present in AI workflows, it slowly disappears.
3. Their approach
Principles decisions mindset
The team reframed their role, recognizing that the landscape had fundamentally changed.
This realization led to two parallel work streams:
First, the Design System must be machine readable. Documentation, rules and guidelines need to be accessible to AI agents, not just humans.
Second, the component architecture must change. Rigid bundles slow down humans and confuse machines. Both need clarity and flexibility.
The focus moved toward clarity, structure and constraints, not control.
4. What worked
Concrete learnings
Encore documentation was exposed to AI agents using an MCP server, allowing tools like Cursor to generate code based on Spotify's standards.
A testing framework was built to evaluate AI output quality, comparing generated components against real Encore components.
Visual testing was added to ensure AI-generated UI maintained visual consistency with Encore's design language.
The component system was redesigned using a layered architecture, separating foundations, styles and behaviors for better clarity.
Headless component systems provided interaction logic, while Encore focused on brand feel, accessibility and consistency.
This approach reduced friction for teams while also reducing context complexity for AI systems.
5. What others can learn
Transferable patterns
Otherwise they get bypassed
Structure enables consistency
Eighty percent coverage is realistic at scale
They must support humans, machines and product velocity
6. Source
Where this use case comes from
Victoria Tholerus
she/her
Web Engineer at Spotify
Aleksander Djordjevic
he/him
Senior Product Designer at Spotify
This use case is based on a live session by the Spotify Design System team, presented during an Into Design Systems meetup and recorded at Spotify.
The session covered how Spotify adapts its Design System to work with AI driven workflows, including MCP integration, component architecture decisions and challenges at scale.
If you want to learn how other teams apply similar patterns in practice, these kinds of real-world workflows are explored in depth at Into Design Systems.
- Instant access after purchase
- Watch immediately on demand
