随着互联网的普及,网络用户增多,各个互联网公司需要让网站为用户创建良好的参与体验来提升用户粘性,以提高市场占有率。改善用户体验中最直观的部分就是把控前端页面的开发,但小型的软件外包企业通常不愿花费过多人力和时间去执行完整的设计与开发流程。因此,利用代码自动生成技术,研究并实现可以根据需求方所提供的简单的页面设计草图自动生成相应的前端HTML代码的系统,将会有效简化流程并提高开发效率。目前,以模板驱动的生成方法为主的代码生成技术在互联网行业内有着广泛的应用,但很少有根据图像生成代码的产品。现存的图像转换前端代码的技术通常是针对网页截图生成代码,且所生成的内容仅为原生的HTML代码,已经严重脱离目前主流的组件化前端开发趋势,显然不具备足够的应用价值。为解决上述问题,本课题将开发以手绘设计图像转换为主,以可视化配置为辅的前端组件化HTML代码生成系统作为研究方向。系统整体实现借助了前端React框架、后端Node JS的Express框架和非关系型数据库Mongo DB等技术,包含数据管理、页面配置和代码生成三大功能模块。系统的核心算法围绕根据手绘设计图生成DSL的技术展开研究,借鉴了图像描述技术的算法架构,整体采用编码器-解码器的结构,从图像编码模块、语言编码模块和解码模块三个部分进行研究。图像编码模块采用卷积神经网络结合稀疏降噪自编码器进行无监督训练的方法提取图像特征,语言编码模块采用word2vec技术并使用CBo W模型进行词嵌入编码,解码模块采用基于RNN和CNN两种方法用于对比。实验证明:选用基于CNN且包含6组卷积和注意力模块的解码模块,并选用尺寸为5的集束搜索的方法,生成DSL的效果最佳。在本课题引入的模块化组件与模板编译的配合下,系统能够提供高灵活度的可视化配置与实时预览功能,同时具备生成理想的工程代码的能力。本课题创新性的将前端代码组件化的特性与图像描述技术相结合,以前端配置化思想为引导,搭建出具有较高实用价值的代码生成系统。该系统的使用符合前端工程师的开发习惯,具备根据手绘设计图生成组件化HTML前端代码的功能,可以让开发者以外的人轻松参与到项目研发过程中,同时方便开发人员快速进行后续逻辑代码的编写,有效节约整体的工程耗时。