以AI技術將手繪網站變成網頁程式碼

記不記得幾年前「手繪網站」新聞呢？新聞的摘要是源自2016年一個修車廠老闆，想要製作一個預算只有兩千塊的網站，承接的網頁設計師乾脆隨手畫畫丟上網，反而在網路上引起熱烈迴響。同一年也有全聯小編手繪泡麵廣告直接貼上粉絲頁，轟動了許多設計人的眼球。

會引發這一些熱烈迴響，原因在於人們對於手繪相當的熟悉，從幼兒時期人們就已經會手畫圖，上學、考試、進入社會，手繪的機會還是相當的多，但大家都很清楚手繪的作品只是一個概念，一個草稿，不經修飾後製就直接貼在網路上公開發表算是非常瘋狂的點子。

可別嘲笑這一些瘋狂的手繪網站設計者，不久的未來，手繪的網站草稿可能都能即時變成網站的版型，產生的程式碼不僅即時透過電腦運算產出，而且真的可以放在主機上運作，手繪設計網站不再是癡人說夢話。

來自知名民宿網站Airbnb的設計工程師Benjamin Wilkins在網站上發表了這一份研究成果，網站背後的功臣當然是偉大的人工智能AI，以鏡頭擷取手繪網站的內容，AI即時分析出手繪的區塊為內文、圖片或是按鈕，網頁程式碼也會馬上的生成。

這樣的技術仍在實驗室的階段，雖然可以分析約150種手繪的網頁元素，目前還有許多待改進的技術問題，畢竟目前網頁設計手繪線稿(Wireframe)的圖樣並未標準化，手繪的風格五花八門，AI如何精準的知道框格內是圖片？摘要文件？或只是一個按鈕？都是技術需要突破的地方。

AI設計網頁的時代或許離我們有一點點距離，但AI的進步飛快，過去必須人工處理的困難工程，如今AI已經可以精準判斷許多數位資料，大量節省工作人員的時間。若手繪網頁設計產生程式碼的技術能夠商業化，馬路科技iWare相信日後設計網站的效率可望大幅邁進，具有設計基礎的用戶可以手繪網站產生基礎的網頁版型後，再交給專業的設計師優化或增添功能。

原文-Sketching Interfaces Generating code from low fidelity wireframes
https://airbnb.design/sketching-interfaces/

預算2千就想做修車網站 老闆反骨「鉛筆手繪」竟意外爆紅
https://www.ettoday.net/news/20160613/715871.htm

一篇全聯手繪泡麵文！竟然釣出所有媒體小編
https://tw.appledaily.com/new/realtime/20161021/972460/