CN113867694B - 一种智能生成前端代码的方法和系统 - Google Patents

Abstract

本发明公开了一种智能生成前端代码的方法和系统，实现从产品到设计再到代码的一站式服务，提升了对交互和数据绑定的支持，强化了对交互逻辑的支撑，从而更好的实现交互效果。其技术方案为：系统包括产品模块、设计模块、前端模块以及底层平台模块，其中产品模块用于为产品经理提供线框图或原型图的创作；设计模块用于基于产品模块生成并传输来的线框图或原型图自动生成设计图和图像资源；前端模块用于基于设计模块生成的设计图和图像资源生成前端代码并通过运行前端代码呈现网页；底层平台模块用于供前端代码运行。

Description

一种智能生成前端代码的方法和系统

技术领域

本发明涉及一种代码生成技术，具体涉及一种通过原型图、设计稿、图片分析实现智能生成前端代码的方法和系统，可应用于UI设计、UI交互、前端页面开发、人工智能分析、大数据分析等领域。

背景技术

在一个完整的项目开发过程中，一般包含以下几个步骤：产品经理提出想法(ideas)并创建原型图→设计师根据原型图润色出视觉交互稿即PSD设计稿→前端工程师将PSD设计稿还原成网页→后端工程师开发接口→前后端进行接口联调→测试工程师根据需求进行测试。上述的“前端工程师还原设计稿”步骤中的设计稿到前端还原页面的过程称之为D2C(即Design to Code，从设计到代码)，这个过程涉及到前端对PSD设计稿的还原和设计师对页面的走查。

阿里推出的imgcook是使用机器学习和插件辅助给设计师和前端工程师提供统一的协作界面，自动完成设计稿到代码的过程。但是目前的技术仅局限于页面的生成，对交互和数据绑定、以及简单的交互逻辑支撑的不是很好。

此外，除了上述的D2C，国外推出的诸如teleportHQ、pix2Code等，能够直接将产品画在纸上或白板上的线框图直接生成前端html页面。

但是，目前为止，还没有一个网站能够支持从想法到设计再到代码的一站式操作，简称I2D2C，即从想法到设计到代码。

发明内容

以下给出一个或多个方面的简要概述以提供对这些方面的基本理解。此概述不是所有构想到的方面的详尽综览，并且既非旨在指认出所有方面的关键性或决定性要素亦非试图界定任何或所有方面的范围。其唯一的目的是要以简化形式给出一个或多个方面的一些概念以为稍后给出的更加详细的描述之序。

本发明的目的在于解决上述问题，提供了一种智能生成前端代码的方法和系统，实现从产品到设计再到代码的一站式服务，提升了对交互和数据绑定的支持，强化了对交互逻辑的支撑，从而更好的实现交互效果。

本发明的技术方案为：本发明揭示了一种智能生成前端代码的系统，系统包括产品模块、设计模块、前端模块以及底层平台模块，其中：

产品模块用于为产品经理提供线框图或原型图的创作；

设计模块用于基于产品模块生成并传输来的线框图或原型图自动生成设计图和图像资源；

前端模块用于基于设计模块生成的设计图和图像资源生成前端代码并通过运行前端代码呈现网页；

底层平台模块用于供前端代码运行。

根据本发明的智能生成前端代码的系统的一实施例，设计模块进一步配置为通过对产品经理的线框图或原型图的分析、经识别图层、图层操作、布局算法在内的操作，自动生成设计图。

根据本发明的智能生成前端代码的系统的一实施例，前端模块进一步包括：物料识别层单元、图层处理层单元、图层再加工层单元、布局算法层单元、语义化层单元、字段绑定层单元、业务逻辑层单元、代码运行单元。

根据本发明的智能生成前端代码的系统的一实施例，前端模块进一步配置如下：

物料识别层单元，用于对设计图中的物料的不同模块、组件及控件进行识别；

图层处理层单元，用于对物料识别层单元识别出的模块、组件及控件中的图片进行分离和样式提取；

图层再加工层单元，用于对已提取的图层进行深度加工，便于最终的视觉输出；

