最近兩年，在互聯(lián)網(wǎng)行業(yè)各大技術(shù)峰會(huì)上，都能看到關(guān)于工程效能這個(gè)概念，從側(cè)面也反映出了研發(fā)效能已經(jīng)逐漸被各企業(yè)所重視！

在以前，軟件行業(yè)還處于野蠻發(fā)展時(shí)期時(shí)，互聯(lián)網(wǎng)企業(yè)比拼的是家底，誰(shuí)的家底雄厚，誰(shuí)肯愿意燒錢(qián)，誰(shuí)就能存活下來(lái)。而現(xiàn)在比拼的是什么？是研發(fā)能力，具體來(lái)講就是從需求轉(zhuǎn)化成軟件或者服務(wù)的能力，這其中研發(fā)效能的高低對(duì)于需求轉(zhuǎn)化速率起到了至關(guān)重要的作用。

在研發(fā)工作實(shí)踐過(guò)程中，圍繞提升研發(fā)效能，能?chē)L試做的事，有很多很多。當(dāng)然，我們今天分享的重點(diǎn)，并不是討論關(guān)于什么是研發(fā)效能，而是，針對(duì)在實(shí)際實(shí)踐如何提升研發(fā)效能過(guò)程中，分享兩個(gè)非常有意思的工具。

1. 自動(dòng)生成前端原型：Sketch2Code

我們知道，在做前端開(kāi)發(fā)時(shí)，是先由產(chǎn)品人員確定好需求，再借助產(chǎn)品原型工具來(lái)實(shí)現(xiàn)產(chǎn)品GUI界面的設(shè)計(jì)，前端拿到原型再去開(kāi)展具體的前端編碼工作。

但是會(huì)發(fā)現(xiàn)即便市面上，已經(jīng)有了類(lèi)似Axure和Modao等原型工具，但是畫(huà)界面的成本依然很高。這里介紹一種可以將圖片GUI設(shè)計(jì)稿，甚至是手畫(huà)GUI設(shè)計(jì)稿轉(zhuǎn)化成目標(biāo)平臺(tái)代碼的一鍵自動(dòng)化生成方案。

直接上圖：

在上面的例子中，先手繪GUI界面設(shè)計(jì)，然后通過(guò)Sketch2Code可以直接轉(zhuǎn)換成目標(biāo)平臺(tái)的代碼，如果你指定的目標(biāo)平臺(tái)是Web，那就直接生成html，如果你指定的目標(biāo)平臺(tái)是iOS，那就會(huì)生成XCode的項(xiàng)目，通過(guò)編譯打包后就可以直接在iPhone上安裝執(zhí)行了，采用這種方式的引入將大幅提升原型構(gòu)建環(huán)節(jié)的效率。

關(guān)于Sketch2Code

進(jìn)一步來(lái)了解一下Sketch2Code ， 它是一個(gè)前端智能AI-識(shí)別草圖生成代碼且基于 Web 的解決方案，使用 AI 將手繪的用戶(hù)界面草圖轉(zhuǎn)換為可用的 HTML 代碼。Sketch2Code 由微軟和 Kabel、Spike Techniques 合作開(kāi)發(fā)。

Sketch2Code: 核心是有一套微軟自定義視覺(jué)模型（Custom Vision）：這個(gè)模型是基于不同的手繪稿的圖象訓(xùn)練得出的，并標(biāo)記了與常見(jiàn) HTML 元素（如文本框、按鈕、圖像等）相關(guān)的信息。

Sketch2Code 項(xiàng)目地址：

https://github.com/Microsoft/ailab/tree/master/Sketch2Code

實(shí)際效果驗(yàn)證：

https://sketch2code.azurewebsites.net/

筆者已經(jīng)親自試驗(yàn)過(guò)（手繪草圖，自動(dòng)生成原型），識(shí)別效果還不錯(cuò)，感興趣的讀者，可以自行體驗(yàn)一下。

2. 自動(dòng)生成前端代碼：teleportHQ

