Spotify Re-engineers Design System for AI
Spotify's engineering and design teams are making their 'Encore' design system "AI-ready" to enable rapid integration of new features. The new architecture leverages a modular structure and a Machine-Consumable Protocol (MCP) server. This approach emphasizes machine-readable documentation and decoupled interfaces to speed up experimentation and personalization.
- The strategic shift for Encore was driven by the concern that developers using AI agents would bypass design documentation, leading to inconsistent UI and a loss of the design system's relevance. - The Machine-Consumable Protocol (MCP) server directly exposes Encore's design system rules to AI agents, allowing tools like Cursor and Claude Code to generate code that is compliant with Spotify's standards from the start. - To make the system more AI-friendly, the new architecture uses "headless components" based on open-source libraries like React ARIA, which separates the core interaction logic from Spotify's specific branding and styling. - This initiative is part of a broader strategy at Spotify to overhaul its development process; an internal AI system called "Honk," built on Claude Code, has been handling all development work for senior engineers since December 2025. - The AI-ready system is designed to accelerate the launch of new personalization features, such as "Prompted Playlists," which allows users to generate playlists by giving the recommendation algorithm natural language instructions. - Spotify's recommendation engine, which this new system will enhance, is a multi-stage process that combines collaborative filtering, natural language processing (NLP), and raw audio analysis to power its "Made for You" playlists. - The Encore design system itself is a "system of systems" introduced around 2020 to unify what was previously 22 disconnected design systems, providing a consistent foundation across more than 45 unique platforms. - To validate the AI's output, Spotify built a testing framework that evaluates AI-generated components against its own Encore standards by checking for lint errors, calculating similarity scores, and assessing the final visual output.