Airbnb AI將草圖原型轉代碼了

本文為翻譯文，原文地址：《Sketching Interfaces - Generating code from low fidelity wireframes.》https://airbnb.design/sketching-interfaces/

------ 以下為翻譯內容 --------

用來測試一個idea的時間應該短到零。這是我在思考 Airbnb 設計工具組遠景目標時想到的第一句話。我們相信，在接下來的幾年裡，新興的技術將會讓設計團隊用直觀的方法設計新產品，同時去除產品開發過程中的種種障礙。

現在設計過程中的每一步以及每個產出的設計品都是個死胡同。每當一個人把自己那一部分工作完成後，就交給下一個人去完成其他部分，而他自己的工作就停止了。項目進度從股東會議到設計到開發；需求變成探索，探索變成原型，然後交給開發做成最終產品。然而這些繁重的步驟只是一個相同的目標從一種媒介到另一種媒介的轉化，最終都是朝著一個共同目標邁進的。每一步都需要各自領域的專家來完成這種轉化。

所以，我們要怎麼樣讓這個流程變得更流暢，來讓我們的目標實現呢？我們團隊開始研究怎麼把測試idea的時間縮短為零。在此，我將分享我們在這過程中學到的和實現的東西。

手繪出產品（Sketch to product）

我們自然而然地先以手繪作為研究方向。作為界面設計師，手繪是一個表達概念的直觀方式。我們想試試怎樣跳過產品開發中間幾步，直接將手繪稿變成最終產品。

Airbnb的設計系統有很完整的文檔，系統中每一個組件都有命名。我們認為，如果機器學習演算法可以高度精確地識別出成千上萬的手寫符號，比如手寫中文漢字，那麼我們也應該可以讓機器來識別我們設計系統中的150個組件。

我們用十幾個手繪組件作為訓練數據，用開源的機器學習演算法以及一些銜接代碼來將我們設計系統中的組件渲染到瀏覽器上，創建了初始原型。我們對結果非常驚喜：

這個系統已經顯示了巨大的潛力。我們用同樣的技術去試驗將白板手繪實時轉化為代碼原型，將高保真原型轉化為組件標註給我們的工程師，以及將產品代碼轉化為設計文件給我們的設計師，用於迭代。

進行中的探索

隨著設計系統化的逐漸流行，以及界面越來越標準化，我們相信人工智慧輔助下的設計和開發會在下一個時代更好地發展。我們非常高興能與這麼多有志於探索這個領域並想看看這個領域怎麼發展的設計師和開發者分享我們的工作。請持續關注我們未來的更新，我們在繼續試驗和開發。設計工具的主管Lucas Smith將將往後幾期文章中深入講解我們的研究和文獻，告訴大家我們的方法。

想知道我們更多的想法以及願景，請看下面的視頻。該視頻中，我講了一些關於組件化和設計系統的思考。

<本視頻超過15分鐘，知乎不能上傳，請移步airbnb 草圖轉代碼_騰訊視頻>

感謝設計技術團隊的其他成員幫忙推進這個項目：Jon Gold, Gavin Owens, David Chen, Lucas Smith。

-------- 翻譯結束 -----------

未來已來。我之前一篇文章還設想過人工智慧對設計的改變，如今就已經有了demo。世界變化之快，超出我們的想像。

我是Baoling，一個不設限的設計師。歡迎關注我的公眾號BaolingUX，期待與你的思想碰撞。

http://weixin.qq.com/r/EUN8ZO7E67OUraoH9xYD (二維碼自動識別)