CDS Design To Code

This skill provides a structured workflow for translating Figma designs into CDS-first production code with high visual fidelity. It bridges the Figma MCP server with the Coinbase Design System, ensuring that designs are implemented using real CDS components and conventions rather than raw Figma HTML output.

The goal is not to copy the Figma output literally. The goal is to use Figma MCP as the design source, then adapt that output into the target project's real CDS component stack.

When to use

• Use when the user shares a Figma URL like figma.com/design/...?node-id=... and wants it implemented.
• Use when translating a Figma design into CDS-first React or React Native code.
• Use when the user asks to "implement this design" or "build this from Figma."
• Do not use when there is no Figma design to reference -- use the cds-code skill instead for general CDS UI work.
• Do not use for design feedback or critique without an implementation request.

Prerequisites