由微軟AI實驗室推出的一款能將手繪的網頁設計草稿,利用AI技術自動轉變成HTML版型。這可真是所有設計師夢寐以求的神器啊~
雖然目前這個功能準確度普普,嚴格來說還只能當作娛樂性質,無法正式應用在實際場合,但試試也無妨。

sketch2code它能將手繪設計稿變成Bootstrap 4的HTML版型,使用官方的範例,準確度還挺高的,但用我自己繪製的效果就很一般(可能畫工太差)

記得上傳的手稿得是用原子筆畫的,用鉛筆繪製的圖完全讀不到,文字的部分,只認得英文字。不多說了,讓我們直接試試看吧

sketch2code

進入網站之後,可點[Launch]線上測試,或者從[View GitHub]查看源碼。

01.JPG

網站連結

https://www.ailab.microsoft.com/experiments/30c61484-d081-4072-99d6-e132d362b99d

線上測試

點入[Launch]後,我們可以選擇使用它提供的範例做測試,或者是[上傳設計圖]或[拍一張照片]。

但拍照功能很沒用,因為手機版那個按鈕不會顯示,在電腦版則沒辦法拍....所以還是用上傳設計圖的吧~

手稿變HTML

選擇範例圖,分析中

03.JPG

分析結果

分析完成後,它會讓你看對照圖,比對設計圖跟它自動產生的結果。如果滿意,可以直接點[Download Your HTML Code]下載HTML檔。

也可以點[PREDICTED OBJECT DETAILS]觀看分析的詳細結果。

04.JPG

分析詳細報告

它會告訴你說,哪個部分有n%的機率為某元素,例如是圖片(img)、段落(p)、按鈕(button)之類的...

05.JPG

不得不說,這幾年AI技術真的進步頗多,說不定以後真的能實現。但AI這樣發展下去,未來設計師會不會都失業啦~ 


文章轉載或引用,請先告知並保留原文出處與連結!!(單純分享或非營利的只需保留原文出處,不用告知)

原文連結:
https://blog.aidec.tw/post/sketch2code