大家好，我是坤哥

前不久在朋友圈發(fā)了一個動態(tài)（大家看到的封面圖），獲得了不少人點(diǎn)贊，所以寫了這篇文章，希望對大家有些幫助。

創(chuàng)業(yè)之后，由于前端遲遲招不到了，所以我們團(tuán)隊(duì)三個后端暫時兼任了前端小程序開發(fā)的工作，做過前端的都知道，90% 的工作量其實(shí)是在 UI 的搭建上，另外你自己寫 UI 還有一個問題是 UI 還原度不太可能 100% 還原 UI 稿，完工后 UI 要花不少時間在視覺走查上，發(fā)現(xiàn)不對前端還要花不少時間調(diào)整。所以我一直在思考能否提升 UI 的開發(fā)效率。

上周五我準(zhǔn)備根據(jù)需求開發(fā)新的頁面時，突然意識到我們的 UI 稿是根據(jù) sketch 導(dǎo)出的 html 文件，點(diǎn)擊頁面上每個元素，右側(cè)可以彈出一個屬性欄，如下圖示：

我們就是根據(jù)右邊的屬性欄來搭建 UI 的，突然我靈光一閃，既然我們屬性欄里能查到每個元素的屬性，那我能不能根據(jù)這些屬性來將其還原成代碼呢。

當(dāng)然我想到了別人可能也想到了，為了避免重復(fù)造輪子，于是就去網(wǎng)上搜了一下，一搜發(fā)現(xiàn)還真的有，阿里的 sketch 插件 imgcook 已經(jīng)實(shí)現(xiàn)了將 sketch 還原成多端前端代碼的功能！

于是趕緊用這個插件體驗(yàn)了一下，將兩個頁面導(dǎo)成代碼后運(yùn)行了一下，發(fā)現(xiàn)導(dǎo)成的 UI 還原度 100%，只要把導(dǎo)成代碼中的靜態(tài)數(shù)據(jù)改成用接口返回的動態(tài)數(shù)據(jù)即可，通過這種方式，新頁面 UI 的編寫只要幾分鐘就完成了，而如果自己苦哈哈地編寫代碼可能半天就搭進(jìn)去了，這對團(tuán)隊(duì)的生產(chǎn)力是多么巨大的提升！創(chuàng)業(yè)公司資源有限，通過這種方式節(jié)省了巨量的人工和金錢的成本！

當(dāng)然 imgcook 導(dǎo)出的規(guī)范與我們工程規(guī)范有些出入，于是又寫了一個腳本將其轉(zhuǎn)成我們工程規(guī)范的項(xiàng)目文件

搞完這些后立馬在團(tuán)隊(duì)里推廣這個插件，得到了大家的認(rèn)可，從此媽媽再也不用擔(dān)心我的前端開發(fā)工作了

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

之前我在我是如何晉升專家崗的這篇文章也提過，如果碰到這些重復(fù)，低效的工作，我們要多思考是否可以用腳本化，產(chǎn)品化的工作來解決，這樣一來可以能提升團(tuán)隊(duì)的工作效率與解決問題的能力，二來可以在團(tuán)隊(duì)建立足夠高的影響力。一定要去發(fā)現(xiàn)解決痛點(diǎn)， 并爭取成為解決方案的提出者

希望本文對大家有些幫助，最后歡迎大家加我的微信好友，我會在朋友圈不定期發(fā)一些技術(shù)和商業(yè)上的思考，不少讀者反饋受益良多 ^_^