大家好，我是坤哥

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

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

上周五我準備根據需求開發新的頁面時，突然意識到我們的 UI 稿是根據 sketch 導出的 html 文件，點擊頁面上每個元素，右側可以彈出一個屬性欄，如下圖示：

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

當然我想到了別人可能也想到了，為了避免重復造輪子，于是就去網上搜了一下，一搜發現還真的有，阿里的 sketch 插件 imgcook 已經實現了將 sketch 還原成多端前端代碼的功能！

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

當然 imgcook 導出的規范與我們工程規范有些出入，于是又寫了一個腳本將其轉成我們工程規范的項目文件

搞完這些后立馬在團隊里推廣這個插件，得到了大家的認可，從此媽媽再也不用擔心我的前端開發工作了

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

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

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