Vibe Coding 101 — จากไอเดียเป็นเว็บแอปที่ใช้ได้จริง

Vibe coding คืออะไร

เมื่อก่อนถ้าอยากได้แอปสักตัว มีอยู่สองทาง — ใช้เวลาเป็นปีเรียนเขียนโค้ด หรือจ้างคนที่เขียนเป็น

Vibe coding คือทางที่สาม คุณเล่าให้ AI ฟังว่าอยากได้อะไร AI เขียนโค้ดให้ คุณลองกดใช้ ตรงไหนไม่ใช่ก็บอกให้แก้ วนแบบนี้จนได้ของที่ต้องการ — โดยไม่ต้องอ่านโค้ดสักบรรทัด

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

คำนี้ Andrej Karpathy นักวิจัย AI ใช้เรียกวิธีทำงานแบบ “ปล่อยให้ AI เขียน แล้วตัดสินจากผลที่ได้” เมื่อต้นปี 2025

เหมาะกับอะไร และยังไม่ควรใช้กับอะไร

เว็บนิ่ง กับ เว็บแอป ต่างกันยังไง

ก่อนสั่ง AI ต้องรู้ก่อนว่าจะสร้างแบบไหน เพราะความยากต่างกันมาก — และถ้าไม่บอก AI จะเดาเอง

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

ถามตัวเองสองข้อ

บันไดสามขั้นของแอปจดสิ่งที่ต้องทำ

เริ่มที่ขั้นที่ทำจบได้ — ขั้นที่ 2 ได้ของใช้จริงทุกวัน โดยยังไม่ต้องยุ่งกับระบบล็อกอิน ซึ่งเป็นจุดที่มือใหม่ติดบ่อยที่สุด

คุยกับ AI คู่คิดก่อน แล้วค่อยให้ AI ช่างสร้าง

งานนี้ใช้ AI สองตัว สองหน้าที่ — แยกให้ออกแล้วจะประหยัดทั้งเวลาและเครดิต

ยังไม่เคยใช้ AI แบบแชท? เริ่มที่ เริ่มใช้ AI chatbot ก่อน แล้วค่อยกลับมาที่นี่

ขั้น 1 · เล่าไอเดียแบบคนธรรมดา

ไม่ต้องใช้ศัพท์เทคนิค เล่าเหมือนเล่าให้เพื่อนฟัง — ใครใช้ ใช้ตอนไหน อยากให้มันช่วยอะไร และบอกด้วยว่าคุณเขียนโค้ดไม่เป็น AI จะได้ไม่ตอบกลับมาเป็นโค้ด

ขั้น 2 · ให้ AI ถามกลับก่อน

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

คำถามที่ AI มักถามกับไอเดียนี้ และคำตอบที่คู่มือนี้เลือก — ของคุณอาจถามไม่ตรงนี้เป๊ะ เป็นเรื่องปกติ ตารางนี้มีไว้ให้เห็นว่าคำถามที่ดีหน้าตาเป็นยังไง

ขั้น 3 · ให้ AI สรุปความเข้าใจ

ตรวจแบบก่อนสร้าง — ถ้า AI เข้าใจผิดตรงนี้ แก้ด้วยการพิมพ์บรรทัดเดียว แต่ถ้าไปรู้ตอนสร้างเสร็จแล้ว ต้องเสียเครดิตแก้

อ่านทีละข้อ ตรงไหนไม่ใช่ บอกแก้เฉพาะข้อนั้น แล้วให้สรุปใหม่จนตรงทุกข้อ

ขั้น 4 · ตัดให้เหลือเวอร์ชันแรก

AI ชอบเสนอเพิ่ม — แจ้งเตือน หมวดหมู่ แชร์กับเพื่อน ทุกอย่างดีหมด แต่ใส่พร้อมกันแล้วมักสร้างไม่เสร็จ หรือเสร็จแต่พังหลายจุดจนไล่แก้ไม่ไหว

ในคู่มือนี้ เวอร์ชันแรกมีแค่สามอย่าง: ดูรายการตามเดือน · เพิ่มรายการ · ติ๊กเสร็จ ส่วนการลบและแก้รายการ เก็บไว้ทำรอบหน้า

ขั้น 5 · ให้ AI เขียนคำสั่งสร้าง

ผลลัพธ์ของการคุยทั้งหมดคือข้อความก้อนเดียวที่คัดลอกไปวางใน Lovable ได้เลย

ตรวจคำสั่งที่ได้ — คำสั่งที่ดีมีสี่ส่วน

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

เทียบให้เห็นภาพ

Lovable ทำงานยังไง

คุณพิมพ์บอกว่าอยากได้แอปอะไร มันสร้างหน้าเว็บและปุ่มต่างๆ ให้ครบ แล้วเปิดดูผลได้ทันที ไม่พอใจตรงไหนก็พิมพ์บอกให้แก้ต่อได้เรื่อยๆ

สิ่งที่ได้ ไม่ใช่ภาพตัวอย่าง แต่เป็นเว็บจริงที่กดใช้งานได้ และแชร์ลิงก์ให้คนอื่นเปิดได้

แพ็กฟรีให้อะไรบ้าง

ตัวเลขต่อไปนี้เป็นของ Lovable ที่ใช้ในคู่มือนี้ — เจ้าอื่นให้มาคนละแบบแต่หลักคิดเดียวกัน

มีอะไรให้เลือกบ้าง

สี่ตัวแรกใช้ผ่านเบราว์เซอร์ พิมพ์บอกแล้วได้งานเลย ส่วน Cursor ต้องลงโปรแกรมและอ่านโค้ดเป็น เก็บไว้ทีหลัง

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

เริ่มต้นใช้งาน

