Sketch2Code เปลี่ยนภาพ Wireframe ธรรมดา ให้เป็น HTML

 In Programing, Technology

Sketch2Code เครื่องมือใหม่จาก Microsoft ที่ช่วยให้การทำงานของนักโปรแกรมเมอร์และผู้ที่ทำงานในตำแหน่ง Front-end ทำงานได้สะดวกมากขึ้น ด้วยการนำ AI เข้ามาช่วยแปลงให้ภาพ Wireframe ธรรมดาบนกระดาษ กลายเป็นโค้ด HTML ได้อย่างง่ายดาย

การทำงานของ Sketch2Code

ด้วยเทคโนโลยี AI ที่ฉลาดและสามารถทำงานได้อย่างรอบรู้ Microsoft จึงนำเข้ามาช่วยให้การทำงานของผู้พัฒนาหน้าเว็บไซต์ทำงานได้รวดเร็วมากขึ้นด้วยเครื่องมือนี้ โดย Sketch2Code สามารถทำงานได้ดังนี้

Sketch2Code

  1. อัปโหลดรูปภาพ Wireframe
    ผู้ใช้งานเข้าไปยัง https://sketch2code.azurewebsites.net/ เพื่อทำการอัปโหลดรูป Wireframe ลงไปยังระบบ
  2. ตรวจสอบรูปแบบของการ Design
    AI จะทำการตรวจสอบรูปภาพที่คุณอัปโหลดเข้ามา แล้วทำการ Custom Design รูปแบบหน้า UI
  3. สร้างโค้ด HTML
    เมื่อทำการตรวจสอบเรียบร้อยแล้ว จะทำการสร้างโค้ด HTML ออกมาให้ผู้ใช้งานดาวน์โหลดไปใช้งานกันได้เลย

Sketch2Code

ทั้งนี้ ผู้ใช้งานจะเห็นว่าบางทีโค้ด HTML ที่ได้ออกมานั้นอาจจะยังไม่ตรงเป๊ะกับที่ออกแบบไว้เท่าไหร่นัก แต่คุณก็สามารถมาปรับเปลี่ยนให้ตรงตามที่ออกแบบได้ เนื่องจากโค้ดที่ได้เป็นเพียงการคาดคะเนจาก AI ทำให้อาจจะออกแค่ใกล้เคียง แต่การทำงานของเครื่องมือนี้ ก็อาจทำให้นักโปรแกรมเมอร์หลายๆ ท่านสามารถประหยัดเวลาในการขึ้นโครงโค้ด HTML ไปได้เยอะเลย  

 

ที่มา : [1]

 

Recommended Posts