編者按：最近超火的Sketch2Code 是什么神器？它如何將設(shè)計草圖秒變成HTML 代碼？本文翻譯了微軟的官方博客介紹，讓你理解這個開源神器是如何工作的！

用戶界面設(shè)計過程涉及大量創(chuàng)造性的迭代工作。這個過程通常從白板或白紙上畫草圖開始，設(shè)計師和工程師分享他們的想法，盡力表達出潛在的客戶場景或工作流程。當(dāng)他們在某個設(shè)計上達成一致之后，將草圖畫出來，然后手動將草圖輸出為 HTML 代碼。輸出過程需要耗費很多時間和精力，通常會減慢設(shè)計過程。

如果可以將白板上手繪的設(shè)計立即反映在瀏覽器中，那會怎樣？如果我們能夠做到這一點，在設(shè)計頭腦風(fēng)暴結(jié)束時，我們就可以擁有一個已經(jīng)由設(shè)計師、開發(fā)人員甚至客戶驗證過的現(xiàn)成原型，這將為網(wǎng)站和應(yīng)用程序開發(fā)省不少時間。現(xiàn)在，微軟已經(jīng)借助 AI 做到了這一點，同時他們還將這個項目在 Github 上開源了。

一、Sketch2Code 是什么？

△ Sketch2Code 視頻了解更多：https://v.qq.com/x/page/e0772njq1my.html

Sketch2Code 是一個基于 Web 的解決方案，使用 AI 將手繪的用戶界面草圖轉(zhuǎn)換為可用的 HTML 代碼。Sketch2Code 由微軟和 Kabel、Spike Techniques 合作開發(fā)。讀者可以在 GitHub 上找到與 Sketch2Code 相關(guān)的代碼、解決方案開發(fā)過程和其他詳細信息。

Sketch2Code 項目地址：https://github.com/Microsoft/ailab/tree/master/Sketch2Code

下圖演示了利用 Sketch2Code 將手繪草圖轉(zhuǎn)換成代碼的操作過程。在微軟官方網(wǎng)站上可以做更多嘗試：https://sketch2code.azurewebsites.net/

二、Sketch2Code 是如何工作的？

讓我們來看看使用 Sketch2Code 將手繪草圖轉(zhuǎn)換成 HTML 代碼的過程：

• 用戶將圖片上傳到網(wǎng)站上；
• 自定義視覺模型預(yù)測在圖像中出現(xiàn)的 HTML 元素，并將它們的位置標(biāo)出來；
• 手寫文本識別服務(wù)讀取預(yù)測元素中的文本；
• 布局算法根據(jù)預(yù)測元素的邊框空間信息生成網(wǎng)格結(jié)構(gòu)；
• HTML 生成引擎使用上述信息來生成 HTML 代碼。

工作流程如下所示：

三、Sketch2Code 的架構(gòu)設(shè)計

Sketch2Code 使用了以下組件：

• 微軟自定義視覺模型（Custom Vision）：這個模型是基于不同的手繪稿的圖像訓(xùn)練得出的，并標(biāo)記了與常見 HTML 元素（如文本框、按鈕、圖像等）相關(guān)的信息。
• 微軟計算機視覺服務(wù)：用于識別設(shè)計元素中的文本。
• Azure Blob Storage：保存與 HTML 生成過程的每個步驟相關(guān)的信息，包括原始圖像、預(yù)測結(jié)果、布局和分組信息等。
• Azure Function：它作為后端入口點，通過與其他服務(wù)發(fā)生交互來協(xié)調(diào)生成過程。
• Azure Website：用戶界面前端，用戶可以在這里上傳設(shè)計圖，并查看生成的 HTML。

以上組件通過如下架構(gòu)組合在一起：

是不是感覺躍躍欲試？

你可以在這里找到 Sketch2Code 的開源代碼：https://github.com/Microsoft/ailab/tree/master/Sketch2Code

也可以在這里對 Sketch2Code 的實際效果進行驗證：https://sketch2code.azurewebsites.net/

參考鏈接：

• 《Turn Whiteboard UX Sketches into Working HTML in Seconds – Introducing Sketch2Code》

「前端干貨大合集盡在這里」

• 《開學(xué)福利！2018年9月前端開發(fā)者超實用干貨大合集》
• 《七夕福利！2018年8月設(shè)計圈超實用干貨大合集》
• 《夏日福利！2018年7月前端開發(fā)者超實用干貨大合集》