AIFrameworkSoftware DevelopmentTechCut

Human Expertise, AI-Accelerated: AI Process ที่ทำงานได้จริง ฉบับ Muze

เจาะลึก AI Framework ของ Muze ผ่าน case study การพัฒนาเว็บไซต์ muze.co.th — ตั้งแต่การเลือก tech stack ที่ถูกต้อง ไปจนถึงการตัดสินใจว่า animation ไหนสื่อความหมายได้จริง

Human Expertise, AI-Accelerated — Inside Muze’s real development workflow

หลายองค์กรพูดเรื่อง AI เหมือนกัน แต่วิธีใช้ต่างกันมาก บางทีม AI คือเครื่องมือที่ “ลองดูก่อน” แต่สำหรับ Muze มันคือ process ที่ชัดเจน มีคนรับผิดชอบ และผลลัพธ์วัดได้

ที่ Muze เราเชื่อว่า AI ที่ทำงานได้จริงต้องเริ่มจาก คนที่รู้งาน ไม่ใช่จาก prompt ที่ถูกที่สุด

บทความนี้ไม่ใช่ case study ของลูกค้า แต่เป็น case study ของตัวเราเอง — การพัฒนาเว็บไซต์ muze.co.th ใหม่ทั้งหมด โดยใช้ framework เดียวกับที่เราใช้กับ enterprise client ทุกราย


01 — Expertise Before Automation

ก่อนจะพูดถึงเครื่องมือ AI สิ่งที่สำคัญกว่าคือ “คนที่เข้าใจโจทย์” ต้องเป็นคนวางกรอบให้ถูกก่อน

AI ไม่ได้รู้เองว่าอะไรเหมาะกับธุรกิจเรา หรืออะไรจะส่งผลดีในระยะยาว AI สามารถช่วยคิด ช่วยเขียน ช่วยเสนอทางเลือกได้เร็วมาก แต่ถ้าเริ่มจากโจทย์ที่ผิด หรือ foundation ที่ไม่เหมาะ ผลลัพธ์ก็อาจเร็วขึ้นจริง แต่เร็วไปในทิศทางที่ผิด นี่คือเหตุผลที่ Muze เรียกหลักการนี้ว่า Expertise Before Automation — ใช้ประสบการณ์ของคนที่รู้งานเป็นตัวกำหนดทิศทางก่อน แล้วค่อยให้ AI เข้ามาเร่งความเร็ว

01 — Expertise Before Automation: Choose the foundation before choosing the tool

เลือก Foundation ก่อน ค่อยเลือก Tool

หลายคนมองว่าขั้นตอนแรกของการใช้ AI คือ “หา tool ที่ดีที่สุด” แต่จริงๆ แล้วขั้นตอนแรกคือเลือก foundation ที่ถูกต้อง การตัดสินใจแรกๆ เช่น จะใช้ framework อะไร จะจัดการ content แบบไหน อาจดูเหมือนเป็นเรื่อง technical แต่จริงๆ แล้วเป็น business decision เพราะมันส่งผลต่อความเร็ว ต้นทุน ความยืดหยุ่น และคุณภาพของงานในระยะยาว

ก่อนที่ Claude Code จะเขียนโค้ดบรรทัดแรก CTO ของ Muze ตัดสินใจสิ่งที่สำคัญที่สุดก่อน: framework คืออะไร และ content จะ manage ยังไง

Hugo ไม่ใช่ WordPress: WordPress คือ platform ที่มี layer ซ้อนกันหลายชั้น — theme, plugin, database, admin panel ทุกครั้งที่ต้องการ custom design หรือ animation พิเศษ ต้องทำงานผ่าน WordPress API การเลือก Hugo ทำให้ Claude Code สามารถ customize ได้ทุกส่วนโดยตรง ตั้งแต่ HTML structure, CSS animation, ไปจนถึง JavaScript canvas ที่ซับซ้อน โดยไม่ต้องกังวลว่า plugin ตัวไหนจะ break