布局算法层单元，用于对图层再加工所得到的图层群进行布局上的约定，得到完整的DOM树结构；

语义化层单元，用于将DOM树转化为更语义化的前端代码；

字段绑定层单元，用于识别设计稿中的文本和图片语义分类；

业务逻辑层单元，用于对已配置的业务逻辑通过业务逻辑识别和表达器来生成业务逻辑代码协议；

代码运行单元，用于供前端开发工程师进行编码，架构成前端页面，并加入交互效果，以便用户的可视化操作。

本发明还揭示了一种智能生成前端代码的方法，方法运行在上述的系统之上，方法包括：

步骤1：将产品经理提供的想法转化为sketch设计稿或设计图；

步骤2：对获取到的设计稿或设计图进行分析和处理，得到JSON数据资源；

步骤3：将获取到的JSON数据资源源整合为前端代码并导出；

步骤4：将导出的文件转换为语义化的前端代码。

根据本发明的智能生成前端代码的方法的一实施例，步骤1进一步包括：

对产品经理提供的线框图或原型图进行自然语言分析，通过对产品经理提供的线框图与机器学习获取到的大量设计资源进行比对，生成sketch设计稿或设计图。

根据本发明的智能生成前端代码的方法的一实施例，步骤2进一步包括：

首先，使用sketch插件对图层进行分析，如果是Symbol图层则先使用Symbol转换将其转化为一般图层，然后对一般图层进行图层处理，如果该图层有子元素则先对子元素进行循环遍历，直到没有子元素为止；

然后，对蒙层进行识别，计算蒙层及其影响到的图层区域，对其做CSS属性上的截取处理；

最后，对覆盖元素进行打标，合并相同的图层，舍弃空白图层，同时进行形状处理、图像处理、图层组处理及文字导出。

根据本发明的智能生成前端代码的方法的一实施例，步骤2的JSON数据资源包括以下信息：字体、css样式、图标、图片。

根据本发明的智能生成前端代码的方法的一实施例，步骤3导出的是JSON文件。

根据本发明的智能生成前端代码的方法的一实施例，步骤4的语义化的前端代码在不同平台设备上兼容运行。

本发明对比现有技术，有如下的有益效果：本发明通过实现从产品到设计再到代码的一站式服务，提升了对交互和数据绑定的支持，强化了对交互逻辑的支撑，从而更好的实现交互效果。

附图说明

在结合以下附图阅读本公开的实施例的详细描述之后，能够更好地理解本发明的上述特征和优点。在附图中，各组件不一定是按比例绘制，并且具有类似的相关特性或特征的组件可能具有相同或相近的附图标记。

图1示出了本发明的智能生成前端代码的系统的一实施例的框架图。

图2示出了图1所示的系统实施例中的前端模块的原理图。

图3示出了本发明的智能生成前端代码的方法的一实施例的流程图。

具体实施方式

以下结合附图和具体实施例对本发明作详细描述。注意，以下结合附图和具体实施例描述的诸方面仅是示例性的，而不应被理解为对本发明的保护范围进行任何限制。

图1示出了本发明的智能生成前端代码的系统的一实施例的框架。请参见图1，本实施例的智能生成前端代码的系统包括：产品模块、设计模块、前端模块以及底层平台模块。

产品模块输出至设计模块，设计模块输出至前端模块，前端模块输出至底层平台模块。

产品模块用于为产品经理提供线框图或原型图的创作，其中产品经理所作的线框图或原型图用于表达软件用途和功能。

具体来说，产品模块为实现上述的功能，进行以下的具体处理：

产品经理在产品模块中将软件所要实现的功能和交互逻辑以线框图或原型图的方式来表达。通常可以直接用线条及线框画成线框图，也可以用axure(一种在线协作的设计工具)、墨刀、蓝湖等工具画出原型图。

设计模块用于基于产品模块生成并传输来的线框图或原型图自动生成PSD设计图和图像资源。自动生成PSD设计图和图像资源是通过网站生成的，通过对产品经理的线框图或原型图的分析、经识别图层、图层操作、布局算法在内的操作，最终自动生成PSD设计图。

