# Design-to-code and beyond: inside Coinbase’s MCP ecosystem | Schema by Figma 2025

Source: https://www.youtube.com/watch?v=ajyyLiIoSdY
Recap page: https://rapidrecap.app/video/ajyyLiIoSdY
Generated: 2025-11-13T14:35:47.564+00:00

---
## Quick Overview

Coinbase successfully integrated its internal Coinbase Design System (CDS) with the Model Context Protocol (MCP) framework, creating a unified AI ecosystem that accelerates the design-to-code process by enabling AI agents to access design system context directly, leading to 5x faster development, higher code quality, better component usage, improved accessibility, and happier developers.

**Key Points:**
- Coinbase engineers approximately 2250 engineers, merging over 5000 PRs per week, serving over 100M users with over $500B in Assets Under Management (AUM).
- The integration of CDS with Figma via MCP standardizes how AI agents connect to design system data, providing rich context like import paths, usage examples, and prop tables.
- The CDS + Figma MCP integration results in a 5x faster design-to-code process, higher code quality, correct component usage, better accessibility, and happier developers.
- The Model Context Protocol (MCP) is an open protocol from Anthropic that standardizes how AI agents connect to external data sources on a case-by-case basis, becoming an industry standard.
- Coinbase created an internal MCP App Store allowing any team to explore, install, and build MCPs with features like one-click installation into Carson/Claude and a fully baked CI/CD system.
- The unified AI ecosystem powered by MCPs spans from Design to Production, connecting tools like CDS, Figma, PlayerRight, Sourcegraph, Chromatic/DocuSafe, Amplitude/DataDog, and PaperCity to ensure consistency and quality.

