Skip to content

Spotify's AI-ready design system (Encore) uses MCP servers, headless components, and machine-readable documentation

Insight: Spotify restructured their design system from rigid component bundles into layered architecture (foundational, component style, component behavior) with headless components built on React ARIA. They created an MCP server exposing documentation to AI agents like Cursor, built evaluation systems checking generated components, and adopted the philosophy that design systems must support humans, machines, and velocity.

Detail: Rather than hoping AI would discover guidelines, Spotify made their system present where AI operates, preventing developers from bypassing it for custom solutions. The shift from framework-specific components to flexible layered structures enables AI code generation aligned with design standards.