เปรียบได้กับการเช่าพื้นที่ออฟฟิศสำเร็จรูปที่ตกแต่งมาให้แล้ว เทียบกับการสร้างออฟฟิศเอง — แบบแรกเข้าได้เร็วแต่ดัดแปลงได้แค่ในขอบเขตที่เจ้าของอนุญาต แบบหลังใช้เวลาวางแผนมากกว่าแต่ทำอะไรได้ตามที่ต้องการทุกอย่าง Hugo คือแบบหลัง

และถ้าเมื่อก่อนแบบหลังหมายถึง “ทำเองทุกอย่าง ช้า ใช้เวลานาน” — ลองจินตนาการว่าแบบหลังนั้น แต่คุณมีหุ่นยนต์ที่พร้อมทำงานและแก้ไขให้ตลอด 24 ชั่วโมง 7 วัน ไม่หลับไม่นอน มันจะเร็วแค่ไหน และได้ของตามที่คุณต้องการมากแค่ไหน — นั่นคือสิ่งที่ Hugo กับ Claude Code ทำให้เกิดขึ้นในโปรเจกต์นี้

Markdown = AI Workflow: AI and humans work on the same file, in the same workflow

Markdown = ประตูสู่ AI Workflow: บทความ TechCut ทุกชิ้น รวมถึงบทความที่คุณกำลังอ่านอยู่นี้ ผ่านกระบวนการทำงานที่ Gemini ทำหน้าที่เป็น data miner (ตัวค้นหาและรวบรวมข้อมูล) เพื่อดึง insight จากแหล่งต่างๆ จากนั้น Claude ช่วย structure และเขียน draft ก่อนที่ editor มนุษย์จะ review และ refine ให้สมบูรณ์

Markdown คือรูปแบบไฟล์ที่ทำให้ AI และมนุษย์ทำงานบน file เดียวกัน ด้วย tool ชุดเดียวกัน ใน workflow เดียวกัน — เหมือนทีมงานทุกคนในองค์กรตกลงใช้แบบฟอร์มรายงานเดียวกันตั้งแต่ต้น ไม่ว่าใครจะเป็นคนกรอก AI หรือมนุษย์ ก็อ่านต่อได้ทันทีโดยไม่ต้องแปลงหรืออธิบาย

และถ้าเมื่อก่อนการกรอกแบบฟอร์มนั้นใช้เวลานาน ลองจินตนาการว่ามีผู้ช่วยที่กรอกได้เร็วกว่ามนุษย์ 10 เท่า ทำงาน 24 ชั่วโมง และไม่เคยกรอกผิดแบบ — นั่นคือสิ่งที่เกิดขึ้นใน workflow นี้

Hugo vs WordPress ดูเหมือนเป็น technical decision แต่จริงๆ แล้วมันเป็น strategic decision — เหมือนการเดินทางที่มีแผนที่และเข็มทิศ กับการเดินทางที่แค่เดินไปเรื่อยๆ แล้วหวังว่าจะถึงที่หมาย

AI workflow ที่ดีไม่ได้เริ่มจาก prompt ที่ดีอย่างเดียว แต่เริ่มจากการออกแบบ environment ให้ AI และคนทำงานร่วมกันได้จริง


02 — AI Proposes, We Decide

เมื่อองค์กรเริ่มใช้ AI สิ่งที่เกิดขึ้นบ่อยคือ AI สามารถเสนอทางเลือกได้เยอะมาก เร็วมาก และบางครั้งก็ดูดีทั้งหมด แต่ปัญหาคือ “ดูดี” ไม่ได้แปลว่า “ถูกต้อง”

ในงาน digital experience รายละเอียดเล็กๆ อย่าง animation, wording, layout หรือ interaction ล้วนส่งผลต่อความรู้สึกของผู้ใช้ และส่งผลต่อ perception ของ brand โดยตรง AI อาจเสนอ option ที่สวยหลายแบบ แต่คนยังต้องเป็นคนตัดสินใจว่า option ไหนสื่อสาร brand ได้ถูกต้องที่สุด — option ไหนเหมาะกับบริบทของหน้านั้น

02 — AI Proposes, We Decide: The right choice communicates meaning, not just beauty

จาก 5 Concept สู่คำถามเดียว

