Vibe Coding ตอนที่ 2: Workflow มือโปร, Prompt, Debug และ Best Practices

ถ้าตอนแรกคือการทำความเข้าใจว่า Vibe Coding คืออะไร ตอนนี้คือภาคลงมือทำจริงว่าทำอย่างไรไม่ให้โปรเจกต์กลายเป็นเดโมที่ดูดีแต่ดูแลต่อไม่ได้ กุญแจสำคัญของ Vibe Coding แบบมือโปรอยู่ที่ workflow ที่ดี ไม่ใช่ prompt เท่ ๆ เพียงครั้งเดียว

Vibe Coding แบบมือโปรต่างจากการลองเล่นกับ AI อย่างไร?

ความต่างอยู่ที่ความตั้งใจและความสามารถในการคุมกรอบ คนที่ลองเล่นมักโยนคำสั่งกว้าง ๆ แล้วหวังว่า AI จะจัดการให้หมด ส่วนคนที่ทำแบบมือโปรจะเริ่มจากการกำหนดเป้าหมาย business outcome, stack, file structure, data flow และข้อจำกัดก่อนเสมอ

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

ก่อนส่ง prompt ควรกำหนดอะไรบ้าง?

ก่อนให้ AI เขียนโค้ด ควรล็อกสิ่งสำคัญเหล่านี้ให้ชัด

• Frontend framework เช่น Next.js, React, Expo หรือ Vue
• Backend หรือ BaaS เช่น NestJS, Express, Supabase, Firebase
• Database เช่น PostgreSQL, MongoDB, Firestore
• UI library หรือ chart library ถ้ามี เช่น Tailwind, shadcn/ui, Recharts
• authentication flow, API contract และข้อจำกัดด้าน deployment

การระบุสิ่งเหล่านี้ช่วยลดโอกาสที่ AI จะพาคุณหลงทางไปกับ stack ที่ทีมไม่ได้ใช้ หรือสร้างโค้ดที่เชื่อมต่อกันไม่ลงตัว

Prompt สำหรับเขียนโค้ดควรหน้าตาแบบไหน?

prompt ที่ดีควรมีทั้งโจทย์และกรอบการตัดสินใจ ตัวอย่างที่ใช้ได้จริงคือ

1. บอกเป้าหมายของ feature

เช่น สร้าง dashboard สำหรับแสดงยอดขายรายวันและรายการคำสั่งซื้อย้อนหลัง

2. ระบุ tech stack

เช่น ใช้ Next.js App Router, TypeScript, MongoDB และ Recharts

3. ระบุ data flow

เช่น ดึงข้อมูลจาก API route, แสดง loading state, รองรับ empty state และ error state

4. ระบุ output ที่ต้องการ

เช่น ขอไฟล์ component, type, mock data, API route และตัวอย่าง test case

5. ระบุข้อห้าม

เช่น ห้าม hard-code secret, ห้ามผูก business logic ไว้ใน component หลัก และห้ามข้าม validation

เมื่อ prompt มีโครงแบบนี้ AI จะทำงานเป็นระบบขึ้นมาก และคุณจะได้โค้ดที่ตรวจต่อได้ง่ายกว่ามาก

Visual Debug Info ช่วย Vibe Coding อย่างไร?

หนึ่งในแนวคิดที่บทความต้นฉบับของคุณแตะไว้ดีมากคือ Visual Debug Info เพราะปัญหาของการใช้ AI เขียนโค้ดไม่ใช่แค่ได้โค้ดผิด แต่คือไม่เห็นว่า logic มันไหลอย่างไรระหว่างรันงานจริง

Visual Debug Info คือการทำให้สิ่งที่เคยมองไม่เห็น เช่น state, event, props, request payload หรือ config ถูกมองเห็นได้ชัดขึ้นผ่าน overlay, panel หรือ structured logger สิ่งนี้มีประโยชน์มากกับ Vibe Coding เพราะช่วยให้คุณ review behavior ของระบบ ไม่ใช่ดูแค่ syntax

