คอร์ส · บทที่ 04 · กลาง
⏱ 10 นาที 🛠 โปรเจกต์จริง ได้เว็บขายของ

Landing page — เว็บขายของชิ้นแรก

ทำเว็บที่ "ดูดีพอขายของได้" — แค่พิมพ์ prompt เดียวก็ได้เว็บ responsive มีปุ่มสั่งซื้อ มีฟอร์ม email

🛍
Landing page ที่ดี = ดึงดูด + อธิบาย + กระตุ้นให้สั่งซื้อ

หน้า Landing มี 5 ส่วน

อยากขายอะไรก็ใช้โครงนี้ได้

/01
👋

Hero

หัวข้อใหญ่ + ปุ่ม CTA

✨

Features

จุดเด่น 3 ข้อ

🖼

ตัวอย่าง

รูปหรือโปรโมชั่น

📧

ฟอร์ม

รับ email / สั่งซื้อ

🔗

Footer

ติดต่อ + ลิงก์

Prompt ที่ใช้ได้จริง

ตัวอย่าง: ทำเว็บร้านกาแฟ

/02
คัดลอกได้ → prompt ที่ใช้กับ AI 
you:ทำหน้า Landing page สำหรับร้าน "Sweet Café"

โครงสร้าง:
1. Hero — หัวข้อ "กาแฟหอมกรุ่น เริ่มต้นทุกเช้า"
   ปุ่ม CTA สีชมพู "สั่งเลย" + รูปกาแฟ
2. Features 3 คอลัมน์:
   - เมนูพิเศษ (icon ☕)
   - ราคาเริ่มต้น 65 บาท (icon 💰)
   - เปิดทุกวัน 7:00-19:00 (icon ⏰)
3. เมนูแนะนำ 6 ชิ้น — การ์ดพร้อมรูป + ชื่อ + ราคา
4. ฟอร์ม email signup "รับโปรโมชั่น"
5. Footer — ที่อยู่ + โทร + IG

สไตล์: โทนพาสเทล (ชมพู/ครีม/มินต์)
- responsive มือถือ + desktop
- Tailwind CSS
- smooth hover effects
ผลลัพธ์: เว็บสวย responsive มีทุกส่วนครบ — ใช้เวลา AI ทำ 5–10 นาที · แก้แค่ข้อความ/รูปส่วนตัว

ทำไมต้องมี ฟอร์ม + CTA

เว็บที่ขายของได้ต้องมี 2 อย่างนี้

/03
📧

ฟอร์ม email

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

🛒

ปุ่ม CTA

"สั่งเลย" / "จองคิว" / "รับส่วนลด" — ต้องมีปุ่มเด่น ๆ 1 ปุ่ม ให้คนรู้ว่าจะทำอะไรต่อ

จาก Landing ไป ใช้งานจริง

3 ขั้นต่อจากได้เว็บแล้ว

/04
1

แก้ข้อความ + ใส่รูปของจริง

ใช้ follow-up prompt — "เปลี่ยนข้อความ Hero เป็น [ข้อความจริง] และใส่รูป [path]"

2

ต่อฟอร์มเข้า Backend

ตอนนี้ฟอร์มรับ email แล้วเก็บไว้ใน localStorage — ต่อให้ส่งไปเมลจริงด้วยฟอร์ม service (Mailchimp, Resend)

3

Deploy + แชร์

"Deploy เป็น URL สาธารณะ" → ได้ URL ใน 5 นาที → แชร์ใน IG/Facebook ทันที