February 5, 2026

ผลทดสอบประสิทธิภาพ AI UI Generation ผ่าน “Single Prompt” Benchmark

Project Overview

ช่วงหลังคำว่า Vibe Coding เริ่มถูกพูดถึงมากขึ้นในกลุ่ม designer และ product people ที่เริ่มทำงานร่วมกับ AI อย่างจริงจัง ไม่ใช่แค่การใช้ AI เพื่อช่วยเขียนโค้ด แต่เป็นการใช้ AI เป็น “คู่คิด” ในการออกแบบ คิดโครงสร้าง และตัดสินใจไปพร้อมกันตลอดกระบวนการทำงาน

บทความนี้เป็นการทดลองเชิงปฏิบัติ โดยใช้ prompt เดียวกัน 100% เหตุผลที่เลือกใช้ prompt เดียวกันกับทุก tool เพราะต้องการตัด bias ออกให้มากที่สุด หากมีการปรับ prompt ให้เข้ากับแต่ละ platform จะไม่สามารถแยกได้อย่างชัดเจนว่าคุณภาพของผลลัพธ์เกิดจาก “ความสามารถของ AI” หรือเกิดจาก “การไกด์ของมนุษย์” การทดลองนี้จึงปล่อยให้แต่ละ tool แสดงศักยภาพของตัวเองออกมาโดยตรง

เป้าหมายไม่ใช่การวัดความเก่งของการเขียน prompt แต่เรากำลังหาว่า... AI ตัวไหน 'คิดแทน' Designer ได้ดีที่สุด เครื่องมือที่นำมาทดลองมีทั้งหมด 4 ตัว ได้แก่ Antigravity (Claude Sonnet), Antigravity (Gemini Pro), Loveable และ Figma Make (Model Default) 

โดยโจทย์ของการทดลองคือการสร้าง landing page สำหรับ AI product ที่ช่วยสรุป meeting note แบบอัตโนมัติ

ถ้าพร้อมแล้วไปเริ่มกันที่ Prompt ในการทดสอบเลย!

Prompt for Testing

รายละเอียดของ Standardized Prompt ที่ครอบคลุมทั้ง Role, Design Specs และ Technical Requirements เพื่อดูว่า AI แต่ละตัวจะเปลี่ยน 'คำสั่งตัวอักษร' ให้กลายเป็น 'High-fidelity Landing Page' ได้แม่นยำแค่ไหน

Let's find out!

Output Comparison

Antigravity (Claude Sonnet)

Claude Sonnet แสดงให้เห็นถึงความเข้าใจบทบาท Senior UX Engineer และ Product Designer ได้ชัดเจนที่สุดในกลุ่มเครื่องมือที่ทดลอง โครงสร้างของ landing page ถูกจัดลำดับตาม conversion flow ของ SaaS อย่างเป็นระบบ โดยให้ความสำคัญกับ Magic Preview ในฐานะ core value ของ product และใช้ Feature กับ Pricing เป็นตัวเสริมความน่าเชื่อถือ ไม่ใช่แค่ส่วนประกอบตกแต่ง Interactive logic อย่าง Summary Style Toggle ถูกตีความเป็น stateful interaction จริง ไม่ใช่เพียง mock UI ทำให้ผลลัพธ์สะท้อน product thinking และ UX reasoning มากกว่าการจัด layout ให้ครบตามโจทย์

ข้อดี

  • เข้าใจ UX flow และ conversion logic ระดับ senior
  • ตีความ interaction และ state change ได้ถูกต้องตาม intent
  • Visual tone สอดคล้องกับ prompt (Professional, Minimal, Aero-glass)
  • Layout และ spacing อ่านออกว่าออกแบบเพื่อ production จริง

ข้อเสีย

  • Micro-interaction และ emotional detail ยังค่อนข้าง conservative
  • Brand personality ยังกลาง ๆ ต้องมี designer มา refine เพิ่ม
  • ไม่เหมาะกับงานที่ต้องการ visual experiment หรือความหวือหวา

Antigravity (Gemini Pro)

Gemini Pro แสดงจุดเด่นด้าน product framing และ business thinking มากกว่า UX execution ผลลัพธ์โดยรวมมีโครงสร้างที่ดูเป็น SaaS landing page ชัดเจน เข้าใจ value proposition ของ NEURA-NOTE และอธิบาย feature ได้ครบถ้วน โดยเฉพาะในส่วนของ feature list และ pricing logic อย่างไรก็ตาม ในเชิง UX hierarchy และ interaction thinking ยังมีลักษณะเป็น “static presentation” มากกว่าการออกแบบ flow เพื่อ conversion จริง Magic Preview และ Summary Style Toggle ถูกวางมาเพื่อโชว์ concept แต่ยังไม่แสดง intent ของ stateful interaction อย่างชัดเจนเท่าที่ prompt ตั้งใจทดสอบ

ข้อดี

  • Product positioning และ business framing ชัดเจน
  • Copy อธิบาย feature และ value ได้ครบ อ่านเข้าใจง่าย
  • Pricing structure สมเหตุสมผล เหมาะกับการสื่อสารเชิง commercial
  • Overall look ดูเป็น SaaS จริง ไม่หลุดโจทย์

