Key learnings from Victoria Tholerus (Web Engineer) and Aleksander Djordjevic (Senior Product Designer) at Into Design Systems
Recently I organized an Into Design Systems Meetup at Spotify HQ in Stockholm. 220+ designers joined to learn how Victoria and Aleksander 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 are real:
- 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 Server
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."
5 Transferable Patterns for Your Design System
-
Presence: Design systems must exist where AI operates or get bypassed
-
Structure Over Generation: Constraints enable consistency more than generation features
-
Flexible Over Rigid: Layered architectures scale better than rigid component bundles
-
Test Real Output: Build frameworks to evaluate AI-generated code against your standards
-
Infrastructure Mindset: Design systems must support humans, machines and velocity
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!
