(19)中华 人民共和国 国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202111547583.6 (22)申请日 2021.12.16 (71)申请人 上海浦东发展银行股份有限公司 地址 200002 上海市黄浦区中山 东一路12 号 (72)发明人 徐杰　 (74)专利代理 机构 上海科盛知识产权代理有限 公司 312 25 代理人 丁云 (51)Int.Cl. G06F 8/38(2018.01) G06F 8/36(2018.01) G06F 8/34(2018.01) G06N 20/00(2019.01) G06F 11/36(2006.01) (54)发明名称 一种智能前端设计方法、 装置及存 储介质 (57)摘要 本发明涉及一种智能前端设计方法、 装置及 存储介质， 该方法包括： 基于设计稿提取页面元 素信息、 识别并加以描述； 智能产出前端代码； 对 智能产出的前端代码在线编排调试； 智能前端发 布阅览。 与现有技术相比， 本发明实现了智 能前 端的自动化智能布局、 编码， 一键发布， 自动化程 度高， 实现了标准化、 组件化、 智能化、 可视化一 体的设计 。 权利要求书1页 说明书3页 附图1页 CN 114416078 A 2022.04.29 CN 114416078 A 1.一种智能前端设计方法， 其特 征在于， 该 方法包括： 基于设计稿提取页面元 素信息、 识别并加以描述； 智能产出 前端代码； 对智能产出的前端代码在线编排调试； 智能前端发布阅览。 2.根据权利要求1所述的一种智能前端设计方法， 其特征在于， 所述的前端页面的设计 稿包括结构化的设计文件。 3.根据权利要求1所述的一种智能前端设计方法， 其特征在于， 提取页面元素信息、 识 别并加以描述具体包括： 图层处理： 识别设计稿中的页面布局及其层级结构， 完成结构解析； 组件识别： 通过图层处理后的有效节点， 递归节点根据模型识别可复用组件， 完成组件 描述。 4.根据权利要求3所述的一种智能前端设计方法， 其特征在于， 图层处理时采用深度 学 习模型进行页面布局及其层级结构识别。 5.根据权利要求3所述的一种智能前端设计方法， 其特征在于， 所述的智能产 出前端代 码具体包括： 页面布局： 根据已解析的结构及组件， 识别页面布局， 提取布局特 征； 组件命名： 将识别的组件及其内部元 素， 结合语义分析产生可维护的名称； 数据绑定： 通过设计稿提取文本内容， 完成初步数据绑定； 业务逻辑： 根据已识别组件， 绑定推荐的代码， 自动化智能产出 前端代码。 6.根据权利要求1所述的一种智能前端设计方法， 其特征在于， 所述的前端代码在线编 排调试具体包括： 编排干预： 智能产出的前端代码推送到代码仓库后， 系统即时加载， 实时预览页面信 息， 根据需求在线调整各项参数， 完成人工 干预； 工程调试： 通过WebIDE， 加载工程模块代码， 在线及时调整业 务逻辑。 7.根据权利要求6所述的一种智能前端设计方法， 其特征在于， 实时预览的页面信 息包 括页面布局、 图片、 文本信息 。 8.根据权利要求1所述的一种智能前端设计方法， 其特征在于， 智能前端发布阅览具体 为： 通过持续集 成平台拉取代码仓库的代码完成编译后， 将编译产 物通过容器发布平台， 投 放到绑定环境当中， 发布完成后用户通过入口查看效果。 9.一种智能前端设计装置， 其特征在于， 包括存储器和处理器， 所述存储器用于存储计 算机程序， 所述处理器用于当执行所述计算机程序时， 实现如权利要求1～8任意一项所述 的智能前端设计方法。 10.一种存储介质， 其上存储有计算机程序， 其特征在于， 该计算机程序被处理器执行 时实现如权利要求1～8任意 一项所述的智能前端设计方法。权　利　要　求　书 1/1 页 2 CN 114416078 A 2一种智能前端设计方 法、 装置及存储介质 技术领域 [0001]本发明涉及信息智能化处理技术领域， 尤其是涉及一种智能前端设计方法、 装置 及存储介质。 背景技术 [0002]目前， 前端的开发一般 由设计人员根据需求方要求设计前端页面， 前端开发人员 根据设计的前端页面使用ID E开发工具进 行页面布局及逻辑编写， 完成前后端联调、 测试验 收后最终交付需求方。 目前的开发方式存在 如下缺陷： [0003]1、 在设计阶段， 由于没有统一设计标准， 导致产出效率较低， 设计复用率较低， 后 期返工较多。 [0004]2、 在开发阶段， 由于没有统一组件标准， 导致相似组件重复开发， 造成研发成本上 升。 [0005]3、 在调试阶段， 由于调试本地环境配置复杂， 导致快速上手成本较高， 环境不一 致。 [0006]4、 在发布阶段， 发布需要上传特定环境且操作繁琐。 发明内容 [0007]本发明的目的就是为了克服上述现有技术存在的缺陷而提供一种智能前端设计 方法、 装置及存 储介质。 [0008]本发明的目的可以通过以下技 术方案来实现： [0009]一种智能前端设计方法， 该 方法包括： [0010]基于设计稿提取页面元 素信息、 识别并加以描述； [0011]智能产出 前端代码； [0012]对智能产出的前端代码在线编排调试； [0013]智能前端发布阅览。 [0014]优选地， 所述的前端页面的设计稿包括结构化的设计文件。 [0015]优选地， 提取页面元 素信息、 识别并加以描述具体包括： [0016]图层处理： 识别设计稿中的页面布局及其层级结构， 完成结构解析； [0017]组件识别： 通过图层处理后的有效节点， 递归节点根据 模型识别可复用组件， 完成 组件描述。 [0018]优选地， 图层处 理时采用深度学习模型进行页面布局及其层级结构识别。 [0019]优选地， 所述的智能产出 前端代码具体包括： [0020]页面布局： 根据已解析的结构及组件， 识别页面布局， 提取布局特 征； [0021]组件命名： 将识别的组件及其内部元 素， 结合语义分析产生可维护的名称； [0022]数据绑定： 通过设计稿提取文本内容， 完成初步数据绑定； [0023]业务逻辑： 根据已识别组件， 绑定推荐的代码， 自动化智能产出 前端代码。说　明　书 1/3 页 3 CN 114416078 A 3