เรื่องข้อมูล ต้องรู้ก่อน

เครื่องมือพวกนี้เป็นบริการภายนอก สิ่งที่คุณพิมพ์สั่งจะออกไปอยู่บนเซิร์ฟเวอร์ของผู้ให้บริการ

• อย่าใส่ข้อมูลส่วนตัวจริงลงในคำสั่ง — เลขบัตรประชาชน รหัสผ่าน ข้อมูลของลูกค้าหรือเพื่อนร่วมงาน
• ตอนฝึก ใช้ข้อมูลสมมติที่หน้าตาเหมือนของจริงก็พอ
• ถ้าจะเอาไปใช้กับงานที่ทำงาน ให้ถามฝ่ายที่ดูแลเรื่องเครื่องมือหรือข้อมูลขององค์กรก่อน

สมัครใช้งาน

• เปิด lovable.dev กด Create free account — สมัครด้วย Google, GitHub, Apple หรืออีเมล ไม่ต้องใส่บัตรเครดิต
• ถ้าเลือกสามทางแรก เข้าใช้ได้ทันที ไม่มีเมลยืนยัน
• เข้ามาครั้งแรกจะเจอช่องพิมพ์คำสั่งอยู่กลางจอ เครดิตเข้าอัตโนมัติทุกวัน ไม่สะสมข้ามวัน

สร้างแอปใน Lovable

สร้างหนึ่งครั้ง แก้ไม่เกินสองครั้ง — ตั้งใจให้จบในเครดิตฟรีของวันเดียว และยังเหลือเผื่อพลาด

1 · วางคำสั่งสร้าง

วางคำสั่งที่ได้จากขั้นที่ 5 · ถ้ายังไม่ได้คุยกับ AI คู่คิด หรืออยากเทียบว่าของคุณครบไหม ใช้คำสั่งนี้ได้เลย

2 · ทดสอบก่อนแก้

อย่าเพิ่งสั่งแก้ทันทีที่เห็นแอป — ลองกดให้ครบก่อน แล้วค่อยรวมสิ่งที่ผิดไปสั่งแก้ทีเดียว

• เพิ่มรายการได้ และขึ้นในเดือนที่กำลังดูอยู่
• ไม่ใส่รายละเอียดก็บันทึกได้ · ไม่ใส่ชื่อรายการ บันทึกไม่ได้
• ติ๊กแล้วเป็นสีเทา อยู่ที่เดิม · ติ๊กอีกทีกลับเป็นปกติ
• เปลี่ยนเดือนแล้ว รายการของเดือนอื่นไม่ปนเข้ามา
• รีเฟรชหน้าแล้ว รายการยังอยู่ครบ
• เปิดบนมือถือ ปุ่ม + ไม่บังรายการสุดท้าย

3 · แก้เฉพาะจุดที่ผิด

บอกสองอย่างเสมอ: ตอนนี้เป็นยังไง กับ ที่ต้องการคือยังไง — AI แก้ได้ตรงกว่าคำว่า “มันไม่ทำงาน” มาก

เปลี่ยนคำที่เน้นสีเป็นสิ่งที่คุณเจอจริง · ถ้าผ่านเช็กลิสต์ครบตั้งแต่แรก ข้ามขั้นนี้ได้เลย

คำที่ใช้ได้ผลเวลาสั่งแก้

กฎที่ช่วยประหยัดเครดิต

• รวมสิ่งที่ผิดในเรื่องเดียวกันไว้คำสั่งเดียว — แก้ทีละอย่างกินเครดิตทุกครั้ง
• แก้ให้เจาะจง — บอกว่า “เปลี่ยนปุ่ม + เป็นสีน้ำเงิน” ไม่ใช่ “ทำให้สวยขึ้น”
• อย่ารวมเรื่องที่ไม่เกี่ยวกัน — แก้หลายจุดในเรื่องเดียวกันสั่งรวดเดียวได้ แต่ถ้าเอาคนละเรื่องมารวม มักได้ผลไม่ครบ
• ผลไม่ตรงใจ อย่าเพิ่งสั่งสร้างใหม่ทั้งหมด — บอกเฉพาะจุดที่ผิด ได้ผลตรงกว่า และไม่ต้องไล่ตรวจซ้ำทั้งแอป

4 · ปรับหน้าตาให้เป็นของคุณ

5 · แชร์ และใช้บนมือถือ

• กด Publish มุมขวาบน จะได้ลิงก์ของแอป
• เปิดลิงก์บนมือถือ แล้วเพิ่มลงหน้าจอหลัก จะเปิดได้เหมือนแอปทั่วไป — iPhone: Safari → ปุ่มแชร์ → เพิ่มไปยังหน้าจอโฮม · Android: Chrome → เมนู ⋮ → เพิ่มลงในหน้าจอหลัก

ทำอะไรต่อได้อีก

• เพิ่มปุ่มลบและแก้รายการ — ของที่ตัดไว้ในขั้นที่ 4 ใช้คำสั่งแบบ “เพิ่มของ” ในตารางข้างบน
• ใช้ได้หลายเครื่อง — คือบันไดขั้นที่ 3 ต้องมีระบบล็อกอินและฐานข้อมูล เป็นงานที่ใหญ่ขึ้นมาก ให้เริ่มคุยกับ AI คู่คิดตั้งแต่ขั้นที่ 1 ใหม่
• เอาวิธีคิด 5 ขั้นไปใช้กับไอเดียของคุณเอง — เปลี่ยนแค่ขั้นที่ 1 ขั้นที่เหลือใช้คำสั่งเดิมได้เลย
• เครดิตหมดวัน — ใช้เวลาที่เหลือคุยกับ AI คู่คิด เตรียมคำสั่งของพรุ่งนี้ให้พร้อม