AI ใน MarkupGen: จากสร้างโค้ดถึงให้คะแนนคุณภาพ

AI ใน MarkupGen ไม่ใช่ฟีเจอร์เดียวโดดๆ แต่แทรกอยู่ในทั้งสามขั้นตอนของเวิร์กโฟลว์ ตั้งแต่สร้างโค้ดจากดีไซน์ ตัดสินคุณภาพของเอาต์พุตนั้น ไปจนถึงแนะนำวิธีปรับปรุงเมื่อผลลัพธ์ยังไม่ตรงกับต้นฉบับ บทความนี้จะพาไปดูแต่ละชั้นทีละส่วน และเหตุผลที่ทั้งหมดถูกออกแบบมาเพื่อสนับสนุนวิจารณญาณของนักพัฒนา ไม่ใช่แทนที่มัน

สร้างโค้ดจากโครงสร้างของดีไซน์

ในขั้นตอนแรก AI ไม่ได้ "วาดใหม่" ดีไซน์จากภาพหน้าจอ แต่อ่านโครงสร้างจริงที่ปลั๊กอิน Figma ส่งมาให้ ทั้ง Auto Layout, spacing, ลำดับชั้นของเลเยอร์ และข้อจำกัดการปรับขนาด จากนั้นจึงสร้าง HTML/CSS ที่ตามโครงสร้างนั้นโดยตรง แทนที่จะเดาทีละพิกเซล:

• คุณสมบัติ Auto Layout (ทิศทาง, gap, padding, การจัดตำแหน่ง) จะถูก map ไปเป็นกฎ CSS Flexbox ที่เทียบเท่ากัน
• ข้อจำกัดการปรับขนาดของเลย์เอาต์จะถูกแปลงเป็น breakpoint แบบ responsive แทนที่จะเป็นหน้าที่มีความกว้างตายตัวหน้าเดียว
• เอาต์พุตเลือกใช้เอลิเมนต์ HTML ที่มีความหมาย แทนที่จะเป็น <div> ที่ซ้อนลึกและไม่มีป้ายกำกับ

การสร้างจากโครงสร้างแทนที่จะเดาจากภาพนี่เองที่ทำให้ผลลัพธ์รักษาลำดับชั้นและ spacing ของดีไซน์ต้นฉบับไว้ได้ แทนที่จะเป็นอะไรที่แค่ "ดูเหมือนถูกต้อง" ทั้งที่ CSS เบื้องหลังต่างออกไปโดยสิ้นเชิง

เลือกโมเดล AI ให้เหมาะกับงาน

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

การให้คะแนนคุณภาพเอาต์พุตอัตโนมัติ

เมื่อสร้างโค้ดเสร็จแล้ว AI จะเทียบภาพหน้าจอของพรีวิวสดกับดีไซน์ต้นฉบับ แล้วให้คะแนนความใกล้เคียงบนสเกล 1–10 คะแนนนี้ไม่ใช่ตัวเลขลอยๆ แต่มาพร้อมการประเมินอย่างละเอียดว่าส่วนไหนตรงและส่วนไหนยังเพี้ยน ทำให้คุณรู้ทันทีว่าเอาต์พุตนั้นพร้อมใช้งานจริงหรือยังต้องแก้ไข เมื่อคะแนนถึงเกณฑ์ที่เกือบสมบูรณ์แบบแล้ว ระบบจะถือว่าไม่มีอะไรที่ AI ควรแก้ไขเพิ่มอีก และซ่อนคำแนะนำให้สร้างโค้ดใหม่ที่ไม่จำเป็นออกไป

ลูปฟีดแบ็ก: วิเคราะห์แล้วสร้างใหม่

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

ทำไมเรื่องนี้ถึงสำคัญ

ทั้งสามชั้นนี้มุ่งไปที่เป้าหมายเดียวกัน คือตัดขั้นตอนการแปลจากดีไซน์เป็นโค้ดที่เป็นกลไกซ้ำๆ ออกไป เพื่อให้แรงของนักพัฒนาไปอยู่กับสิ่งที่ต้องใช้วิจารณญาณของคนจริงๆ ไม่ว่าจะเป็นรายละเอียดการอินเทอร์แอกชัน edge case ต่างๆ และการรวมผลลัพธ์เข้ากับโค้ดเบสที่ใหญ่กว่า ถ้าอยากเห็นทั้งสามชั้นนี้ทำงานกับดีไซน์ของคุณเอง ลองใช้ฟรี ได้เลย