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

• cds-code skill -- this skill depends on cds-code for component selection, styling rules, doc lookup workflow, and code quality standards. If cds-code is not installed, tell the user to install it first.
• Figma MCP server must be connected and accessible. Verify by checking whether get_design_context is available as an MCP tool.
• CDS MCP server must be connected for doc lookups via list-cds-routes and get-cds-doc.