ข้อเสีย

  • UX hierarchy ยังไม่คม จุดเด่นของ Magic Preview ยังไม่ถูกดันเป็น core value
  • Interaction logic (Summary Toggle) ยังดูเป็น mock มากกว่าการคิดเป็น state
  • Visual และ spacing ค่อนข้าง conservative และ generic
  • ยังต้องพึ่ง designer ในการ refine UX flow และ conversion detail

Loveable

Loveable ให้ผลลัพธ์ที่โดดเด่นด้าน visual polish และความเร็วในการสร้างภาพรวมของ product หน้า landing page ดูสะอาด ทันสมัย และให้ความรู้สึกแบบ modern SaaS ตั้งแต่ first impression อย่างไรก็ตาม การตีความบทบาท Senior UX Engineer และ Product Designer ยังเน้นไปที่การจัดวาง UI มากกว่าการคิด UX logic เชิงลึก Magic Preview และ Summary Style Toggle ถูกนำเสนอในลักษณะของ concept showcase มากกว่าการออกแบบ interaction ที่คิดเป็น state และ conversion flow อย่างจริงจัง ส่งผลให้ผลลัพธ์เหมาะกับการใช้งานในเชิง inspiration มากกว่าการนำไปต่อยอดเป็น production โดยตรง

ข้อดี

  • Visual look & feel สะอาด ทันสมัย ดูเป็น SaaS ระดับ production
  • Layout อ่านง่าย เหมาะกับการใช้เป็น moodboard หรือ pitch
  • Branding และ typography ดูกลมกลืน ไม่หลุด vibe
  • สร้าง first impression ได้ดีมากในเวลาอันสั้น

ข้อเสีย

  • UX hierarchy ค่อนข้าง generic ไม่มี section ไหนถูกดันเป็น core value ชัดเจน
  • Interaction logic (Summary Toggle) ยังดูเป็น static showcase
  • Conversion flow ยังไม่ชัด CTA ยังไม่ถูกเน้นเชิงกลยุทธ์
  • ยังไม่สะท้อน mindset ของ Senior UX Engineer เท่าที่ prompt ตั้งใจทดสอบ

Figma Make (Model Default)

Figma Make ให้ผลลัพธ์ที่สะท้อนความแข็งแรงด้าน design system execution และ visual consistency มากที่สุด โครงสร้างหน้า landing page มีความเป็นระเบียบสูง spacing, alignment และ component reuse ทำได้ดีและอ่านออกชัดว่าออกแบบภายใต้กรอบของ system อย่างไรก็ตาม การตีความบทบาท Senior UX Engineer และ Product Designer ยังจำกัดอยู่ในระดับ “render ตาม pattern ที่คุ้นเคย” มากกว่าการคิด UX logic หรือ product reasoning เพิ่มเติม Magic Preview และ Summary Style Toggle ถูกวางมาในฐานะ section ตามโจทย์ แต่ยังขาด intent เชิง interaction และ conversion thinking ทำให้ผลลัพธ์เหมาะกับการนำไปใช้เป็น design base มากกว่าการใช้ตัดสินใจเชิง product

 

ข้อดี

  • Visual consistency และ spacing ดีมาก อ่านออกว่าใช้ design system
  • Layout เป็นระเบียบ เหมาะกับการนำไปต่อเป็น production UI
  • Typography และ component scale ค่อนข้างแม่นยำ
  • เหมาะกับ workflow ที่ต้องการความเร็วและความเรียบร้อย

ข้อเสีย

  • UX hierarchy ค่อนข้างแบน ไม่มี section ไหนถูกดันเป็น core value ชัดเจน
  • Interaction logic (Summary Toggle) ยังเป็น static representation
  • ขาด product storytelling และ conversion reasoning
  • ไม่ได้สะท้อนการคิดแบบ Senior UX / Product Designer ตามบทบาทใน prompt

Summary Result

การทดลองนี้ชี้ให้เห็นว่า Vibe Coding ไม่ได้ขึ้นอยู่กับ prompt อย่างเดียว แต่ขึ้นอยู่กับว่า AI แต่ละตัวคิดแทนเราในบทบาทใด แม้ใช้ master prompt เดียวกัน ผลลัพธ์กลับสะท้อน mindset ที่ต่างกันอย่างชัดเจน บาง tool คิดเป็น UX และ interaction ได้จริง บาง tool เก่งด้าน product framing บาง tool เหมาะกับการสร้าง visual inspiration และบาง tool ทำหน้าที่เป็นระบบสำหรับเร่ง execution มากกว่า สำหรับทีมออกแบบและทีม product คำถามจึงไม่ใช่ “AI ตัวไหนดีที่สุด” แต่คือ “ใน stage นี้ เราต้องการคู่คิดแบบไหน” 

เพราะในยุคของ Vibe Coding บทบาทของ designer ไม่ได้ถูกแทนที่ แต่ถูกยกระดับให้เป็นผู้เลือกและ orchestrate เครื่องมือที่เหมาะสมที่สุดในแต่ละช่วงของงาน