如果你覺(jué)得剛剛那個(gè)已經(jīng)很厲害了，那接下，給大家介紹一個(gè)更牛的項(xiàng)目，大家可以先看幾張效果圖，大家看到了什么？

圖片中，一位產(chǎn)品經(jīng)理，在前面的白板上正在畫(huà)草圖，在后面的屏幕上，顯示整個(gè)識(shí)別過(guò)程，并自動(dòng)同步生成代碼和UI界面預(yù)覽。

整個(gè)過(guò)程中，電腦借助攝像頭拍攝到產(chǎn)品經(jīng)理正在白板上繪制的原型草稿，一邊就即時(shí)“畫(huà)”出了UI，生成了代碼，展示著成品網(wǎng)頁(yè)。每一步都是機(jī)器自動(dòng)識(shí)別產(chǎn)品經(jīng)理畫(huà)出來(lái)的東西，直接變成相應(yīng)的網(wǎng)頁(yè)樣式，還附帶了HTML代碼。進(jìn)行任何增刪，都可以實(shí)時(shí)跟進(jìn)、更新。

隨著畫(huà)圖的那位產(chǎn)品經(jīng)理停筆，識(shí)別也就完成了，此時(shí)的代碼清晰可鑒。網(wǎng)頁(yè)也生成了，和正常的網(wǎng)頁(yè)一樣，可以隨意調(diào)整大小并適配。

有了這個(gè)工具，大家只要在白板上勾勾畫(huà)畫(huà)，就可以立馬看到成品長(zhǎng)什么樣，敲定方案，一次成型，還可以直接拿去改進(jìn)UI和代碼，給設(shè)計(jì)師和前端開(kāi)發(fā)省了不少功夫，能把一兩個(gè)星期的工作，壓縮到一兩天，效率提升N倍。

這個(gè)工具出自一個(gè)名為teleportHQ的項(xiàng)目，由Evo Forge和Corebuild兩家歐洲公司合作創(chuàng)立，歐洲區(qū)域發(fā)展基金（European Fund for Regional Development）出資贊助，他們希望這個(gè)項(xiàng)目能讓非技術(shù)人員也能方便的創(chuàng)建可視化的應(yīng)用程序和web頁(yè)面。

該項(xiàng)目通過(guò)支持向量機(jī)（SVM）、神經(jīng)網(wǎng)絡(luò)和XGBoost三種方式，實(shí)現(xiàn)對(duì)web頁(yè)面的語(yǔ)義分割，目前已經(jīng)可以生成React，React Native，Vue，HTML/CSS和AngularJS代碼。

teleportHQ的項(xiàng)目：

https://github.com/teleporthq

3. 小結(jié)

看完了上述兩款工具（項(xiàng)目）的強(qiáng)悍能力，相信大家能隱約感受到研發(fā)效能提升的魅力之處，可能有的讀者會(huì)想，有了這些自動(dòng)生成原型、自動(dòng)生成代碼工具，那前端開(kāi)發(fā)人員豈不是有失業(yè)了？這是個(gè)認(rèn)知上的誤區(qū)，發(fā)明這些工具，本質(zhì)的目的: 并不是說(shuō)，把誰(shuí)淘汰，或者是把某類(lèi)研發(fā)崗位（職業(yè)）淘汰，而是希望通過(guò)這一系列的研發(fā)效能的提升點(diǎn)，讓大家的工作可以開(kāi)展起來(lái)更高效，讓人的工作，更聚焦在更有價(jià)值，更有意義的工作創(chuàng)作上。

這個(gè)和測(cè)試行業(yè)中，常被提到的一個(gè)觀點(diǎn)：引入自動(dòng)化測(cè)試，只是希望將人的時(shí)間，從那些重復(fù)性的工作中解脫出來(lái)，去做更多有價(jià)值有探索性的工作，并不是為了淘汰手工測(cè)試人員一樣的道理！

好了，今天的分享就到這里了，年底較忙，擠出時(shí)間，創(chuàng)作不易，大家多多支持！