前端模块用于基于设计模块生成的PSD设计图和图像资源生成前端代码并进行表达，以实现网页效果。图像资源例如是PNG或JPG图像。请参见图2，前端模块包括物料识别层单元、图层处理层单元、图层再加工层单元、布局算法层单元、语义化层单元、字段绑定层单元、业务逻辑层单元、代码运行单元。

上述单元之间的数据传输关系为：物料识别层单元输出至图层处理层单元，图层处理层单元输出至图层再加工层单元和布局算法层单元，布局算法层单元输出至语义化层单元，语义化层单元输出至字段绑定层单元，字段绑定层单元输出至业务逻辑层单元。业务逻辑层单元输出至代码运行单元。

物料识别层单元用于对PSD设计图中的物料的不同模块、组件及控件进行识别。

物料识别层单元为实现上述的功能，进行以下的具体处理：首先，物料识别层单元从Sketch(一款专业矢量图形处理应用)设计稿、PSD(Photoshop格式的)设计图以及图像资源中识别出不同的模块、组件和控件。例如先对页面进行分割、再进行基础组件的识别以及控件的识别，此外会有一些定制化的操作，比如根据实际的业务需求对业务模块及业务组件进行识别，这样能够快速复用之前已有的功能点。

图层处理层单元用于对物料识别层单元识别出的模块、组件及控件中的图片进行分离和样式提取。

图层处理层单元为实现上述的功能，进行以下的具体处理：通过Sketch插件或PSCEP插件处理Sketch设计稿，按DFS(Depth-first Search，深度优先搜索)的方式循环遍历所有类型的图层，分离图层图像的基本信息，包括位置和大小，并进行样式提取。

值得注意的是由于Sketch插件里Symbol的概念相当于它的Symbolmaster的子类，可以覆盖它的Symbolmaster的部分属性，所以对于Symbol类型的图层，要找到该图层的Symbolmaster，提取相关信息。

图层再加工层单元用于对已提取的图层进行深度加工，便于最终的视觉输出。

图层再加工层单元为实现上述的功能，进行以下的具体处理：图层再加工层单元对所有被蒙层影响的或者被其他图层覆盖的元素打标，检测出无用图层并舍弃，并对重复图层进行合并，规则形状图层进行保留，因为无用图层和重复图层会影响到当前图层的视觉输出。之后，根据各个图层类型所拥有的具体样式的不同，对Shape(形状)，Image(图像)，Text(文本)和其他图层分别做处理，把相关的Sketch属性转化为CSS(Cascading StyleSheets，层叠样式表)理解的形式。

布局算法层单元用于通过通用布局算法对图层再加工所得到的图层群进行布局上的约定以提高视觉稿的布局还原结果，得到完整的DOM树结构。

布局算法层单元为实现上述的功能，进行以下的具体处理：分析布局中各个元素的位置、大小和类型，结合元素间的关系，将图层群从绝对定位的布局转化为相对定位的布局，这就是通用布局算法。然后布局算法层单元进行图层规则处理，将输入的Sketch设计稿的层级结构都去掉，将所有图层变成一个一维结构，以减少设计稿对还原结果的干扰。此外，布局算法层单元进行元素自适应型的处理，包括元素自身的扩展性，文本自适应、图片自适应、元素对齐关系、元素最大宽高容错性等。在得到完整的DOM树结构后，布局算法层单元的基本任务也已经完成了。布局算法层单元还可以对DOM树节点相似度进行循环检测，以便更好地完善DOM树。

语义化层单元用于将DOM树转化为更语义化的前端代码。

语义化层单元为实现上述的功能，进行以下的具体处理：通过不同元素的不同布局权重进行页面布局显示，采用通用语义使页面呈现清晰的结构。此外，对不同图像及字体图标(iconfont)进行分类，并建立模型，减少差异化，从而生成更有利于SEO(SearchEngine Optimization，搜索引擎优化)、便于团队开发及维护的代码。

