Lovable เป็นเครื่องมือ AI ที่สร้างเว็บไซต์และเว็บแอปจากคำอธิบายที่คุณเขียนด้วยภาษาทั่วไป คุณบอกว่าต้องการอะไร เครื่องมือจะสร้างโค้ดและเวอร์ชันตัวอย่างให้ดู จากนั้นขอแก้ไขต่อในบทสนทนาเดิมได้ คุณจึงเริ่มได้โดยไม่ต้องเขียนโค้ดเอง หน้าแนะนำผลิตภัณฑ์ของ Lovable อธิบายวิธีนี้ว่าเป็นการสร้างแอปที่ใช้งานได้ผ่านการสนทนา
สำหรับครั้งแรก ลองสร้างสิ่งที่ตรวจดูได้ง่าย เช่น เว็บไซต์หน้าเดียวที่มีบริการไม่กี่รายการ เวลาเปิดทำการ และลิงก์ติดต่อ คู่มือนี้มี prompt ที่เขียนขึ้นสำหรับฝึก พร้อมคำขอแก้ไขหนึ่งจุดและรายการตรวจสอบสั้น ๆ ก่อนเผยแพร่ คุณยังต้องอ่านผลลัพธ์ ลองใช้งานปุ่มหรือลิงก์ และแก้สิ่งที่ AI เข้าใจผิด
Lovable ใช้สร้างอะไรได้บ้าง?
โปรเจกต์ที่เหมาะสำหรับเริ่มต้น เช่น เว็บไซต์ธุรกิจบริการ หน้าแนะนำไอเดีย หรือเครื่องมือเล็ก ๆ สำหรับจัดระเบียบข้อมูล แอปที่ซับซ้อนขึ้นอาจมีการบันทึกข้อมูล บัญชีผู้ใช้ และการเชื่อมต่อบริการอื่น แต่ทุกสิ่งที่เพิ่มเข้ามาก็มีการทำงานให้ตรวจสอบเพิ่มด้วย
เลือกสร้างเว็บไซต์หน้าเดียวสำหรับแบบฝึกนี้ ผู้เข้าชมควรตอบคำถามได้สามข้อว่า ธุรกิจนี้ทำอะไร เปิดเมื่อไร และติดต่อได้อย่างไร
หากยังเลือกเครื่องมืออยู่ ลองอ่านบทเปรียบเทียบ Lovable, Replit และ Bolt แต่ถ้าตั้งใจจะลอง Lovable แล้ว ให้เริ่มจากโปรเจกต์เล็ก ๆ ด้านล่าง
สิ่งที่ต้องเตรียมก่อนเริ่ม
- บัญชี Lovable และโควตาที่ใช้สร้างหรือแก้ไขโปรเจกต์ได้ เริ่มด้วยแพ็กเกจฟรีได้ แต่ปริมาณการใช้งานมีจำกัด และไม่รับประกันว่าจะทำแบบฝึกจนจบได้ภายในโควตาจำนวนหนึ่ง หากใช้งานจนถึงขีดจำกัด ให้ดูแพ็กเกจและโควตาปัจจุบัน อ่านคู่มือราคาและเครดิต Lovableเพื่อทำความเข้าใจยอดเครดิต การเริ่มรอบใหม่ และทางเลือกในการอัปเกรด
- ธุรกิจหรือไอเดียสำหรับฝึกที่คุณเข้าใจ ในที่นี้เราจะใช้ Mend Studio ซึ่งเป็นธุรกิจซ่อมอุปกรณ์สมมติ
- ที่อยู่อีเมลที่คุณใช้งานและจัดการเองสำหรับทดสอบลิงก์ติดต่อ หากเผยแพร่หน้าที่มีที่อยู่อีเมลนี้ ผู้เข้าชมจะมองเห็นได้
แบบฝึกนี้ยังไม่ต้องมีโดเมนส่วนตัว บัญชีรับชำระเงิน หรือฐานข้อมูล ให้ใช้รายละเอียดตัวอย่างที่เตรียมไว้ก่อน หากนำไปปรับใช้กับธุรกิจจริง ให้เปลี่ยนเป็นบริการและเวลาเปิดทำการจริงของธุรกิจนั้น
1. อธิบายเว็บไซต์แรกที่ต้องการ
เปิด Lovable เข้าสู่ระบบ แล้วหาช่องหลักสำหรับพิมพ์คำขอ คู่มือเริ่มต้นอย่างเป็นทางการเรียกช่องนี้ว่า Ask Lovable to create… พิมพ์คำขอในช่องนั้นเพื่อเริ่มโปรเจกต์
prompt คือคำสั่งที่คุณส่งให้ AI โดย prompt แรกที่ชัดเจนควรระบุว่าใครจะเข้าชม หน้าเว็บต้องมีเนื้อหาอะไร และอยากให้ผู้เข้าชมทำอะไรต่อ คำขอว่า “สร้างเว็บไซต์สวย ๆ” ปล่อยให้ AI ตัดสินใจทั้งสามเรื่องเอง
ก่อนส่ง prompt ด้านล่าง ให้แทนที่ YOUR_EMAIL_ADDRESS ทั้งสองจุดด้วยอีเมลทดสอบของคุณ prompt นี้ขอทั้งหน้าเว็บและคำตอบเป็นภาษาไทย เพื่อให้คุณอ่านผลลัพธ์ เทียบกับรายการตรวจสอบ และขอแก้ไขต่อได้
สร้างเว็บไซต์ภาษาไทยหน้าเดียวสำหรับ Mend Studio ซึ่งเป็นธุรกิจซ่อมอุปกรณ์สมมติที่ใช้สำหรับฝึก ขอให้ตอบกลับเป็นภาษาไทยตลอดการสนทนานี้
ผู้เข้าชมต้องการดูบริการและเวลาเปิดทำการ แล้วติดต่อเราทางอีเมล
เนื้อหาที่ต้องมี:
- หัวเรื่องที่ชัดเจน: "ดูแลอุปกรณ์ให้เป็นเรื่องง่าย"
- บริการสามอย่าง: ตั้งค่าแล็ปท็อป เปลี่ยนหน้าจอ และทำความสะอาดอุปกรณ์
- เวลาเปิดทำการ: วันจันทร์ถึงศุกร์ 09:00-18:00; วันเสาร์ 09:00-13:00; วันอาทิตย์ปิด
- ลิงก์หลักเพียงลิงก์เดียวชื่อ "ส่งอีเมลถึงเรา" ที่เปิด mailto:YOUR_EMAIL_ADDRESS
- แสดงอีเมล YOUR_EMAIL_ADDRESS ไว้ใกล้ลิงก์นั้น
- ข้อความสั้น ๆ: "เว็บไซต์สำหรับฝึก โดยใช้ธุรกิจสมมติ"
ออกแบบให้ดูสบายตาและอ่านง่าย โดยใช้พื้นหลังสีอ่อน ตัวอักษรสีเข้ม และสีเน้นหนึ่งสี ให้หน้าเว็บใช้งานได้ทั้งบนมือถือและคอมพิวเตอร์
ห้ามแต่งข้อมูลราคา ที่อยู่ เบอร์โทรศัพท์ รีวิว หรือการรับรองขึ้นเอง ห้ามเพิ่มแบบฟอร์มจอง บัญชีผู้ใช้ ระบบชำระเงิน หรือฐานข้อมูลคำอธิบาย: prompt นี้ขอเว็บไซต์ภาษาไทยหน้าเดียวสำหรับธุรกิจสมมติ และให้ AI ตอบเป็นภาษาไทยด้วย โดยระบุบริการ เวลาเปิดทำการ และลิงก์อีเมลให้ตรวจได้ชัดเจน พร้อมจำกัดขอบเขตเพื่อไม่ให้ AI แต่งข้อมูลธุรกิจหรือเพิ่มสิ่งที่ไม่ได้ขอ
รอให้เวอร์ชันแรกสร้างเสร็จ หน้าตาอาจต่างจากที่คุณนึกไว้ ด้วยเหตุนี้ prompt จึงระบุทั้งเนื้อหาและการทำงานที่ตรวจสอบได้ รวมถึงแนวทางการออกแบบเว็บไซต์
2. ตรวจดูเวอร์ชันแรก
หน้าจอแก้ไขของ Lovable วางบทสนทนาไว้ข้างเวอร์ชันตัวอย่างของโปรเจกต์ อ่านหน้าเว็บที่สร้างขึ้นก่อนขอฟีเจอร์เพิ่ม ใช้ข้อกำหนดต่อไปนี้ดูว่าเวอร์ชันแรกตรงกับคำขอหรือไม่
| สิ่งที่ตรวจ | สิ่งที่ควรพบ |
|---|---|
| จุดประสงค์ | หน้าเว็บอธิบายบริการซ่อมอุปกรณ์อย่างชัดเจน |
| บริการ | ตั้งค่าแล็ปท็อป เปลี่ยนหน้าจอ และทำความสะอาดอุปกรณ์ |
| เวลาเปิดทำการ | วันจันทร์ถึงศุกร์ 09:00-18:00; วันเสาร์ 09:00-13:00; วันอาทิตย์ปิด |
| การติดต่อ | ลิงก์ "ส่งอีเมลถึงเรา" และอีเมลที่คุณระบุ |
| ขอบเขต | มีข้อความ "เว็บไซต์สำหรับฝึก โดยใช้ธุรกิจสมมติ" ไม่มีคำกล่าวอ้างที่แต่งขึ้นหรือแบบฟอร์มเพิ่มเติม |
หากมีอะไรขาดไป ให้ขอแก้จุดนั้นก่อนเพิ่มสิ่งอื่น เช่น “เพิ่มข้อความว่าปิดวันอาทิตย์ในส่วนเวลาเปิดทำการ คงเวลาเปิดทำการวันอื่นและบริการเดิมไว้”
เวอร์ชันตัวอย่างช่วยให้ตรวจหน้าเว็บได้ แต่การเห็นปุ่มไม่ได้ยืนยันว่าปุ่มจะเปิดปลายทางที่ถูกต้อง คุณจะทดสอบเรื่องนี้แยกอีกครั้ง
3. ขอแก้ไขให้ชัดเจนทีละจุด
คราวนี้ให้เปลี่ยนเวลาเปิดทำการวันเสาร์ นี่เป็นแบบฝึกเล็ก ๆ ในการสั่งงาน AI โดยระบุให้ชัดว่าอะไรต้องเปลี่ยนและอะไรต้องคงเดิม
เปลี่ยนเวลาเปิดทำการวันเสาร์จาก 09:00-13:00 เป็น 10:00-14:00 ทุกจุดที่แสดงบนหน้าเว็บ
คงเวลาเปิดทำการวันจันทร์ถึงศุกร์ ข้อความว่าปิดทำการวันอาทิตย์ บริการ อีเมล ลิงก์ติดต่อ และหน้าตาเว็บไซต์ไว้เหมือนเดิม ห้ามเพิ่มฟีเจอร์ใหม่คำอธิบาย: prompt นี้เปลี่ยนเฉพาะเวลาวันเสาร์ทุกจุดที่แสดงบนหน้า พร้อมกำหนดสิ่งที่ต้องคงเดิม การระบุขอบเขตเช่นนี้ช่วยให้ตรวจได้ว่ามีส่วนอื่นเปลี่ยนไปโดยไม่ตั้งใจหรือไม่
เมื่อ Lovable ทำเสร็จ ให้อ่านหน้าเว็บอีกครั้ง วันเสาร์ควรแสดง 10:00-14:00 ส่วนวันจันทร์ถึงศุกร์ยังเป็น 09:00-18:00 และวันอาทิตย์ยังปิด ตรวจชื่อบริการและอีเมลติดต่ออีกครั้งด้วย
หาก Lovable เปลี่ยนสิ่งที่คุณต้องการเก็บไว้ด้วย ให้ระบุจุดนั้นในข้อความถัดไป คำขอแก้ไขที่ชัดเจนจะบอกปัญหาที่มองเห็น เช่น “บริการเปลี่ยนหน้าจอหายไป ให้เพิ่มกลับมาโดยไม่เปลี่ยนเวลาวันเสาร์ที่แก้แล้ว”
4. ทดสอบลิงก์ติดต่อและหน้าจอมือถือ
ลองกดลิงก์ ส่งอีเมลถึงเรา ลิงก์ควรเปิดแอปหรือบริการอีเมลที่ตั้งค่าไว้ในอุปกรณ์ พร้อมผู้รับที่ถูกต้อง การเปิดร่างอีเมลยังไม่ได้ส่งข้อความ หากเลือกส่งอีเมลทดสอบ ให้ตรวจผู้รับก่อนส่ง
หากไม่มีอะไรเปิดขึ้น อุปกรณ์อาจยังไม่ได้ตั้งค่าแอปหรือบริการสำหรับเปิดลิงก์อีเมล ตรวจทั้งปลายทางลิงก์และอีเมลที่แสดง เพราะข้อความอาจถูกต้องแต่ลิงก์ชี้ไปที่อื่น ทดสอบอีกครั้งบนหน้าที่เผยแพร่แล้ว โดยใช้อุปกรณ์ที่ตั้งค่าอีเมลไว้
ใช้ตัวเลือกขนาดอุปกรณ์เหนือเวอร์ชันตัวอย่างของ Lovable เพื่อตรวจหน้าจอแคบ แล้วดูว่า
- หัวเรื่องและชื่อบริการแสดงครบโดยไม่ถูกตัด
- เวลาเปิดทำการทุกวันอ่านได้ชัดเจน
- ลิงก์ติดต่อกดได้สะดวก
- หน้าเว็บไม่ล้นจนต้องเลื่อนซ้ายขวา
- ยังมองเห็นข้อความแจ้งว่าเป็นเว็บไซต์สำหรับฝึก
หากมีส่วนที่ผิดปกติ ให้บอกตำแหน่งและสิ่งที่เห็น เช่น “ในหน้าจอมือถือ การ์ดบริการล้นขอบขวา” บอกปัญหาให้เครื่องมือเข้าใจได้ชัดกว่าคำว่า “แก้หน้าจอมือถือ”
5. เผยแพร่แล้วเปิดเวอร์ชันที่ผู้เข้าชมจะเห็น
เมื่อตรวจเนื้อหาและการทำงานเรียบร้อยแล้ว ให้ใช้ขั้นตอนเผยแพร่ของ Lovable
- เลือก Publish ที่มุมขวาบนของหน้าจอแก้ไข
- ตรวจที่อยู่
lovable.appที่ระบบแนะนำ แล้วเลือก Publish ในหน้าต่างที่เปิดขึ้น - รอข้อความ Your website is live แล้วเปิดลิงก์ที่ได้
- เปิดลิงก์นั้นบนมือถือและในหน้าต่างเบราว์เซอร์ที่ไม่ได้เข้าสู่ระบบ Lovable ตรวจเวลาเปิดทำการ ลิงก์ติดต่อ และหน้าตาของเว็บซ้ำอีกครั้ง
สำหรับแบบฝึกนี้ ที่อยู่ที่ระบบให้มาก็เพียงพอแล้ว คุณค่อยตัดสินใจเรื่องเชื่อมต่อโดเมนส่วนตัวภายหลังได้ เว็บไซต์ที่เผยแพร่ด้วยแพ็กเกจ Free เปิดให้ทุกคนที่มีลิงก์เข้าถึงได้ จึงควรเก็บข้อความว่าเป็นธุรกิจสมมติไว้ และเผยแพร่เฉพาะอีเมลที่คุณยินดีให้เป็นสาธารณะ
เวอร์ชันตัวอย่างในหน้าจอแก้ไขและเว็บไซต์ที่เผยแพร่เป็นคนละเวอร์ชัน หลังแก้ไขครั้งต่อไป ให้เลือก Publish → Publish changes เพื่ออัปเดตเว็บไซต์จริง แล้วตรวจลิงก์สาธารณะอีกครั้ง การเผยแพร่เพียงอย่างเดียวไม่ได้รับประกันว่าเครื่องมือค้นหาจะนำหน้าเว็บเข้าดัชนีหรือส่งผู้เข้าชมมาให้
ข้อผิดพลาดที่พบบ่อยในโปรเจกต์แรก
| ข้อผิดพลาด | สิ่งที่ควรทำต่อ |
|---|---|
| ขอเว็บไซต์ ระบบจอง ร้านค้า และแผงควบคุมพร้อมกัน | ทำเส้นทางเดียวของผู้เข้าชมให้เสร็จก่อน: ดูบริการ → ดูเวลาเปิดทำการ → ติดต่อ |
| คิดว่าข้อความที่ดูดีมีข้อมูลถูกต้องเสมอ | เทียบหน้าเว็บกับรายละเอียดที่คุณระบุ |
| ขอแก้หลายเรื่องที่ไม่เกี่ยวกันในข้อความเดียว | แก้หนึ่งจุด แล้วตรวจผลที่เกิดขึ้น |
| มองว่าลิงก์อีเมลเท่ากับการจองหรือการบันทึกคำถาม | อธิบายให้ตรงกับการทำงาน: ลิงก์เปิดข้อความในแอปอีเมลของผู้เข้าชม |
| แก้เวอร์ชันตัวอย่างแล้วคิดว่าผู้เข้าชมเห็นการอัปเดตแล้ว | เผยแพร่การเปลี่ยนแปลง แล้วเปิด URL สาธารณะ |
หลังจากเว็บไซต์แรก ควรเรียนรู้อะไรต่อ?
ตอนนี้คุณมีขั้นตอนสำหรับฝึกซ้ำได้แล้ว: อธิบายผลลัพธ์เล็ก ๆ ที่ต้องการ → ตรวจดู → ขอแก้ไขให้ชัดเจน → ทดสอบ → เผยแพร่ การตรวจให้ครบสำคัญกว่าการเขียน prompt แรกให้ดูซับซ้อน
หากไอเดียถัดไปต้องบันทึกข้อมูล มีบัญชีผู้ใช้ หรือมีการทำงานที่ซับซ้อนขึ้น อ่าน Vibe Coding สำหรับมือใหม่เพื่อทำความเข้าใจว่าสิ่งใดเปลี่ยนไปเมื่อต้นแบบกลายเป็นผลิตภัณฑ์สำหรับผู้ใช้จริง ส่วนงบประมาณโดยรวม อ่านค่าใช้จ่ายในการสร้างและดูแลแอปด้วย AI
หากต้องการฝึกอย่างเป็นขั้นตอน คอร์สสร้างโปรดักต์ดิจิทัลชิ้นแรกของคุณด้วย AI ของ RianVibe ใช้แอป Todo เพื่อสอนการสร้าง แก้ไข ตรวจผล และนำวิธีไปต่อยอดกับผลิตภัณฑ์ของคุณเอง บทนำเรียนฟรี ส่วนคอร์สเต็มเป็นแบบชำระเงิน ค่าบริการของผู้ให้บริการต่าง ๆ แยกจากค่าคอร์ส
คำถามที่พบบ่อย
ต้องเขียนโค้ดเป็นก่อนใช้ Lovable หรือไม่?
เริ่มได้ด้วยการอธิบายหน้าเว็บและขอแก้ไขด้วยภาษาทั่วไป แต่คุณยังต้องตัดสินใจว่าหน้าเว็บควรทำอะไรและตรวจการทำงานของมัน โปรเจกต์ที่มีบัญชีผู้ใช้ ข้อมูลอ่อนไหว หรือการเชื่อมต่อที่ซับซ้อน ต้องใช้ความรู้และการทดสอบมากกว่าแบบฝึกหน้าเว็บแรกนี้
ทดลองใช้ Lovable ฟรีได้หรือไม่?
ได้ Lovable มีแพ็กเกจฟรีที่จำกัดปริมาณการใช้งาน จำนวนครั้งที่แก้ไขได้ขึ้นอยู่กับโควตาที่มีและงานที่ขอ ให้ตรวจรายละเอียดแพ็กเกจปัจจุบัน แทนการคิดว่า prompt หนึ่งครั้งหรือเว็บไซต์ที่สร้างเสร็จหนึ่งเว็บจะใช้เครดิตจำนวนตายตัวเสมอ
ใช้ภาษาของตัวเองใน prompt ได้หรือไม่?
คุณพิมพ์คำขอในภาษาที่ถนัดและระบุภาษาที่ต้องการสำหรับหน้าเว็บและคำตอบของ AI ได้ ในแบบฝึกนี้ เราใช้ prompt ภาษาไทยและขอให้ AI สร้างหน้าเว็บและตอบกลับเป็นภาษาไทย เพื่อให้ทำตามและตรวจงานได้สะดวก หากต้องการใช้ภาษาอื่น ให้ระบุภาษานั้นอย่างชัดเจนและตรวจข้อความที่สร้างขึ้น
เว็บไซต์ต้องมีหน้าตาแบบใดแบบหนึ่งหรือไม่?
ไม่ AI อาจสร้างหน้าตาเว็บไซต์แตกต่างกันได้ สำหรับแบบฝึกนี้ ให้ตรวจว่ามีบริการและเวลาเปิดทำการครบตามที่ขอ ลิงก์ติดต่อใช้งานได้ และหน้าเว็บอ่านง่าย
แก้ไขแล้วเว็บไซต์จริงจะเปลี่ยนทันทีหรือไม่?
ไม่ หลังแก้ไขต้องเผยแพร่การเปลี่ยนแปลงผ่านหน้าต่างเผยแพร่ของ Lovable แล้วเปิด URL สาธารณะเพื่อตรวจว่าผู้เข้าชมเห็นอะไรจริง
ตรวจแหล่งอ้างอิงขั้นตอนเมื่อ 7 กันยายน 2026: ข้อมูลแนะนำ Lovable, คู่มือเริ่มต้น, ราคา และการเผยแพร่ คู่มือนี้อิงเอกสารอย่างเป็นทางการและใช้ตัวอย่างที่เขียนขึ้นสำหรับฝึก