C2D2C (Code‑to‑Design‑to‑Code) Mode for Unified Design and Development Assets in JD Cloud Frontend

Overview: JD Cloud’s frontend team collaborated with the Relay design platform to create a C2D2C (Code‑to‑Design‑to‑Code) model that links the Mobius Design System assets bidirectionally, addressing scattered designer effort, version drift, and limited design‑to‑code results.

Background: The business component library grew to over 140 components, delivering an estimated 840 person‑days of efficiency and saving more than 3 million RMB in labor. Mobius also adopted the JDT Design Token system, improving design‑development collaboration.

Motivation: Beyond internal efficiency, the team sought to boost upstream‑downstream collaboration, especially between designers and developers, by unifying design and development assets.

Problems with separate assets:

Designers spend time creating high‑level components, binding DesignTokens, and handing off assets to developers.

Version gaps appear when DesignTokens are updated but not synchronised promptly.

Current Design‑to‑Code (D2C) only achieves basic results, with high maintenance cost and limited ability to recognise private frontend assets.

Solution – C2D2C workflow:

Use Code → Design to eliminate version gaps.

Leverage design‑platform plugins to manage DesignTokens and create a theme‑level asset system.

Apply Design → Code so developers only need to add business logic.

First‑phase results: Automatic generation of over 10 Figma controls from the Mobius Button component; designers could edit DesignTokens, which propagated to Figma variables and generated CSS/SCSS/JS files, updating themes such as corner radius and brand colors.

Feasibility study highlighted challenges:

HTML/CSS to design conversion may lose complex layouts (e.g., flex, auto‑layout).

Not all component interactions (animations, dynamic tabs) can be rendered as design controls.

Design‑to‑code accuracy is limited; the focus is on generating layout code for JD Cloud components rather than full Vue templates.

Both Relay and Figma provide APIs for bulk control generation; Figma’s variable system is currently more mature.

Implementation details:

Code → Design

Import DesignTokens into Figma via API to create Figma variables.

Use a 属性A=值,属性B=值,... naming scheme to build ComponentSets; each matrix element becomes a component Props set, rendered in the DOM.

Parse the rendered HTML/CSS and map it to Figma structures and layout configurations.

Design → Code

In partnership with the Relay platform, generated Figma component libraries are imported into Relay, enabling simple D2C for JD Cloud components. Future work includes AI‑assisted D2C and higher‑quality code generation (e.g., Builder.IO).

Future plans:

Unify all JD Cloud frontend assets under a single design‑development source.

Build a theme‑editing system with real‑time DesignToken preview, import/export.

Align DesignTokens with community standards (https://tr.designtokens.org/format/#abstract).

Explore AI‑driven D2C pipelines.