如何使用 Microsoft 的 Sketch2Code 將手繪網站版面配置轉換為 HTML 程式碼

有沒有想過在紙上畫一些東西並讓它在現實世界中栩栩如生該有多酷？好吧，這就是微軟透過 AI 支援的 Skletch2Code Web 應用程式實現的目標，只需單擊一個按鈕即可將手寫繪圖從白板轉換為 HTML 網站。

Sketch2Code 可以在短短幾秒鐘內將網站的任何手繪佈局轉換為 HTML。該工具使用微軟的電腦視覺人工智慧服務來檢測繪圖中的 HTML 對象，然後使用文字辨識來提取繪圖中的手寫文本，以組合和建立圖像中所有設計元素的 HTML 片段。

這使得網頁設計師和開發人員能夠在幾秒鐘內以驚人的速度建立多種不同風格的網站 HTML 原型。如果您有興趣了解其在後端的工作原理，請務必閱讀 Microsoft 網站上有關 Sketch2Code 的技術詳細資訊。

以下是一個快速教程，向您展示使用 Sketch2Code 將網站佈局圖轉換為真正的 HTML 頁面是多麼簡單。

首先，在白板或白紙上繪製網站的版面。然後，拍一張照片並將其保存到您的電腦上。之後，點擊下面的按鈕在瀏覽器中開啟 Sketch2Code Web 應用程式。

打開網站後，點擊「上傳設計」按鈕，然後選擇您在白板或白紙上繪製的網站佈局圖片。

選擇並上傳您的手繪網站佈局

上傳手繪網站設計後，坐下來觀看 Sketch2Code 使用 AI 根據您上傳的圖像中的佈局自動生成 HTML 頁面。

過程完成後，您將看到新產生的 HTML 頁面的預覽以及下載完整程式碼的選項。按一下「下載 HTML 程式碼」按鈕即可取得。手繪網站佈局的 html 文件，以便您可以在網頁瀏覽器中本地測試和預覽它。

按一下「下載 HTML 程式碼」按鈕

就是這樣。我們希望 Sketch2Code 可以節省您製作網頁佈局原型的時間。