白板隨手一畫，嗖嗖變成代碼，AI要取代UI設(shè)計(jì)師了？
“這次的新產(chǎn)品首頁，大家有什么想法？”你正在和 UI、前端、市場、運(yùn)營部門開會。
“先把活動 banner 放到最上面？”
“然后給不同欄目加 icon，放兩排就夠了。”
“下面可以放專欄的位置。”
“***下別忘了加用戶菜單。”
……
你一邊聽著同事們七嘴八舌的建議，一邊就把原型圖在白板上畫了出來：“我們按這個來討論一下吧，時間不等人，后面還要 UI 設(shè)計(jì)、前端開發(fā)……”
“差不多長這樣是吧？”前端開發(fā)小丁打斷了你的發(fā)言。
小丁的電腦上，正按照你說的樣子，運(yùn)行著一個頁面，每一處 banner、按鈕、跳轉(zhuǎn)都可以點(diǎn)擊，所有文字、圖片都放在了它應(yīng)該出現(xiàn)的地方，一旁的 HTML 代碼簡潔清晰，就像產(chǎn)品已經(jīng)做出來了一樣。
這么快，怎么做到的？
難道，這群開發(fā)人員都是 AI 嗎？
嗯……可能真的是。
手繪框圖，同步自動生成
小丁用的，就是下面視頻中的方法，攝像頭實(shí)時拍攝白板上的草稿，就可以自動生成設(shè)計(jì)、開發(fā)好了的網(wǎng)頁。
視頻中，產(chǎn)品經(jīng)理在白板上勾勒原型草圖。
而屏幕上，顯示著識別的過程，同時正在生成代碼和 UI 界面預(yù)覽。
放大的細(xì)節(jié)清晰地展示出了識別的過程。
隨著畫圖的那位產(chǎn)品經(jīng)理停筆，識別也就完成了，此時的代碼清晰可鑒。
網(wǎng)頁也生成了，和正常的網(wǎng)頁一樣，可以隨意調(diào)整大小并適配。
整個過程中，電腦借助攝像頭拍攝到產(chǎn)品經(jīng)理正在白板上繪制的原型草稿，一邊就即時“畫”出了 UI，生成了代碼，展示著成品網(wǎng)頁。
產(chǎn)品經(jīng)理畫一個 banner，屏幕上就出現(xiàn)一個 banner；
產(chǎn)品經(jīng)理標(biāo)一個小標(biāo)題，屏幕上就出現(xiàn)一個小標(biāo)題；
產(chǎn)品經(jīng)理畫一個文字區(qū)域，屏幕上就出現(xiàn)一個文字區(qū)域。
每一步都是機(jī)器自動識別產(chǎn)品經(jīng)理畫出來的東西，直接變成相應(yīng)的網(wǎng)頁樣式，還附帶了 HTML 代碼。進(jìn)行任何增刪，都可以實(shí)時跟進(jìn)、更新。
此前，確定一個網(wǎng)頁長什么樣子，要產(chǎn)品經(jīng)理、UI、前端、市場運(yùn)營們聚在一起，溝通、討論、扯皮，出N個方案，開N場會議，花費(fèi)數(shù)天乃至數(shù)周才能完成。
從分析需求開始，產(chǎn)品經(jīng)理出原型圖，大家開會修改×N；
UI 繪制設(shè)計(jì)圖，大家開會修改×N；
前端寫好代碼，大家檢查溝通×N……
不僅如此，有些人想象力捉急，看不到最終的成品，就發(fā)現(xiàn)不了問題，還要讓產(chǎn)品、UI、前端重新來一次，一再返工。
于是，工期越推越長，加班越來越晚，發(fā)際線越來越高……
現(xiàn)在，有了這個工具，大家只要在白板上勾勾畫畫，就可以立馬看到成品長什么樣，敲定方案，一次成型，還可以直接拿去改進(jìn) UI 和代碼，給設(shè)計(jì)師和前端開發(fā)省了不少功夫，能把一兩個星期的工作，壓縮到一兩天，效率提升N倍。
來自歐洲的 teleportHQ
這個草稿生成網(wǎng)頁的視頻在 LinkedIn 和 Twitter 上瘋傳，視頻中的那個神奇的工具到底是什么呢？
這個工具出自一個名為 teleportHQ 的項(xiàng)目，由 Evo Forge 和 Corebuild 兩家歐洲公司合作創(chuàng)立，歐洲區(qū)域發(fā)展基金（European Fund for Regional Development）出資贊助，他們希望這個項(xiàng)目能讓非技術(shù)人員也能方便的創(chuàng)建可視化的應(yīng)用程序和 web 頁面。
該項(xiàng)目通過支持向量機(jī)（SVM）、神經(jīng)網(wǎng)絡(luò)和 XGBoost 三種方式，實(shí)現(xiàn)對 web 頁面的語義分割，目前已經(jīng)可以生成 React，React Native，Vue，HTML/CSS 和 AngularJS 代碼。
引發(fā) Twitter“震驚體”
雖然正式的產(chǎn)品還沒有面世，不過一眾 Twitter 網(wǎng)友都驚呆了，他們看到這個視頻的反應(yīng)是這樣：
這樣：
還有這樣：
網(wǎng)友們紛紛表示，這簡直是未來本來了！
“有時候我會覺得看到了未來，嗯，比如看到這個的時候。”
“雖然感覺 UI 們會涼涼，但是并不妨礙這個很 cool ?。?rdquo;
但另一些設(shè)計(jì)師覺得，這能給自己省下大把大把的時間。
還有人暢想了這種技術(shù)的未來應(yīng)用。
“等到了 2025 年，所有的演講估計(jì)都會是演講者手繪，然后 AI 來自動生成的啦。”
不過也有人覺得，實(shí)時同步雖然很牛逼，但是，仿佛無卵用。
“毫無疑問，視頻很棒，但是視頻里最厲害實(shí)時轉(zhuǎn)換的恰恰是最沒用的，我們?yōu)槭裁葱枰恳徊蕉紝?shí)時轉(zhuǎn)化成代碼？”
還有其他家可供選擇
看了這個炫酷的效果，你是不是也想在自家的腦暴大會上用上它？
不過，目前這個 teleportHQ 還沒開發(fā)完。從 2017 年 8 月 16 日開始，這個項(xiàng)目有 24 個月的時間來完成作業(yè)。也就是說，如果那兩家歐洲公司給力的話，大概明年夏天就可以用了。
好在別家也出過不少類似的產(chǎn)品，找個開源的試一試，隔壁家的 UI 都被你嚇哭了。
微軟 Sketch2Code
今年夏天，微軟就開源了一個名為 Sketch2Code 的項(xiàng)目，可以把用戶上傳的界面手繪圖轉(zhuǎn)化為 HTML 頁面。
大致的步驟是這樣的：
“· 用戶把自己畫的手繪草稿拍照上傳。
· 視覺模型檢測在圖像中出現(xiàn)的 HTML 部件，標(biāo)記出他們的位置。
· 識別所有部件中的手寫文本。
· 布局算法根據(jù)各部件的邊框空間信息生成網(wǎng)格結(jié)構(gòu)。
· HTML 生成引擎使用上述信息來生成 HTML 代碼。”
整個過程運(yùn)用了微軟自定義視覺模型、微軟計(jì)算機(jī)視覺服務(wù)以及 Azure 的一系列服務(wù)，將他們串聯(lián)在了一起。
Uizard 家的 pix2code
丹麥的 Uizard Technologies 公司曾經(jīng)發(fā)過一篇論文，介紹了他們訓(xùn)練的 pix2code 模型，能夠識別 UI 部件，并生成效果圖。
這個模型的訓(xùn)練大概需要三步：
首先，需要通過計(jì)算機(jī)視覺技術(shù)來識別場景（屏幕截圖）和 UI 組件（按鈕，文本區(qū)域等）；
其次，需要讓這個模型學(xué)會前端代碼，生成語法和語義正確的代碼樣本；
***，重復(fù)前兩個步驟進(jìn)行訓(xùn)練。
演示效果大概是這樣：
pix2code 已經(jīng)產(chǎn)品化，產(chǎn)品名字和他們公司名字一樣，叫做 Uizard。目前看來效果也相當(dāng)不錯了，根據(jù)視頻的演示，不僅可以通過手機(jī)掃描直接生成 UI 效果圖，還可以直接導(dǎo)入 UI 設(shè)計(jì)軟件中進(jìn)行修改。
Airbnb
Airbnb 內(nèi)部就有一個項(xiàng)目可以實(shí)現(xiàn)將手繪的網(wǎng)頁部件直接轉(zhuǎn)化為成品。
他們認(rèn)為，像漢字這種幾千個復(fù)雜的手寫符號都可以通過機(jī)器識別，那么一百多種網(wǎng)頁 UI 常用部件拿來識別會是更容易的。
于是，他們用十幾個 UI 部件訓(xùn)練了一個原型，可以將白板上的草圖自動生成原型代碼和設(shè)計(jì)文件。
△ 左邊是生成的效果
這項(xiàng)技術(shù)已經(jīng)用在了 Airbnb 產(chǎn)品的開發(fā)設(shè)計(jì)中。
傳送門
teleportHQ
https://teleporthq.io/
（包含兩篇技術(shù)博客）
微軟的 Sketch2Code
https://github.com/Microsoft/ailab/tree/master/Sketch2Code
pix2code: 從 GUI 截圖生成代碼
作者：Tony Beltramelli，UIzard Technologies，丹麥
論文：https://arxiv.org/abs/1705.07962
github：https://github.com/tonybeltramelli/pix2code
網(wǎng)站：https://uizard.io/research/#pix2code
另一作者改進(jìn)的開源項(xiàng)目：https://github.com/ashnkumar/sketch-code
Airbnb 的 Sketching Interfaces
https://airbnb.design/sketching-interfaces/
