Sketch2Code是一個微軟設計的網頁設計方案，它使用AI將手寫用戶界面設計從圖片轉換為有效的HTML線框圖，有助網頁開發及網頁推廣。

首先，用戶通過網站上傳繪製的設計。從個性化的視覺模型中，可預測圖像中存在的HTML元素及其位置，亦能識別手寫文字以預測元素內的文字。然後，使用佈局算法來預測元素的所有邊界框的空間信息來生成所有邊界框的網格結構。最後，使用HTML生成引擎來生成反映所有這些信息的HTML線框語法檔案。

Sketch2Code使用以下元素：

Microsoft客製視覺模型：此模型已經過訓練，其中包含不同手寫設計的圖像，用於標記最常見的HTML元素（如按鈕，文本框和圖像）的信息。
Microsoft客製視覺服務：為了識別寫入設計元素的文本。
Azure Blob存儲：存儲HTML生成過程中涉及的所有步驟，包括原始圖像，預測結果和佈局分組信息。
Azure功能：用作後端入口點，通過與所有服務交互來協調生成過程。
Azure網站：用戶font-end，用於上傳新設計並查看生成的HTML結果。

文章來源: iThome