开发者在构建Web前端项目时不仅要考虑站点的内容和功能,还需要关注图形用户界面(graphical user interface,GUI)的设计与实现,而GUI是决定页面吸引力的重要因素。但GUI设计是一项需要良好的艺术品味和审美能力的工作,Web前端页面的开发人员往往不具备这样的能力,因此需要设计人员的介入,二者之间存在沟通和交流的巨大成本。但从另一方面看,互联网本身就是一个海量的作品集,包含大量优秀的网页设计范例,既能为设计人员提供灵感,又能为开发人员提供经验。目前大多数的设计复用是以模板的形式完成的,模板使用标准化的语义将内容渲染到预先定制好的布局中。但模板会使页面结构同质化,限制自定义的能力,约束了人们的创造力。因此,我们尝试从已有的优秀网页设计中提取组件、主题色等风格要素,并将其替换到其他需要优化或改版的网页上得到若干新的页面,并进一步提出了一个易用的风格自动替换在线系统。替换过程核心思路为:(1)从作为素材的网页中提取颜色数据和组件数据;(2)对待替换页面依次执行组件替换、颜色替换和替换后优化操作完成替换过程,并对替换结果进行评估给出报告和评分;(3)在数据采集和替换过程中保留组件和页面的原始CSS(Cascading Style Sheets)信息,为用户提供参考。具体地,本文工作概括如下:1.在浏览器自动化框架Selenium Web Driver的基础上搭建了一套浏览器自动化架构,用于统一管理浏览器driver创建和配置、站点访问、脚本执行和结果返回等操作,并实现了页面滚动截图、虚拟DOM(Document Object Model)等用于算法实现的功能。2.设计并实现了由不同参数同时执行多项风格替换任务并对结果进行评估比较的机制。3.设计并实现了颜色数据采集、组件数据采集和风格替换等算法。4.使用React相关前端技术栈和Egg.js后端框架实现了该系统。为用户提供了简单易用的交互界面和清晰直观的结果展示功能,并提供团队协作系统以增进效率。