Vibe Coding Preview

สรุปสาระสำคัญจากงาน Vibe Coding Preview

Vibe Coding เป็นทักษะที่เปรียบเทียบกับการใช้ Excel ใครก็ทำได้แต่อาจจะเก่งไม่เท่ากัน ขึ้นอยู่กับไอเดียและการสั่งการ

ลดต้นทุน: ผู้บรรยายเน้นย้ำว่าในปัจจุบันธุรกิจสามารถสร้างระบบหลังบ้าน (Back-office), ระบบจัดการสต็อก หรือ CRM เบื้องต้นได้เองโดยไม่ต้องจ้างโปรแกรมเมอร์ในราคาแพง

AI First: สนับสนุนให้ปรับเปลี่ยนการทำงานจากการใช้แรงงานคนหรือซอฟต์แวร์แบบเดิม มาเป็นการใช้ AI ในการวางโครงสร้างและประมวลผลข้อมูล

เครื่องมือที่ใช้ในการสาธิต Vibe Coding

Stitch → ใช้สำหรับออกแบบหน้าตาผู้ใช้งาน (UI/UX) และสร้างภาพจำลองระบบ

AI Studio → เครื่องมือหลักในการรับไฟล์ออกแบบจาก Stitch มาแปลงเป็นโค้ดและปรับแต่งฟังก์ชันการทำงานผ่านคำสั่งภาษาธรรมชาติ

GitHub → ใช้สำหรับเก็บซอร์สโค้ดและควบคุมเวอร์ชัน (Version Control)

Vercel → บริการ Hosting สำหรับติดตั้งโค้ดจาก GitHub ขึ้นสู่โลกออนไลน์ (Deploy) เพื่อให้ได้ URL ที่คนทั่วไปเข้าถึงได้

Cursor → เครื่องมือ IDE ที่ช่วยในการเขียนและแก้ไขโค้ดร่วมกับ AI

ขั้นตอนการทำงาน (Workflow)

การออกแบบ (Design): เริ่มจากการวางแผนความต้องการ และใช้ Stitch ในการออกแบบหน้าจอต่าง ๆ

การสร้างต้นแบบ (Prototyping): นำภาพจาก Stitch เข้าสู่ AI Studio เพื่อให้ AI เขียนโค้ดเริ่มต้นให้ จากนั้นใช้เทคนิค Vibe Coding สั่งแก้สี จัดเลย์เอาต์ หรือเพิ่มปุ่มต่าง ๆ

การแก้ไขและทดสอบ: หากปุ่มหรือฟังก์ชันใดทำงานไม่ได้ (เช่น ปุ่ม Add to Cart) ผู้ใช้จะใช้วิธีส่ง Feedback หรือคำสั่งแก้ไปที่ AI โดยตรง

การนำขึ้นระบบ (Deployment): เมื่อพอใจกับตัวต้นแบบแล้ว จะทำการ Sync โค้ดขึ้นไปที่ GitHub และเชื่อมต่อกับ Vercel เพื่อ Deploy เว็บไซต์จริง