首頁線上工具開發工具

Sketch2Code 使用 AI 將手繪設計稿轉換成 HTML 程式碼

Sketch2Code 使用 AI 將手繪設計稿轉換成 HTML 程式碼

需求分析是系統開發成敗的關鍵，系統分析師與客戶溝通時，如果可以拿出接近客戶心目中的實際系統操作雛形，相信會比用文字描述來的容易溝通，如果要將溝通時產生的手繪草稿圖利用 HTML 程式碼來呈現，讓客戶可以模擬操作，藉此確定系統規格，這對日後的系統驗收也有一定的幫助，Sketch2Code 是由 Microsoft 的 Azure 雲平台和Azure Cloud AI Web 服務支援，結合人工智慧、OCR 等各項技術，將任何的手繪設計稿件轉成 HTML，方便夥伴協同與客戶溝通。

§相關文章，還可以參閱：

如何使用 Sketch2Code 將手繪設計稿轉換成 HTML 程式碼？

1.使用瀏覽器進入 Sketch2Code 網站，可以先使用系統提供的手繪設計稿件操作，看看效果，也可以按[ UPLOAD DESIGN ]上傳自己的稿件( tiff、jpeg、gif、bmp、png、svg、webp、dib...)。

Sketch2Code 使用 AI 將手繪設計稿轉換成 HTML 程式碼

2.挑好系統所提供的範本，按[ Use this sample ]便可看出其威力。

Sketch2Code 使用 AI 將手繪設計稿轉換成 HTML 程式碼

3.可以按[ Download your html code ]來取得 HTML 頁面，也可以按[ Predicted object details ]來看其設計稿內容轉物件的詳細內容，便於修正日後手繪稿。

Sketch2Code 使用 AI 將手繪設計稿轉換成 HTML 程式碼

4.看其轉出的 HTML 語法，如果沒有太大問題，程式設計師只要對樣式做少許的修正，填上物件的相對應程式碼，應該就能運行。

Sketch2Code 使用 AI 將手繪設計稿轉換成 HTML 程式碼

Sketch2Code 使用 AI 將手繪設計稿轉換成 HTML 程式碼

所拍攝的相片要公開，如果有想要隱藏的部分內容，例如人臉或是可用來推測的某物件，最好的作法當然就是將人臉或物件直接打上馬賽克或將其模糊化，以保護隱私，Facepixelizer 這個免費的線上馬賽克工具，就可以幫我們輕鬆完成該項工作，他可以自動偵測相片中的人臉，然後打上馬賽克，如果還有要隱藏的非人臉物件，也可以透過手動方式來處理，其提供模糊化、馬賽克及完全遮蔽三種隱藏的樣式，用戶可根據需求自行選擇。

非向量類型的圖片，放大後邊緣通常會出現鋸齒狀或過於模糊，因此，常見的工具都屬於縮小而非放大，要放大圖片又要能兼顧解析度，<a href="/3140/">AI Image Enlarger</a> 是個不錯的線上工具，另外，Pic.Hance 也可以考慮，其作法是可以將原圖放大四倍，最大尺寸是 1200 x 1200，並且限定輸入僅能是 jpg、jpeg、png 圖片類型，使用時，需要先註冊，也僅支援 Google 及 Twitter 帳號，至於效果如何，只能說 Pic.Hance 在線條的呈現上會較為整齊。