字段绑定层单元用于识别Sketch设计稿中的文本和图片语义分类，特别是文字部分。

字段绑定层单元为实现上述的功能，进行以下的具体处理：对图层里的静态数据结合数据接口做接口动态数据字段绑定映射。对不同数据类型匹配不同的字段规则，并使用字段来映射数据内容是否静态文案，以及不同的图片字段及文本字段。

业务逻辑层单元用于对已配置的业务逻辑通过业务逻辑识别和表达器来生成业务逻辑代码协议。

业务逻辑层单元为实现上述的功能，进行以下的具体处理：根据视图智能识别，并且视图驱动自由组装，包含：小而美的逻辑点(一行表达式，或一般不足以封装成组件的竖行代码)、基础组件、业务组件等，这些都属于可复用的通用逻辑单元，此外，还进行不同的业务逻辑识别并进行业务逻辑表达，从而实现定制化。

代码运行单元供前端开发工程师使用HTML、CSS、JS等编程语言进行编码，架构成前端页面，并加入交互效果，以便用户的可视化操作。在本实施例中，前端模块自动将Sketch设计稿生成具有交互效果的前端代码，前端开发人员只需要对其进行一些润色和修改就可以直接上线，作为网站进行访问。

底层平台模块是前端代码运行的各个平台，随着前端发展的愈发壮大，跨平台应用的必要性也随之增加。通过本发明的系统可以生成适配IOS、Android、Web等不同端的前端配套代码。这些代码的兼容性较好，页面局部也是自适应的，能够适配不同设备之间的差异性。

图3示出了本发明的智能生成前端代码的方法的一实施例的流程。请参见图3，本实施例的智能生成前端代码的方法的实施步骤详述如下。

步骤1：将产品经理提供的想法转化为sketch设计稿或PSD设计图。

详细而言，步骤1中的具体处理为：

首先，产品经理提供想法Ideas，对产品经理提供的线框图或原型图进行自然语言分析，生成sketch设计稿。这步中主要设计的是对产品经理提供的线框图与机器学习获取到的大量设计资源进行比对，从而获取最适合的sketch设计稿。

步骤2：对获取到的sketch设计稿或设计图进行分析和处理，得到JSON数据资源。

JSON数据资源包括以下信息：字体、css样式、图标、图片。

详细而言，步骤2中的具体处理为：

使用sketch中的插件对图层进行分析，如果是Symbol图层，则先使用Symbol转换将其转化为一般图层。然后对一般图层进行图层处理，如果该图层有子元素，则先对子元素进行循环遍历，直到没有子元素为止。接下来对Mask(蒙层)进行识别，Mask图层不但会影响自身的处理，也会影响其他图层的视觉，所以遇到Mask需要多图层一起处理。针对这些问题，计算Mask及其影响到的图层区域，对其做CSS属性上的常规截取处理。然后，对覆盖元素进行打标，合并相同的图层，舍弃空白图层，同时进行Shape(形状)处理、Image处理、layerGroup(图层组)处理及文字导出。

步骤3：将获取到的上述JSON数据资源整合为前端代码并导出。

导出的文件例如是JSON文件。

步骤4：将导出的文件转换为语义化的前端代码，同时能够兼容不同的移动端及Web端设备。

尽管为使解释简单化将上述方法图示并描述为一系列动作，但是应理解并领会，这些方法不受动作的次序所限，因为根据一个或多个实施例，一些动作可按不同次序发生和/或与来自本文中图示和描述或本文中未图示和描述但本领域技术人员可以理解的其他动作并发地发生。

本领域技术人员将进一步领会，结合本文中所公开的实施例来描述的各种解说性逻辑板块、模块、电路、和算法步骤可实现为电子硬件、计算机软件、或这两者的组合。为清楚地解说硬件与软件的这一可互换性，各种解说性组件、框、模块、电路、和步骤在上面是以其功能性的形式作一般化描述的。此类功能性是被实现为硬件还是软件取决于具体应用和施加于整体系统的设计约束。技术人员对于每种特定应用可用不同的方式来实现所描述的功能性，但这样的实现决策不应被解读成导致脱离了本发明的范围。

