大家好，我是坤哥

前不久在朋友圈发了一个动态（大家看到的封面图），获得了不少人点赞，所以写了这篇文章，希望对大家有些帮助。

创业之后，由于前端迟迟招不到了，所以我们团队三个后端暂时兼任了前端小程序开发的工作，做过前端的都知道，90% 的工作量其实是在 UI 的搭建上，另外你自己写 UI 还有一个问题是 UI 还原度不太可能 100% 还原 UI 稿，完工后 UI 要花不少时间在视觉走查上，发现不对前端还要花不少时间调整。所以我一直在思考能否提升 UI 的开发效率。

上周五我准备根据需求开发新的页面时，突然意识到我们的 UI 稿是根据 sketch 导出的 html 文件，点击页面上每个元素，右侧可以弹出一个属性栏，如下图示：

我们就是根据右边的属性栏来搭建 UI 的，突然我灵光一闪，既然我们属性栏里能查到每个元素的属性，那我能不能根据这些属性来将其还原成代码呢。

当然我想到了别人可能也想到了，为了避免重复造轮子，于是就去网上搜了一下，一搜发现还真的有，阿里的 sketch 插件 imgcook 已经实现了将 sketch 还原成多端前端代码的功能！

于是赶紧用这个插件体验了一下，将两个页面导成代码后运行了一下，发现导成的 UI 还原度 100%，只要把导成代码中的静态数据改成用接口返回的动态数据即可，通过这种方式，新页面 UI 的编写只要几分钟就完成了，而如果自己苦哈哈地编写代码可能半天就搭进去了，这对团队的生产力是多么巨大的提升！创业公司资源有限，通过这种方式节省了巨量的人工和金钱的成本！

当然 imgcook 导出的规范与我们工程规范有些出入，于是又写了一个脚本将其转成我们工程规范的项目文件

搞完这些后立马在团队里推广这个插件，得到了大家的认可，从此妈妈再也不用担心我的前端开发工作了

之前也一直收不到不少读者的来信，一直在 CRUD 怎么才能提高自己，相信这篇文章能给大家一些思考。

之前我在我是如何晋升专家岗的这篇文章也提过，如果碰到这些重复，低效的工作，我们要多思考是否可以用脚本化，产品化的工作来解决，这样一来可以能提升团队的工作效率与解决问题的能力，二来可以在团队建立足够高的影响力。一定要去发现解决痛点， 并争取成为解决方案的提出者

希望本文对大家有些帮助，最后欢迎大家加我的微信好友，我会在朋友圈不定期发一些技术和商业上的思考，不少读者反馈受益良多 ^_^