Wie Spotify sein Design System für AI Agents umbaut

Spotify hat ein Problem öffentlich gemacht, über das in der Design-System-Community bisher wenig gesprochen wird: Entwickler fragen zunehmend AI Agents, bevor sie in die Design-System-Dokumentation schauen. Und die Agents kennen das System nicht.

Beim Into Design Systems Meetup in Stockholm haben Victoria Tholerus (Web Engineer) und Aleksander Djordjevic (Senior Product Designer) vorgestellt, wie Spotify darauf reagiert. Über 220 Designer waren dabei. Hier eine Einordnung.

Das Ausgangsproblem

Encore ist Spotifys Design System. Es funktioniert. Aber es funktioniert für Menschen. Entwickler, die heute mit Cursor, Copilot oder Claude Code arbeiten, bekommen dort Antworten, die technisch korrekt sind, Encore aber nicht berücksichtigen. Der generierte Code weicht vom System ab. Nicht aus Nachlässigkeit, sondern weil der Agent schlicht keinen Zugang zu den Regeln hat.

Die Konsequenzen sind konkret: inkonsistenter Code, Custom-Lösungen, sinkende Adoption. Nicht weil das System schlecht ist. Sondern weil es dort nicht präsent ist, wo die Arbeit mittlerweile stattfindet.

Das ist kein exotisches Spotify-Problem. Jedes Team, in dem Entwickler regelmässig AI-gestützt arbeiten, steht vor derselben Frage. Die meisten stellen sie sich nur noch nicht explizit.

Was Spotify konkret gemacht hat

Spotify hat an zwei Stellen gleichzeitig angesetzt.

Machine-Readable Documentation via MCP

Spotify hat einen MCP Server für Encore gebaut. MCP (Model Context Protocol) macht Design-System-Regeln, Tokens und Component Specs direkt für AI Agents konsumierbar. Tools wie Cursor können damit Code generieren, der von Anfang an den Encore-Standards entspricht.

Der interessante Teil ist nicht der MCP Server selbst, sondern was drumherum passiert: Spotify hat ein Testing-Framework aufgebaut, das den AI-generierten Output systematisch gegen die eigenen Components prüft. Lint Errors, Similarity Scores, visueller Output. Verschiedene MCP Tools werden gegeneinander verglichen. Das ist ein Grad an Rigorosität, den man bei dem Thema selten sieht.

Layered Architecture statt monolithischer Bundles

Die zweite Initiative betrifft die Architektur. Encore trennt jetzt in drei Schichten: Foundation Layer, Component Style Layer, Component Behavior Layer. Dazu Headless Components auf Basis von React ARIA und Base UI. Die Interaktionslogik kommt aus diesen Libraries. Encore kümmert sich um Brand, Accessibility und Konsistenz.

Aus einer Agent-Perspektive ist das relevant: Kleinere, klar getrennte Context-Einheiten sind für Language Models deutlich einfacher zu verarbeiten als verschachtelte Component Bundles. Die Headless-Systeme stecken ohnehin in den Trainingsdaten der meisten Modelle. Der Agent muss weniger Kontext laden und kann sich auf das Spotify-Spezifische konzentrieren.

Fünf Prinzipien aus dem Spotify-Ansatz

Präsenz. Ein Design System muss dort verfügbar sein, wo gearbeitet wird. Wenn der erste Touchpoint für Entwickler ein AI Agent ist, muss das System für diesen Agent zugänglich sein.

Struktur vor Generation. Spotify gibt dem Agent Constraints, keine generativen Features. Konsistenz entsteht durch Einschränkungen, nicht durch Output-Menge.

Layered statt monolithisch. Klare Schichten, klare Zuständigkeiten, kleine Context Windows. Besser für Menschen. Besser für Maschinen.

Output testen. AI-generierten Code ungeprüft committen ist wie ein Design ohne Usability-Test freigeben. Spotify hat dafür ein systematisches Framework. Die meisten Teams haben keins.

Infrastructure Mindset. Design Systems sind Infrastruktur, nicht Dokumentation. Infrastruktur muss für alle Nutzer funktionieren. Heute schliesst das AI Agents ein.

Was davon für kleinere Teams relevant ist

Spotify hat die Ressourcen für einen eigenen MCP Server und ein dediziertes Testing-Framework. SaaS-Startups und kleine Produktteams haben das in der Regel nicht.

Aber der Kern des Ansatzes ist skalierbar. Tokens semantisch benennen, sodass ein Agent sie interpretieren kann. Component Specs maschinenlesbar strukturieren. Kontext-Dokumentation mitliefern, die erklärt, wann welche Komponente passt. Den generierten Output gegen die eigenen Standards prüfen, bevor er in Production geht.

Bei Layr Eight beschäftigen wir uns mit genau dieser Frage: Wie sieht ein Design System aus, das nicht nur für Designer und Entwickler funktioniert, sondern auch für die AI Agents, die zunehmend den Code schreiben? Wir nennen das agent-centered Design Systems. Spotify nennt es anders, aber das Ziel ist dasselbe.

Wer darüber sprechen will, wie das für ein kleineres Team konkret aussehen kann: hier entlang.