“這次的新產(chǎn)品首頁(yè)，大家有什么想法？”你正在和 UI、前端、市場(chǎng)、運(yùn)營(yíng)部門開會(huì)。

　　“先把活動(dòng) banner 放到最上面？”

　　“然后給不同欄目加 icon，放兩排就夠了。”

　　“下面可以放專欄的位置。”

　　“***下別忘了加用戶菜單。”

　　……

　　你一邊聽著同事們七嘴八舌的建議，一邊就把原型圖在白板上畫了出來：“我們按這個(gè)來討論一下吧，時(shí)間不等人，后面還要 UI 設(shè)計(jì)、前端開發(fā)……”

　　“差不多長(zhǎng)這樣是吧？”前端開發(fā)小丁打斷了你的發(fā)言。

　　小丁的電腦上，正按照你說的樣子，運(yùn)行著一個(gè)頁(yè)面，每一處 banner、按鈕、跳轉(zhuǎn)都可以點(diǎn)擊，所有文字、圖片都放在了它應(yīng)該出現(xiàn)的地方，一旁的 HTML 代碼簡(jiǎn)潔清晰，就像產(chǎn)品已經(jīng)做出來了一樣。

[[246240]]

　　這么快，怎么做到的？

　　難道，這群開發(fā)人員都是 AI 嗎？

　　嗯……可能真的是。

　　手繪框圖，同步自動(dòng)生成

　　小丁用的，就是下面視頻中的方法，攝像頭實(shí)時(shí)拍攝白板上的草稿，就可以自動(dòng)生成設(shè)計(jì)、開發(fā)好了的網(wǎng)頁(yè)。

　　視頻中，產(chǎn)品經(jīng)理在白板上勾勒原型草圖。

　　而屏幕上，顯示著識(shí)別的過程，同時(shí)正在生成代碼和 UI 界面預(yù)覽。

　　放大的細(xì)節(jié)清晰地展示出了識(shí)別的過程。

　　隨著畫圖的那位產(chǎn)品經(jīng)理停筆，識(shí)別也就完成了，此時(shí)的代碼清晰可鑒。

　　網(wǎng)頁(yè)也生成了，和正常的網(wǎng)頁(yè)一樣，可以隨意調(diào)整大小并適配。

　　整個(gè)過程中，電腦借助攝像頭拍攝到產(chǎn)品經(jīng)理正在白板上繪制的原型草稿，一邊就即時(shí)“畫”出了 UI，生成了代碼，展示著成品網(wǎng)頁(yè)。

　　產(chǎn)品經(jīng)理畫一個(gè) banner，屏幕上就出現(xiàn)一個(gè) banner；

　　產(chǎn)品經(jīng)理標(biāo)一個(gè)小標(biāo)題，屏幕上就出現(xiàn)一個(gè)小標(biāo)題；

　　產(chǎn)品經(jīng)理畫一個(gè)文字區(qū)域，屏幕上就出現(xiàn)一個(gè)文字區(qū)域。

　　每一步都是機(jī)器自動(dòng)識(shí)別產(chǎn)品經(jīng)理畫出來的東西，直接變成相應(yīng)的網(wǎng)頁(yè)樣式，還附帶了 HTML 代碼。進(jìn)行任何增刪，都可以實(shí)時(shí)跟進(jìn)、更新。

[[246246]]

　　此前，確定一個(gè)網(wǎng)頁(yè)長(zhǎng)什么樣子，要產(chǎn)品經(jīng)理、UI、前端、市場(chǎng)運(yùn)營(yíng)們聚在一起，溝通、討論、扯皮，出N個(gè)方案，開N場(chǎng)會(huì)議，花費(fèi)數(shù)天乃至數(shù)周才能完成。

　　從分析需求開始，產(chǎn)品經(jīng)理出原型圖，大家開會(huì)修改×N；

　　UI 繪制設(shè)計(jì)圖，大家開會(huì)修改×N；

　　前端寫好代碼，大家檢查溝通×N……

　　不僅如此，有些人想象力捉急，看不到最終的成品，就發(fā)現(xiàn)不了問題，還要讓產(chǎn)品、UI、前端重新來一次，一再返工。

　　于是，工期越推越長(zhǎng)，加班越來越晚，發(fā)際線越來越高……

[[246247]]

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

　　來自歐洲的 teleportHQ

　　這個(gè)草稿生成網(wǎng)頁(yè)的視頻在 LinkedIn 和 Twitter 上瘋傳，視頻中的那個(gè)神奇的工具到底是什么呢？

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

　　引發(fā) Twitter“震驚體”

　　雖然正式的產(chǎn)品還沒有面世，不過一眾 Twitter 網(wǎng)友都驚呆了，他們看到這個(gè)視頻的反應(yīng)是這樣：

[[246250]]

　　這樣：

[[246251]]

　　還有這樣：

