白板隨手一畫，嗖嗖變成代碼_風聞

郭一璞 發自 凹非寺

量子位 報道 | 公眾號 QbitAI

“這次的新產品首頁，大家有什麼想法？”你正在和UI、前端、市場、運營部門開會。

“先把活動banner放到最上面？”

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

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

“最底下別忘了加用户菜單。”

……

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

“差不多長這樣是吧？”前端開發小丁打斷了你的發言。

小丁的電腦上，正按照你説的樣子，運行着一個頁面，每一處banner、按鈕、跳轉都可以點擊，所有文字、圖片都放在了它應該出現的地方，一旁的HTML代碼簡潔清晰，就像產品已經做出來了一樣。

這麼快，怎麼做到的？

難道，這羣開發人員都是AI嗎？

嗯……可能真的是。

手繪框圖，同步自動生成

小丁用的，就是下面視頻中的方法，攝像頭實時拍攝白板上的草稿，就可以自動生成設計、開發好了的網頁。

視頻中，產品經理在白板上勾勒原型草圖。

而屏幕上，顯示着識別的過程，同時正在生成代碼和UI界面預覽。

放大的細節清晰地展示出了識別的過程。

隨着畫圖的那位產品經理停筆，識別也就完成了，此時的代碼清晰可鑑。

網頁也生成了，和正常的網頁一樣，可以隨意調整大小並適配。

整個過程中，電腦藉助攝像頭拍攝到產品經理正在白板上繪製的原型草稿，一邊就即時“畫”出了UI，生成了代碼，展示着成品網頁。

產品經理畫一個banner，屏幕上就出現一個banner；

產品經理標一個小標題，屏幕上就出現一個小標題；

產品經理畫一個文字區域，屏幕上就出現一個文字區域。

每一步都是機器自動識別產品經理畫出來的東西，直接變成相應的網頁樣式，還附帶了HTML代碼。進行任何增刪，都可以實時跟進、更新。

此前，確定一個網頁長什麼樣子，要產品經理、UI、前端、市場運營們聚在一起，溝通、討論、扯皮，出N個方案，開N場會議，花費數天乃至數週才能完成。

從分析需求開始，產品經理出原型圖，大家開會修改×N；

UI繪製設計圖，大家開會修改×N；

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

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

於是，工期越推越長，加班越來越晚，髮際線越來越高……

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

來自歐洲的teleportHQ

這個草稿生成網頁的視頻在LinkedIn和Twitter上瘋傳，視頻中的那個神奇的工具到底是什麼呢？

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

該項目通過支持向量機（SVM）、神經網絡和XGBoost三種方式，實現對web頁面的語義分割，目前已經可以生成React，React Native，Vue，HTML/CSS和AngularJS代碼。

引發Twitter“震驚體”

雖然正式的產品還沒有面世，不過一眾Twitter網友都驚呆了，他們看到這個視頻的反應是這樣：

這樣：

還有這樣：

網友們紛紛表示，這簡直是未來本來了！

有時候我會覺得看到了未來，嗯，比如看到這個的時候。

雖然感覺UI們會涼涼，但是並不妨礙這個很cool啊！

但另一些設計師覺得，這能給自己省下大把大把的時間。

還有人暢想了這種技術的未來應用。

等到了2025年，所有的演講估計都會是演講者手繪，然後AI來自動生成的啦。

不過也有人覺得，實時同步雖然很牛逼，但是，彷彿無卵用。

毫無疑問，視頻很棒，但是視頻裏最厲害實時轉換的恰恰是最沒用的，我們為什麼需要每一步都實時轉化成代碼？

還有其他家可供選擇

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

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

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

微軟Sketch2Code

今年夏天，微軟就開源了一個名為Sketch2Code的項目，可以把用户上傳的界面手繪圖轉化為HTML頁面。

大致的步驟是這樣的：

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

· 視覺模型檢測在圖像中出現的HTML部件，標記出他們的位置。

· 識別所有部件中的手寫文本。

· 佈局算法根據各部件的邊框空間信息生成網格結構。

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

整個過程運用了微軟自定義視覺模型、微軟計算機視覺服務以及Azure的一系列服務，將他們串聯在了一起。

Uizard家的pix2code

丹麥的Uizard Technologies公司曾經發過一篇論文，介紹了他們訓練的pix2code模型，能夠識別UI部件，並生成效果圖。

這個模型的訓練大概需要三步：

首先，需要通過計算機視覺技術來識別場景（屏幕截圖）和UI組件（按鈕，文本區域等）；

其次，需要讓這個模型學會前端代碼，生成語法和語義正確的代碼樣本；

最後，重複前兩個步驟進行訓練。

演示效果大概是這樣：

pix2code已經產品化，產品名字和他們公司名字一樣，叫做Uizard。目前看來效果也相當不錯了，根據視頻的演示，不僅可以通過手機掃描直接生成UI效果圖，還可以直接導入UI設計軟件中進行修改。

Airbnb

Airbnb內部就有一個項目可以實現將手繪的網頁部件直接轉化為成品。

他們認為，像漢字這種幾千個複雜的手寫符號都可以通過機器識別，那麼一百多種網頁UI常用部件拿來識別會是更容易的。

於是，他們用十幾個UI部件訓練了一個原型，可以將白板上的草圖自動生成原型代碼和設計文件。

△ 左邊是生成的效果

這項技術已經用在了Airbnb產品的開發設計中。

傳送門

teleportHQ

https://teleporthq.io/（包含兩篇技術博客）

微軟的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

網站：https://uizard.io/research/#pix2code

另一作者改進的開源項目：https://github.com/ashnkumar/sketch-code

Airbnb的Sketching Interfaces

https://airbnb.design/sketching-interfaces/

— 完 —