Lossless Design-Frontend Collaboration: The Evolution of NetEase Cloud Music's Design Collaboration Practice

This article introduces NetEase Cloud Music's exploration and practice in design-frontend collaboration since 2021. The author, from the Cloud Music Design Platform team, presents a systematic approach to solving three core problems: reducing communication costs between designers and frontend developers, improving designer efficiency, and enhancing frontend developer productivity.

The evolution of their design collaboration follows three stages: from the primitive phase to engineering phase 1.0, then to engineering phase 2.0, and finally to the intelligent phase. The core innovation is the C2D2C (Code to Design to Code) methodology that eliminates information loss in the traditional design system approach.

Engineering Phase 1.0: They built three sub-products - the Dolphin Design System, Fin 1.0 Design Plugin, and Seal D2C. The Dolphin Design System uses a three-layer architecture supporting both React Native and H5 through react-native-web. The configuration scheme separates variable visual elements from invariant skeletons using global and component tokens for theming and brand customization.

Engineering Phase 2.0: Addressed issues like designer-friendly C2D workflows using Figma/MasterGo Libraries, marketing activity component D2C restoration using Headless UI, and code readability optimization using LLM for semantic className improvements.

Intelligent Phase (Fin 2.0): Introduces AI-powered capabilities including text-to-design, text-to-image, and text-to-icon generation, along with an AIGC asset sharing center. The product follows "AI is the UI" and "small and beautiful" design principles, using conversational AI as the primary interaction paradigm.

Key technical implementations include: html2figma for C2D conversion, metadata-based component recognition for D2C, layout optimization using row-column segmentation with 2D projection, and LLM-based semantic optimization for generated code. As of December 2023, Fin 2.0 has generated over 11,360 images and 921 design drafts across 10+ business scenarios, achieving 33%-200% efficiency improvement.