ในการออกแบบ muze.co.th เราใช้ Claude เป็นตัวช่วยหา animation concept สำหรับแต่ละ section โดยโจทย์ที่ให้ไปไม่ใช่แค่ “ทำให้สวย” แต่คือ “ทำให้ทั้งสวยและสื่อความหมายของ section นั้นได้จริง” — เพราะ design ที่ดีต้องบอกเล่าเรื่องราวได้ ไม่ใช่แค่ดึงดูดสายตา

Claude Code จึง propose animation concept หลายแบบ: dot grid, binary rain, Voronoi cells, constellation, neural network ทุก option ล้วน “สวย” ในแบบของตัวเอง แต่ทีมตั้งคำถามกลับว่า: animation ไหน “รู้สึก” ถูกต้องสำหรับ section นี้ — section ที่พูดถึงการที่ Muze ใช้ AI ร่วมทำงาน ต้องสื่อความหมาย ดูลึกซึ้ง และเชื่อมโยงกับ AI ได้จริง

คำตอบคือ Neural Network

ทำไมถึงไม่ใช่แค่ Background Effect

Neural Network หรือ Multilayer Perceptron คือพื้นฐานของ Deep Learning — โครงสร้างที่ Claude และ Gemini สร้างขึ้นมาจากมัน ถ้าอธิบายแบบง่ายที่สุด: ข้อมูลเริ่มจาก input ถูกส่งผ่าน node ต่างๆ ถูกแปลงความหมายทีละชั้น และค่อยๆ กลายเป็น output ที่ระบบนำไปใช้ต่อได้ — node แต่ละจุดแทน neuron, สัญญาณที่วิ่งผ่าน layer แทน information ที่ถูก transform

ใครก็พูดได้ว่า “เราใช้ AI” แต่การแปลง Multilayer Perceptron ออกมาเป็น animation ที่ทั้งสวยและสื่อความหมายได้ถูกต้อง — ต้องการความเข้าใจที่ลึกกว่ามาก

Process จริงที่เกิดขึ้น

AI propose concept, parameter, และ code ต้นฉบับ แต่ทีมตัดสินใจว่า animation ไหนถูก, ความเร็ว/opacity ของ signal เท่าไหร่ให้รู้สึก “ลึก” ไม่ใช่ “วุ่นวาย”, desktop กับ mobile ควร behave ต่างกันอย่างไร

Iteration เกิดขึ้นหลายสิบรอบ แต่ทุก iteration เริ่มจากคำถามของทีม ไม่ใช่จาก suggestion ของ AI

ผลลัพธ์ที่ได้คือ section ที่สื่อความหมายได้ลึกซึ้ง มี design ที่สะอาด ไม่รก และเข้ากับ concept ของ Human Expertise, AI-Accelerated ได้อย่างตรงจุด สำหรับคนทั่วไปมันคือ background animation ที่สวยงาม แต่สำหรับคนที่รู้ลึกเรื่อง AI — พวกเขาจะเห็น Multilayer Perceptron ที่ซ่อน story ของ framework ทั้งหมดไว้ในภาพเดียว

สำหรับคนที่อยู่ในวงการและรู้ว่ากำลังดูอะไรอยู่ — พวกเขาจะเห็นทันทีว่าไม่ใช่แค่ว่า Muze ใช้ AI แต่ Muze เข้าใจ AI ในระดับที่ลึกพอจะออกแบบความหมายลงไปในทุกรายละเอียด และสิ่งเล็กๆ แบบนี้เองที่บอกความแตกต่างได้ชัดกว่าคำโฆษณาใดๆ


03 — Structured Method, Not Guesswork

การใช้ AI ให้ได้ผลจริงในองค์กรไม่ใช่แค่ให้ทุกคนลองใช้ tool แล้วหวังว่าจะเกิด productivity สิ่งที่สำคัญกว่าคือต้องรู้ว่า AI ควรรับผิดชอบอะไร และมนุษย์ควรรับผิดชอบอะไร ถ้าไม่มีกรอบที่ชัดเจน AI จะถูกใช้แบบกระจัดกระจาย บางคนใช้ช่วยเขียน บางคนใช้ช่วยคิด ไม่มีมาตรฐานร่วมกันว่า output แบบไหนใช้ได้ แบบไหนต้อง review และใครตัดสินใจสุดท้าย