[[246252]]

　　網(wǎng)友們紛紛表示，這簡(jiǎn)直是未來本來了！

　　“有時(shí)候我會(huì)覺得看到了未來，嗯，比如看到這個(gè)的時(shí)候。”

　　“雖然感覺 UI 們會(huì)涼涼，但是并不妨礙這個(gè)很 cool 啊！”

　　但另一些設(shè)計(jì)師覺得，這能給自己省下大把大把的時(shí)間。

　　還有人暢想了這種技術(shù)的未來應(yīng)用。

　　“等到了 2025 年，所有的演講估計(jì)都會(huì)是演講者手繪，然后 AI 來自動(dòng)生成的啦。”

　　不過也有人覺得，實(shí)時(shí)同步雖然很牛逼，但是，仿佛無卵用。

　　“毫無疑問，視頻很棒，但是視頻里最厲害實(shí)時(shí)轉(zhuǎn)換的恰恰是最沒用的，我們?yōu)槭裁葱枰恳徊蕉紝?shí)時(shí)轉(zhuǎn)化成代碼？”

　　還有其他家可供選擇

　　看了這個(gè)炫酷的效果，你是不是也想在自家的腦暴大會(huì)上用上它？

　　不過，目前這個(gè) teleportHQ 還沒開發(fā)完。從 2017 年 8 月 16 日開始，這個(gè)項(xiàng)目有 24 個(gè)月的時(shí)間來完成作業(yè)。也就是說，如果那兩家歐洲公司給力的話，大概明年夏天就可以用了。

　　好在別家也出過不少類似的產(chǎn)品，找個(gè)開源的試一試，隔壁家的 UI 都被你嚇哭了。

　　微軟 Sketch2Code

　　今年夏天，微軟就開源了一個(gè)名為 Sketch2Code 的項(xiàng)目，可以把用戶上傳的界面手繪圖轉(zhuǎn)化為 HTML 頁(yè)面。

　　大致的步驟是這樣的：

　　“· 用戶把自己畫的手繪草稿拍照上傳。

　　· 視覺模型檢測(cè)在圖像中出現(xiàn)的 HTML 部件，標(biāo)記出他們的位置。

　　· 識(shí)別所有部件中的手寫文本。

　　· 布局算法根據(jù)各部件的邊框空間信息生成網(wǎng)格結(jié)構(gòu)。

　　· HTML 生成引擎使用上述信息來生成 HTML 代碼。”

　　整個(gè)過程運(yùn)用了微軟自定義視覺模型、微軟計(jì)算機(jī)視覺服務(wù)以及 Azure 的一系列服務(wù)，將他們串聯(lián)在了一起。

　　Uizard 家的 pix2code

　　丹麥的 Uizard Technologies 公司曾經(jīng)發(fā)過一篇論文，介紹了他們訓(xùn)練的 pix2code 模型，能夠識(shí)別 UI 部件，并生成效果圖。

　　這個(gè)模型的訓(xùn)練大概需要三步：

　　首先，需要通過計(jì)算機(jī)視覺技術(shù)來識(shí)別場(chǎng)景（屏幕截圖）和 UI 組件（按鈕，文本區(qū)域等）；

　　其次，需要讓這個(gè)模型學(xué)會(huì)前端代碼，生成語(yǔ)法和語(yǔ)義正確的代碼樣本；

　　***，重復(fù)前兩個(gè)步驟進(jìn)行訓(xùn)練。

　　演示效果大概是這樣：

　　pix2code 已經(jīng)產(chǎn)品化，產(chǎn)品名字和他們公司名字一樣，叫做 Uizard。目前看來效果也相當(dāng)不錯(cuò)了，根據(jù)視頻的演示，不僅可以通過手機(jī)掃描直接生成 UI 效果圖，還可以直接導(dǎo)入 UI 設(shè)計(jì)軟件中進(jìn)行修改。

　　Airbnb

　　Airbnb 內(nèi)部就有一個(gè)項(xiàng)目可以實(shí)現(xiàn)將手繪的網(wǎng)頁(yè)部件直接轉(zhuǎn)化為成品。

　　他們認(rèn)為，像漢字這種幾千個(gè)復(fù)雜的手寫符號(hào)都可以通過機(jī)器識(shí)別，那么一百多種網(wǎng)頁(yè) UI 常用部件拿來識(shí)別會(huì)是更容易的。

　　于是，他們用十幾個(gè) UI 部件訓(xùn)練了一個(gè)原型，可以將白板上的草圖自動(dòng)生成原型代碼和設(shè)計(jì)文件。

△ 左邊是生成的效果

　　這項(xiàng)技術(shù)已經(jīng)用在了 Airbnb 產(chǎn)品的開發(fā)設(shè)計(jì)中。

　　傳送門

　　teleportHQ

　　https://teleporthq.io/

　?。ò瑑善夹g(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/