结合本文所公开的实施例描述的各种解说性逻辑板块、模块、和电路可用通用处理器、数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)或其它可编程逻辑器件、分立的门或晶体管逻辑、分立的硬件组件、或其设计成执行本文所描述功能的任何组合来实现或执行。通用处理器可以是微处理器，但在替换方案中，该处理器可以是任何常规的处理器、控制器、微控制器、或状态机。处理器还可以被实现为计算设备的组合，例如DSP与微处理器的组合、多个微处理器、与DSP核心协作的一个或多个微处理器、或任何其他此类配置。

结合本文中公开的实施例描述的方法或算法的步骤可直接在硬件中、在由处理器执行的软件模块中、或在这两者的组合中体现。软件模块可驻留在RAM存储器、闪存、ROM存储器、EPROM存储器、EEPROM存储器、寄存器、硬盘、可移动盘、CD-ROM、或本领域中所知的任何其他形式的存储介质中。示例性存储介质耦合到处理器以使得该处理器能从/向该存储介质读取和写入信息。在替换方案中，存储介质可以被整合到处理器。处理器和存储介质可驻留在ASIC中。ASIC可驻留在用户终端中。在替换方案中，处理器和存储介质可作为分立组件驻留在用户终端中。

在一个或多个示例性实施例中，所描述的功能可在硬件、软件、固件或其任何组合中实现。如果在软件中实现为计算机程序产品，则各功能可以作为一条或更多条指令或代码存储在计算机可读介质上或藉其进行传送。计算机可读介质包括计算机存储介质和通信介质两者，其包括促成计算机程序从一地向另一地转移的任何介质。存储介质可以是能被计算机访问的任何可用介质。作为示例而非限定，这样的计算机可读介质可包括RAM、ROM、EEPROM、CD-ROM或其它光盘存储、磁盘存储或其它磁存储设备、或能被用来携带或存储指令或数据结构形式的合意程序代码且能被计算机访问的任何其它介质。任何连接也被正当地称为计算机可读介质。例如，如果软件是使用同轴电缆、光纤电缆、双绞线、数字订户线(DSL)、或诸如红外、无线电、以及微波之类的无线技术从web网站、服务器、或其它远程源传送而来，则该同轴电缆、光纤电缆、双绞线、DSL、或诸如红外、无线电、以及微波之类的无线技术就被包括在介质的定义之中。如本文中所使用的盘(disk)和碟(disc)包括压缩碟(CD)、激光碟、光碟、数字多用碟(DVD)、软盘和蓝光碟，其中盘(disk)往往以磁的方式再现数据，而碟(disc)用激光以光学方式再现数据。上述的组合也应被包括在计算机可读介质的范围内。

提供对本公开的先前描述是为使得本领域任何技术人员皆能够制作或使用本公开。对本公开的各种修改对本领域技术人员来说都将是显而易见的，且本文中所定义的普适原理可被应用到其他变体而不会脱离本公开的精神或范围。由此，本公开并非旨在被限定于本文中所描述的示例和设计，而是应被授予与本文中所公开的原理和新颖性特征相一致的最广范围。

Claims (8)

1.一种智能生成前端代码的系统，其特征在于，系统包括产品模块、设计模块、前端模块以及底层平台模块，其中：

产品模块用于为产品经理提供线框图或原型图的创作；

设计模块用于基于产品模块生成并传输来的线框图或原型图自动生成设计图和图像资源；

前端模块用于基于设计模块生成的设计图和图像资源生成前端代码并通过运行前端代码呈现网页；

底层平台模块用于供前端代码运行；

其中，前端模块进一步包括：物料识别层单元、图层处理层单元、图层再加工层单元、布局算法层单元、语义化层单元、字段绑定层单元、业务逻辑层单元、代码运行单元，其中：

