干货 | 提升前端工程化，携程 Design2Code 从零到一的实践

作者简介

by，携程高级研发经理，专注低代码平台搭建和前端智能化技术。

Jialu，携程研发总监，专注大前端技术和工程化的研究与发展。

一、 背景

在软件开发过程中，团队协作效率的提高是我们共同关注的问题。为了解决这一问题，许多团队都开始使用智能化工具。Design2Code（简称D2C）工具是其中一种广受欢迎的选择。

在本文中，我们将分享D2C工具的核心算法方案设计和实现过程，以及一系列的解决方案。无论你是开发人员，还是设计师，本文都将为你提供有价值的信息。我们希望，通过阅读本文，能帮助你更好地了解D2C工具，并在实际工作中发挥出最大的价值。

二、 前置知识

2.1 基本概念

D2C是一种通过使用智能化技术将设计稿转化为代码的工具，旨在提升开发效率，减少人力成本，并缩短设计到开发的流程。通过将设计稿源文件（如：PSD、Sketch、Figma）转化为React、Vue、小程序等平台的前端代码，再使用领域特定语言（DSL）将其转化为各端代码，D2C通常通过人工智能训练的模型或算法实现。

2.2 哪些特性

• 高效协作：使用智能化技术，提升前端工程师和设计师之间的协作效率。

• 高还原度：降低设计师检查页面还原度的人力成本。

• 高兼容性：减少多端适配的开发成本。

• 快速上线：自动生成视图层代码，减少手工工作量。

三、 业界现状

我们对业内比较出色的D2C产品进行调研，包括阿里 imgcook、京东 Deco、CodeFun、微软 AI Lab 和 Locofy。我们在调研过程中，对各家公司的产品进行了对比，但这里不再赘述。通过调研，我们得出初步结论：

• 预装Sketch插件或上传文件解析，导出DSL数据。

• 通过 AI 自动处理并生成前端代码，支持使用Web编辑器对代码进行人工干预和编辑。

• 需要将设计稿数据存储在对方服务器。

• 代码未开源，解决方案也只是简略描述。

• 部分公司进阶功能需付费使用。

四、 效果展示

D2C系统转换流程介绍：

• 1. 上传Sketch源文件入口 → 2. 对数据进行处理并返回结果 → 3.展示转换结果。

• 通过“查看代码”功能获取多端代码。

• 我们对APP、H5 、Online和小程序设计稿进行了还原比对，还原精度达到80%，且在不断提升中。

下图展示了系统转换效果：

五、 解决方案