Coinbase Overhauls Design Systems for AI-Powered Productivity
As Coinbase has increasingly adopted AI across its entire company, it was only natural for the company's Design Systems to be reevaluated. Like many companies, their design system was initially built with quality and efficiency in mind, but as AI became more central to their processes, new risks emerged.
The introduction of coding agents like Cursor and Claude Code has greatly improved productivity by generating common user interfaces in minutes, but it also created a risk that the agents may not properly understand Coinbase's Design System (CDS). This can lead to inconsistent user experiences, one-off implementations, and long-term design and technical debt.
To address this challenge, the CDS team has developed a new approach called 'CDS For Agents.' This involves teaching coding agents how to use the core elements of the design system through a set of skills known as CDS Skills. These skills build the bridge between agents and the company's design system rules, documentation, and code snippets.
One of these CDS skills is cds-code, which teaches agents how to write great CDS code. It automatically detects whether a project is a React or React Native application and routes to the relevant CDS library for precise documentation. The skill also selects the right CDS components for the task, applies design tokens, searches for and applies the correct icons and illustrations from the asset library, and more.
The CDS team has also invested in evaluations for each of these coding skills to measure where they are still essential and where model behavior is improving on its own. This ensures that the skills continue to provide high-quality output while minimizing unintended regressions.
Another tool developed by Coinbase's CDS team is the MCP (Model Context Protocol) Server, which gives agents tools for querying up-to-date CDS component documentation. Agents can ask questions like 'how do I add an icon to a CDS Button?' and get precise answers grounded in actual facts.
The Code Connect tool is another key feature of Coinbase's CDS system. It bridges the gap between design and engineering by mapping CDS components across design and engineering, making it easier for agents to translate Figma designs into code that uses the right system primitives.
Finally, the CDS Playground provides a live, browser-based environment where all CDS components and agent skills come preinstalled. This allows designers to leverage AI-powered prototyping without requiring a deep technical understanding of what happens under the hood.