物料识别层单元，用于对设计图中的物料的不同模块、组件及控件进行识别，进一步包括先从Sketch设计稿、PSD设计图以及图像资源中识别出不同的模块、组件和控件，包括先对页面进行分割，再进行基础组件的识别以及控件的识别，根据业务需求对业务模块以及业务组件进行识别，以便复用已有的功能点；

图层处理层单元，用于对物料识别层单元识别出的模块、组件及控件中的图片进行分离和样式提取，其中包括通过Skecth插件或PS CEP插件处理Sketch设计稿，循环遍历所有类型的图层以分离图层图像的包括位置和大小在内的基本信息，并进行样式提取；

图层再加工层单元，用于对已提取的图层进行深度加工，便于最终的视觉输出，其中包括对所有被蒙层影响的或者被其他图层覆盖的元素打标，检测出无用图层并舍弃，对重复图层进行合并，规则形状图层进行保留，再根据各个图层类型所拥有的样式的不同，对包括形状、图像、文本在内的各个图层分别进行处理，将Sketch属性转化为CSS理解的形式；

布局算法层单元，用于对图层再加工所得到的图层群进行布局上的约定，得到完整的DOM树结构；

语义化层单元，用于将DOM树转化为更语义化的前端代码；

字段绑定层单元，用于识别设计稿中的文本和图片语义分类；

业务逻辑层单元，用于对已配置的业务逻辑通过业务逻辑识别和表达器来生成业务逻辑代码协议；以及

代码运行单元，用于供前端开发工程师进行编码，架构成前端页面，并加入交互效果，以便用户的可视化操作。

2.根据权利要求1所述的智能生成前端代码的系统，其特征在于，设计模块进一步配置为通过对产品经理的线框图或原型图的分析、经识别图层、图层操作、布局算法在内的操作，自动生成设计图。

3.根据权利要求1所述的智能生成前端代码的系统，其特征在于，前端模块进一步包括：物料识别层单元、图层处理层单元、图层再加工层单元、布局算法层单元、语义化层单元、字段绑定层单元、业务逻辑层单元、代码运行单元。

4.一种智能生成前端代码的方法，其特征在于，方法运行在如权利要求1所述的系统之上，方法包括：

步骤1：将产品经理提供的想法转化为sketch设计稿或设计图；

步骤2：对获取到的设计稿或设计图进行分析和处理，得到JSON数据资源；

步骤3：将获取到的JSON数据资源整合为前端代码并导出；

步骤4：将导出的文件转换为语义化的前端代码；

其中，步骤2进一步包括：

首先，从Sketch设计稿、PSD设计图以及图像资源中识别出不同的模块、组件和控件，包括先对页面进行分割，再进行基础组件的识别以及控件的识别，根据业务需求对业务模块以及业务组件进行识别，以便复用已有的功能点；

然后，通过Skecth插件或PS CEP插件处理Sketch设计稿，循环遍历所有类型的图层以分离图层图像的包括位置和大小在内的基本信息，并进行样式提取；

再对所有被蒙层影响的或者被其他图层覆盖的元素打标，检测出无用图层并舍弃，对重复图层进行合并，规则形状图层进行保留，再根据各个图层类型所拥有的样式的不同，对包括形状、图像、文本在内的各个图层分别进行处理，将Sketch属性转化为CSS理解的形式；

最后，对覆盖元素进行打标，合并相同的图层，舍弃空白图层，同时进行形状处理、图像处理、图层组处理及文字导出。

5.根据权利要求4所述的智能生成前端代码的方法，其特征在于，步骤1进一步包括：

对产品经理提供的线框图或原型图进行自然语言分析，通过对产品经理提供的线框图与机器学习获取到的大量设计资源进行比对，生成sketch设计稿或设计图。

6.根据权利要求4所述的智能生成前端代码的方法，其特征在于，步骤2的JSON数据资源包括以下信息：字体、css样式、图标、图片。

7.根据权利要求4所述的智能生成前端代码的方法，其特征在于，步骤3导出的是JSON文件。

8.根据权利要求4所述的智能生成前端代码的方法，其特征在于，步骤4的语义化的前端代码在不同平台设备上兼容运行。

Images