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 在線條的呈現上會較為整齊。