เคยสงสัยไหมว่าการวาดบางสิ่งบนกระดาษแล้วปล่อยให้มันมีชีวิตในโลกแห่งความเป็นจริงจะเจ๋งขนาดไหน? นั่นเป็นเพียงบางสิ่งที่ Microsoft ประสบความสำเร็จด้วยเว็บแอป Skletch2Code ที่ขับเคลื่อนด้วย AI ซึ่งสามารถแปลงภาพวาดที่เขียนด้วยลายมือจากไวท์บอร์ดเป็นเว็บไซต์ HTML ได้ด้วยการคลิกปุ่ม
Sketch2Code สามารถแปลงเลย์เอาต์ที่วาดด้วยมือของเว็บไซต์เป็น HTML ได้ในเวลาไม่กี่วินาที เครื่องมือนี้ใช้บริการ Computer Vision AI ของ Microsoft เพื่อตรวจจับวัตถุ HTML ในภาพวาด จากนั้นใช้การรู้จำข้อความเพื่อแยกข้อความที่เขียนด้วยลายมือในภาพวาดเพื่อรวมและสร้างตัวอย่าง HTML ขององค์ประกอบการออกแบบทั้งหมดในรูปภาพ
ทำให้นักออกแบบและนักพัฒนาเว็บสามารถสร้างต้นแบบ HTML ของเว็บไซต์ในรูปแบบต่างๆ ได้อย่างรวดเร็วภายในเวลาไม่กี่วินาที หากคุณสนใจที่จะทราบวิธีการทำงานในส่วนแบ็คเอนด์ โปรดอ่านรายละเอียดทางเทคนิคเกี่ยวกับ Sketch2Code บนเว็บไซต์ของ Microsoft
ด้านล่างนี้คือบทช่วยสอนสั้นๆ ที่จะแสดงให้คุณเห็นว่าการใช้ Sketch2Code เพื่อแปลงภาพวาดเค้าโครงเว็บไซต์เป็นหน้า HTML จริงนั้นง่ายเพียงใด
ก่อนอื่น ให้วาดเลย์เอาต์ของเว็บไซต์ของคุณบนไวท์บอร์ดหรือแผ่นสีขาว จากนั้นถ่ายภาพและบันทึกลงในคอมพิวเตอร์ของคุณ หลังจากนั้น คลิกที่ปุ่มด้านล่างเพื่อเปิดเว็บแอป Sketch2Code ในเบราว์เซอร์ของคุณ
เรียกใช้ Sketch2Code Web App
เมื่อคุณเปิดเว็บไซต์แล้วให้คลิกที่ อัปโหลดการออกแบบ และเลือกรูปภาพของเค้าโครงเว็บไซต์ที่คุณวาดบนไวท์บอร์ดหรือแผ่นงานสีขาว
หลังจากอัปโหลดการออกแบบเว็บไซต์ที่วาดด้วยมือแล้ว ให้นั่งชม Sketch2Code ใช้ AI สร้างหน้า HTML โดยอัตโนมัติตามเลย์เอาต์ในรูปภาพที่คุณอัปโหลด
เมื่อกระบวนการเสร็จสิ้น คุณจะเห็นหน้าตัวอย่างจากหน้า HTML ที่สร้างขึ้นใหม่พร้อมกับตัวเลือกในการดาวน์โหลดโค้ดแบบเต็ม คลิกที่ ดาวน์โหลดโค้ด HTML ของคุณ เพื่อรับไฟล์ .html ของเลย์เอาต์เว็บไซต์ที่วาดด้วยมือของคุณ เพื่อให้คุณสามารถทดสอบและดูตัวอย่างไฟล์ในเครื่องในเว็บเบราว์เซอร์ของคุณ
แค่นั้นแหละ. เราหวังว่า Sketch2Code จะช่วยคุณประหยัดเวลาในการสร้างต้นแบบเค้าโครงหน้าเว็บ