ความล้มเหลวส่วนใหญ่ในการ adopt AI ไม่ได้มาจากการเลือก tool ผิด แต่มาจากความไม่ชัดเจนว่าใครรับผิดชอบอะไร

03 — Structured Method, Not Guesswork: AI proposes. Human approves.

กรอบแบ่งความรับผิดชอบ

ที่ Muze เราใช้กฎง่ายๆ ว่า AI generate, คน judge

  • AI รับผิดชอบ: เขียน code ตาม spec, propose animation concept, draft copy, audit performance
  • คนรับผิดชอบ: กำหนด direction, ตัดสินว่า proposal ไหนถูก brand, review ทุก output ก่อน merge, บอก “อันนี้ไม่ใช่” พร้อมอธิบายว่าทำไม

ทำไม Review ถึงสำคัญ

งานระดับองค์กรไม่ได้ต้องการแค่ output ที่เร็ว แต่ต้องการ output ที่เชื่อถือได้ ตรวจสอบได้ และ align กับ business objective จริง

AI ไม่รู้ว่า Muze คือใคร ไม่รู้ว่า B2B buyer กำลังคิดอะไร ไม่รู้ว่า section นี้ควร feel แบบไหน แต่คนในทีมรู้ นั่นคือความแตกต่างที่ทำให้ output ออกมาเป็น “Muze” ไม่ใช่แค่ “website ที่ทำงานได้”

และ review ไม่ได้หมายถึงแค่ content หรือ design — มันรวมถึง system architecture และ code structure ด้วย

ในโปรเจกต์นี้ CTO เข้ามา review และพบว่า CSS file รวมอยู่ในไฟล์เดียวกว่า 20,000 บรรทัด ซึ่ง AI ไม่ได้ผิด เพราะมันทำตาม context ที่ได้รับ แต่ถ้าไม่มีคนที่เข้าใจ architecture มาดู ปัญหานี้จะซ่อนอยู่และกระทบ performance โดยไม่มีใครรู้

นี่คือสิ่งที่คนที่ vibe coding ทั่วไปมักมองข้าม — AI สร้างสิ่งที่ “ทำงานได้” แต่ไม่ได้แปลว่า “ถูกออกแบบมาอย่างดี” เสมอ เพราะ AI ทำงานจาก context ที่เราป้อนให้ ถ้า context ไม่ครบ หรือไม่มีคนที่รู้ลึกพอมา review สิ่งที่ได้อาจเหมือนอาคารที่ตั้งอยู่ได้ดีในวันปกติ แต่ไม่มีเสากลางพอ — ถ้าเกิดแผ่นดินไหวขึ้นมาเมื่อไหร่ ก็อาจถล่มได้ง่ายๆ

และยิ่งโปรเจกต์ใหญ่ขึ้น ความเสี่ยงนี้ก็ยิ่งทวีคูณขึ้นตามไปด้วย


สรุป: Framework นี้ไม่ใช่แค่ของ Muze

สิ่งที่เราทำกับ muze.co.th เป็น process เดียวกับที่เราใช้ในการทำงานของเรา

ไม่ว่าจะเป็น platform ที่เพิ่งเริ่มต้น ไปจนถึงระบบ OTT ที่ต้องรองรับ peak concurrent users ระดับล้านคน framework เดียวกันนี้ก็ใช้ได้ทั้งสิ้น:

  • เริ่มจาก expert ที่รู้งาน ก่อนที่ AI จะเข้ามา
  • ให้ AI propose แต่ คนตัดสินใจ
  • มี framework ชัดเจน ว่าอะไรคือ AI zone และอะไรคือ human zone

เว็บไซต์ที่คุณกำลังดูอยู่นี้ไม่ใช่แค่ portfolio — มันคือ proof of concept ของ framework ที่เราเชื่อและใช้จริง

ถ้าองค์กรของคุณกำลังคิดจะ adopt AI และอยากได้ partner ที่ทำงานด้วย principle เดียวกันนี้

คุยกับ Muze ได้เลย →

Human Expertise, AI-Accelerated: AI Process ที่ทำงานได้จริง ฉบับ Muze

เขียนโดย

Peeranat Thoonsaengngam
Peeranat Thoonsaengngam Co-Founder & CEO, Muze Innovation