![Screenshot at 0:05: Siddharth Kulkarni walking onto the stage to begin his presentation on Coinbase's MCP ecosystem.](https://ss.rapidrecap.app/screens/ajyyLiIoSdY/00-00-05.png)

**Context:** Siddharth Kulkarni, a Senior Software Engineer at Coinbase on the AI tooling team, presents the integration of Coinbase's Design System (CDS) with the Model Context Protocol (MCP) ecosystem, developed initially from Anthropic's framework. This presentation details how this integration bridges the gap between design (Figma) and engineering (IDE) by providing AI tools with direct, contextual access to the design system's components and documentation, solving the context-switching problem inherent in traditional design-to-code handoffs.

## Detailed Analysis

The presentation outlines Coinbase's journey in streamlining its design-to-code workflow using the Model Context Protocol (MCP) to integrate its internal Coinbase Design System (CDS). Coinbase, a large organization with about 2250 engineers supporting over 100M users and $500B AUM, faced friction in the design-to-code process due to constant context switching between Figma, documentation (Storybook), and the IDE. To solve this, they adopted the MCP, an open protocol standardizing how AI agents connect to data sources. The CDS MCP specifically provides AI agents with comprehensive context about components—including import paths, usage examples, full prop tables, and accessibility information—which previously required manual lookups. This integration, facilitated by an internal MCP App Store for easy installation, has led to significant benefits: 5x faster design-to-code, higher code quality, correct component usage, better accessibility, and happier developers. The success of this design-to-code workflow is part of a larger "From Design to Production" unified AI ecosystem at Coinbase, which also includes MCPs for testing, documentation, quality assurance, and analytics, all designed to scale creativity and execution across the company.

### Coinbase Scale & Context

- ~2250 Engineers
- +5000 PRs/week
- +100M Users
- +$500B AUM
- Coinbase founded in June 2012.

### The Design-to-Code Problem

- Design-to-Code Hand-off equals lots of context switching between Figma, Storybook, and IDE, resulting in a slow, frustrating, error-prone process.

### Model Context Protocol (MCP)

- Open Protocol from Anthropic that standardizes how AI Agents connect to external data sources; CDS MCP provides LLMs with implementation details, code snippets, styling info, and component context (like props and accessibility guidelines).

### CDS MCP Features

- Provides a better interface to the LLM about components, props, patterns, accessibility guidelines, removing hallucination; includes methods like list_components and get_component.

### MCP App Store & Adoption

- Features one-click install into Carson/Claude, includes example MCPs like Sourcegraph/CDS, fully baked CI/CD, and is distributed via app store; adoption has been high with over 100 MCPs used over 1M times in 100 days.

### Key Takeaways

- AI amplifies creativity by enabling more innovation and noticing things; rethink first principles, don't just automate old workflows; design systems matter more than ever as AI defines the 'what' and design systems define the 'why'.

![Screenshot at 0:07: Siddharth Kulkarni greeting the audience and introducing the topic of Coinbase's MCP ecosystem.](https://ss.rapidrecap.app/screens/ajyyLiIoSdY/00-00-07.png)
![Screenshot at 0:24: Slide showing Coinbase statistics: ~2250 Engineers, +5000 PRs merged/week, +100M Users, +$500B AUM.](https://ss.rapidrecap.app/screens/ajyyLiIoSdY/00-00-24.png)
![Screenshot at 0:58: Visual comparison of Mobile Retail \(React Native\) and Desktop Retail \(React\) applications built using the design system.](https://ss.rapidrecap.app/screens/ajyyLiIoSdY/00-00-58.png)
![Screenshot at 1:17: Slide showing the evolution of the wallet product, now rebranded as the Base App, built in React Native.](https://ss.rapidrecap.app/screens/ajyyLiIoSdY/00-01-17.png)
![Screenshot at 1:40: Flip-board animation spelling out "OPEN SOURCE DESIGN SYSTEM" to introduce the open-source nature of the design system.](https://ss.rapidrecap.app/screens/ajyyLiIoSdY/00-01-40.png)
![Screenshot at 1:44: Slide showing typography scale examples within the design system, from Caption to Display 1.](https://ss.rapidrecap.app/screens/ajyyLiIoSdY/00-01-44.png)
![Screenshot at 3:24: Slide titled "Design to Code Handoff = Lots of Context Switching" using a Spider-Man meme to illustrate context switching friction between Figma, Storybook, and IDE.](https://ss.rapidrecap.app/screens/ajyyLiIoSdY/00-03-24.png)
![Screenshot at 3:56: Slide detailing "Code Connect" as a bridge between codebase and design files, noting it's great for simple components but insufficient for entire frames.](https://ss.rapidrecap.app/screens/ajyyLiIoSdY/00-03-56.png)
![Screenshot at 6:09: Diagram illustrating the Model Context Protocol \(MCP\) architecture, showing an LLM App connecting to various MCP servers \(GitHub, file system, etc.\).](https://ss.rapidrecap.app/screens/ajyyLiIoSdY/00-06-09.png)
![Screenshot at 6:41: Slide titled "CDS" under the MCP section, listing key capabilities like listing components and returning markdown with context.](https://ss.rapidrecap.app/screens/ajyyLiIoSdY/00-06-41.png)
![Screenshot at 7:40: Slide titled "CDS + Figma MCP" showing a handshake meme between CDS and Figma, listing benefits like 5x faster design-to-code and higher code quality.](https://ss.rapidrecap.app/screens/ajyyLiIoSdY/00-07-40.png)
![Screenshot at 8:51: Slide posing the question, "If MCPs work for design-to-code... what else can we accelerate?" featuring a Homer Simpson meme looking through a magnifying glass.](https://ss.rapidrecap.app/screens/ajyyLiIoSdY/00-08-51.png)
![Screenshot at 9:08: Slide detailing the "MCP App Store" features, including one-click install and distribution via an app store.](https://ss.rapidrecap.app/screens/ajyyLiIoSdY/00-09-08.png)
![Screenshot at 9:36: Slide summarizing the unified AI ecosystem powered by MCPs, spanning design to production tools like CDS, Figma, Sourcegraph, and PlayerRight.](https://ss.rapidrecap.app/screens/ajyyLiIoSdY/00-09-36.png)