画眉（京东科技设计稿转代码平台）介绍

前言

随着金融App业务的不断发展，为了满足不同场景下的用户体验及丰富的业务诉求，业务产品层面最直接体现就是大量新功能的上线及老业务的升级，随之也给研发带来了巨大的压力，所以研发效率的提升就是当前亟需解决的问题，今天我们来看下“画眉”平台是如何帮助前端研发同学提效的。

前端开发流程概述

在讨论之前，我们先看下前端开发流程，下图是一个典型的场景：

通过上图我们可以发现，前端开发主要分为“UI还原”和“业务逻辑实现”两个阶段，其中UI还原阶段需要通过编写代码对设计稿进行1:1像素级还原，业务逻辑实现阶段主要包括数据绑定及交互效果实现。

“UI还原”阶段，研发通常需要借助设计平台的“标注”功能，对设计稿中每一个元素进测量，包括字体、间距、颜色、圆角等，一个普通的楼层通常包含几十个元素，此阶段包含了大量低效、重复、繁琐的工作；

“业务逻辑实现”阶段一般是根据具体的产品需求，进行数据的加载、绑定和交互效果的开发，如鉴权、点击事件的添加、动效实现、埋点的上报等，不同的需求在此阶段的诉求差异较大，可复用性也比较低，通常需要针对每个需求进行定制开发。

我们可以发现“UI还原”阶段特点是“低效、重复、繁琐”，且占用了整个研发阶段的30%左右，甚至在一些弱交互的场景下，可能会占用整个开发流程的50%以上，所以有没有一种方式可以直接将设计稿转换成前端代码，提高研