白板隨手一畫，嗖嗖變成代碼，AI要取代UI設計師了？
“這次的新產品首頁，大家有什么想法？”你正在和 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/