ตัวอย่างที่ใช้ได้จริงมีหลายแบบ

• overlay เล็ก ๆ บนหน้าเว็บไว้ดู Redux state หรือ form state
• logger แบบ structured ใน backend เพื่อ trace request และ response
• watch expressions และ conditional breakpoints ใน VS Code
• React Developer Tools หรือ browser devtools สำหรับดู props, hooks และ re-render

เมื่อคุณเห็นข้อมูลไหลจริง การ refactor และจับบั๊กจะเร็วขึ้นอย่างชัดเจน

Best Practices ของ Vibe Coding ที่ควรยึดมีอะไรบ้าง?

สิ่งที่ควรทำสม่ำเสมอคือ

• ตั้งชื่อให้สื่อความหมาย อย่าให้ AI สร้างชื่อ generic เต็มโปรเจกต์
• แยก UI, business logic และ data layer ออกจากกันให้เร็วที่สุด
• สั่งให้ AI สร้าง test skeleton หรืออย่างน้อยบอกรายการ test cases มาด้วย
• ใช้ config และ environment variables แยกจากโค้ด
• review ทุกส่วนที่เกี่ยวกับ auth, payment, file upload และ database write
• refactor หลังจาก prototype เริ่มตอบโจทย์แล้ว อย่าปล่อยให้เดโมกลายเป็นฐานของ production โดยไม่ขัดเกลา

ข้อที่คนมักพลาดคือปล่อยให้ component หนึ่งไฟล์รับทุกบทบาท ทั้งดึงข้อมูล ประมวลผล แสดงผล และผูก event ทั้งหมด ซึ่งทำให้โค้ดโตเร็วและแก้ยากมาก

ควรใช้ AI ช่วยตรงไหน และควรหยุดตรงไหน?

AI เหมาะมากกับการ

• ร่าง boilerplate
• สร้าง component และ form เบื้องต้น
• แปลง requirement เป็น file structure
• เขียน utility function ที่มี pattern ชัด
• สรุป edge case และช่วยเขียน test case list

แต่ควรหยุดและ review อย่างจริงจังเมื่อเจอ

• business logic ที่มีผลต่อเงินหรือสิทธิ์การเข้าถึง
• schema migration และการเปลี่ยนข้อมูลถาวร
• security, secret handling และ external API integration
• performance bottleneck หรือ query ที่อาจ scale ไม่ไหว

Vibe Coding ที่ดีไม่ใช่การใช้ AI ทุกที่ แต่คือการใช้มันตรงที่เพิ่ม leverage สูงสุด

สรุปของตอนที่ 2

Vibe Coding แบบมือโปรเริ่มจากการจัดระบบให้ AI ทำงานในกรอบที่ควบคุมได้ ไม่ใช่ปล่อยให้เดาสุ่มไปเรื่อย ๆ การระบุ stack, data flow, file structure และ test expectation ตั้งแต่ต้น จะทำให้คุณได้โค้ดที่ดูแลง่ายขึ้น ขณะที่ Visual Debug Info และ structured review จะช่วยให้คุณเห็นพฤติกรรมของระบบจริง ไม่ต้องเดาจากหน้าตาเพียงอย่างเดียว

ตอนต่อไปเราจะไปดูด้านมืดของ Vibe Coding ว่าความล้มเหลวแบบไหนเกิดขึ้นบ่อยที่สุด เมื่อคนพึ่ง AI มากเกินไป ผสม hard code แบบไม่ระวัง และละเลยกระบวนการตรวจคุณภาพ

ถ้าคุณอยากเรียนการใช้ AI ใน VS Code แบบเป็น workflow จริง ดูแพ็กเกจ Vibe Code Builder และ Vibe Code Full Path ได้ที่ Boo AI BootCamp