How Coinbase Design Systems Are Powering the AI Prototyping Era

As Coinbase has embraced AI across the entire company, we needed to question nearly everything about our processes,and how we operate. This was equally true for Coinbase Design System (CDS), which was central to many of those discussions. Like many companies, our design system was built with quality and efficiency in mind. That hasn't changed, but how we deliver on those goals has.

Coding agents are now central to how design and engineering build products across Coinbase. Tools like Cursor and Claude Code can generate common user interfaces in minutes. That's exciting, but it also creates new risks when the agents do not properly understand CDS. Agent output without this kind of direction may look good, but whether it feels native to our brand or is consistent with our existing products is… unpredictable… at best. This situation, without careful oversight from the very first prompt, will lead to inconsistent user experiences, one-off implementations, and long term design and technical debt.

The challenge for any design systems teams in an AI-native world isn't just maintaining a great library. It's making sure the core elements of the design system are the first thing AI reaches for and that it knows exactly how to use it.

Here's how it works in practice for CDS:

Since their introduction, Skills have become the common interface for providing context to agents across most platforms and tools. Due to their wide adoption, this has been the CDS team's largest area of investment in the AI domain. CDS skills build the bridge between agents and our design system rules, documentation and code snippets.

Our main coding skills, cds-code and cds-design-to-code, teach agents how to write great CDS code. Behind the scenes, they:

As models become more capable, they may eventually require less explicit instruction to produce high-quality CDS output. That's exactly why we've also invested in evaluations for each of our coding skills. Evals help us measure where these skills are still essential, where model behavior is improving on its own, and whether instruction changes are introducing unintended regressions.

You can install cds-code (or any of our other skills) to your favorite agent today with a single command:

The CDS MCP (Model Context Protocol) Server gives agents tools for querying up to date CDS component documentation. Instead of relying on potentially stale context, agents can ask questions like: "how do I add an icon to a CDS Button?" and get a precise, up-to-date answer grounded in actual facts.

Setup is one command:

Figma Code Connect is one of the clearest ways CDS improves AI-assisted development for engineers. When a developer starts from a Figma design, Code Connect helps bridge the gap between what was designed and the production components that should actually be used to build it.

By mapping CDS components across design and engineering, we make it easier for agents to translate Figma frames into code that uses the right system primitives (i.e. components) instead of approximations. That means extra prompting, fewer correction loops, and a faster handoff between design and engineering.

The payoff is better output with less waste: more consistent code, quicker implementation, and lower AI token spend because agents have a clearer path to the right answer the first time. Notably, in our own evaluations, sessions implementing designs where Code Connect was set up, produced higher quality results and reduced the number of tokens generated by the Figma MCP server; a win-win!

As more designers want to prototype with code, they can increasingly benefit from the same CDS context and agent skills engineers use today. With the surge in AI prototyping tools and overall advances in agent-generated code, we've seen designers become more inclined to design with actual code instead of pixels. Much of the AI tooling we built for engineers requires technical setup: cloning git repositories, installing skills, configuring MCP servers, managing dependencies and more. This creates a real barrier for designers who want to build something quickly without requiring a deep technical understanding of what happens under the hood.

We built the CDS Playground to address that, and to do more than what other prototyping tools can offer.

The Playground has two core jobs:

1. Remove the technical setup barrier for designers

The Playground is a live, browser-based environment where all CDS components and agent skills come preinstalled and where no config or local environment setup is required. A designer can leverage it in any Agent they choose (e.g. Claude Code, Cursor etc.), describe what they want to build, and start building a real CDS UI immediately. It's AI-powered prototyping without the DevOps tax.

2. Build a Coinbase-native solution with the right context baked in

The Playground is integrated directly with Coinbase systems, including access to all of Coinbase's internal Agent Skills and product design templates so that AI agents operating inside it have the best possible context from the start. They know the component library. They know the patterns. They know what "Coinbase UI" actually looks like and how it functions. They also know how to connect the agent output directly into existing Coinbase infrastructure and processes.

This matters because context quality and output quality are highly correlated. An agent with a generic React prompt will give you generic React code. An agent with CDS skills, the right infrastructure, and product context will give you something you can actually ship or at minimum, something that accurately represents what the shipped product would look like.

Design systems in the AI era have a broader responsibility to serve far more people than the traditional product designers and front-end engineers.

It used to be: "Let's not rebuild the same button 40 times." That's still true. But the bigger opportunity now is enabling the entire company including PMs, strategists, founders, and operators to get to good ideas faster.

When someone can describe a product idea in plain language and get back a high-fidelity prototype that looks and feels like Coinbase, the quality of the conversation changes. You're not evaluating a wireframe or a whiteboard sketch and asking people to imagine the real thing. You're looking at something close enough to the real thing that you can actually evaluate the flow, the hierarchy and the feel.

That's a fundamentally different kind of feedback loop. Ideas that used to take weeks to validate can be stress-tested in an afternoon. And because the prototypes are built on CDS, they're not throwaway artifacts, they're a starting point for real production work.

Design systems in an AI-native world are infrastructure for the entire company's ability to think visually and move fast. CDS isn't just a component library for engineers. It's shared information and a shared language that can be reached from anywhere, by anyone, whether that's a designer, an engineer or an agent. It's the shared language that lets anyone at Coinbase turn an idea into something real, quickly, consistently, and at a quality bar that reflects who we are.

We're just getting started.

Have questions about CDS? Check out the CDS Open Source site.