บทถัดไป · /05
→ บทที่ 04 · Landing page
ทำหน้าเว็บขายของ — มีฟอร์มรับ email + ปุ่มสั่งซื้อ
คอร์ส · บทที่ 03 · โปรเจกต์แรก
ทำเกมงู
พิมพ์ prompt เดียว — ได้เกมงูที่เล่นได้บนมือถือ พร้อม deploy เป็น URL เปิดใน browser ได้เลย
คำสั่งสั้น → ผลลัพธ์เยอะ
/01⌨ คำสั่ง
ทำเกมส์งู แบบโปราณแบบมือถือเมื่อก่อน แต่ภาพทันสมัย และ deploy เป็น Url พร้อมเล่น
ข้อความเดียว จบ
📦 ผลลัพธ์ · AI ทำให้ทั้งหมดนี้
- เกมงู · เดินบนกริด กินแอปเปิ้ล ชนขอบแพ้
- ภาพสวย · neon gradient + glassmorphism
- รองรับมือถือ · ปุ่ม 4 ทิศ + คีย์บอร์ด
- โค้ดเดียวจบ · single-file HTML ไม่ต้อง build
- Deploy เป็น URL · เปิดเล่นได้ทันที
ภาพการทำงานจริง
/02
8 Phases Journey · จาก prompt เดียวสู่เกมสมบูรณ์
/03ตัวอย่างข้างล่างคือ journey จริง — สั่ง AI ทีละ phase ต่อจากของเดิม รวมเวลา ~2 ชม. 30 นาที
⏱ รวม ~2 ชม. 30 นาที · ทีละ 8 phase
PHASE01
MVP · งูเดินได้
15 นาที"ทำเกมงู HTML+JS ล้วน ๆ — งูเดินเอง กินแอปเปิ้ลแล้วยาวขึ้น ชนขอบ game over"
ผลลัพธ์: เกมเล่นได้ งูเป็นจุดสี่เหลี่ยม แอปเปิ้ลเป็นจุดแดง — ไม่สวย แต่เล่นได้จริง
PHASE02
ใส่สีสัน + Neon
15 นาที"เปลี่ยนพื้นหลังเป็น gradient ม่วง-ดำ งูเรืองแสง หัวงูสีอ่อนกว่าลำตัว เพิ่ม shadow blur ให้แสงฟุ้ง"
ผลลัพธ์: โทนมืด neon — ดูเป็นเกมสมัยใหม่ทันที
PHASE03
UI · Score + Game Over
15 นาที"เพิ่ม scoreboard มุมบนซ้าย glassmorphism สกอร์ปัจจุบัน + เมื่อ game over โชว์ป้ายรวมกลางจอ"
ผลลัพธ์: คะแนน + Game Over panel — ผู้เล่นเห็นความก้าวหน้าทันที
PHASE04
Effects · Glow + Particle
20 นาที"ตอนกินแอปเปิ้ล ให้มี particle effect กระจาย 10-15 จุด แล้วค่อย ๆ จางหายไป"
ผลลัพธ์: เกมรู้สึกตอบสนอง ทุกครั้งที่กินได้จะมี effect เด้งกลับมา
PHASE05
Controls · ปุ่มมือถือ
15 นาที"เพิ่มปุ่ม 4 ทิศใต้กระดาน กดได้จริง รองรับทั้งคีย์บอร์ดและมือถือ"
ผลลัพธ์: D-pad มือถือ — เล่นบน iPhone ได้ลื่น
PHASE06
Debug · ป้องกันบั๊ก
15 นาที"ตอนทะลุจอให้วนไปอีกฝั่งแทน game over, ห้ามเดินย้อนกลับทันที (กดลงตอนกำลังขึ้น = หัวทับหาง)"
ผลลัพธ์: เล่นไม่มีทางบั๊ก — UX ดีขึ้นเยอะ
PHASE07
Persistence · คะแนนสูงสุด
15 นาที"เก็บ high score ลง localStorage โชว์ใน scoreboard 'สูงสุด 42' คงอยู่แม้ปิดเบราว์เซอร์"
ผลลัพธ์: คะแนนสูงสุดไม่หาย — เพิ่ม engagement
PHASE08
Deploy · ขึ้น URL จริง
20 นาที"deploy เป็น URL สาธารณะ ตั้งชื่อ vibecode-snake.vercel.app ให้แชร์ในกลุ่มเพื่อนได้"
ผลลัพธ์: เกมออนไลน์ — คลิกลิงก์เล่นได้ทุกที่
ทำไมสั่งน้อยแต่ได้เยอะ
/04
— 01
AI เข้าใจเจตนา
บอกแค่ "อยากได้อะไร" AI จะแตกเอง — โครงสร้าง ฟีเจอร์ ดีพลอย
— 02
Single-file HTML
ไม่ต้องติดตั้ง ไม่ต้อง build ไม่ต้อง framework — ก๊อปโค้ดก็เล่นได้
— 03
Agent mode ทำเองจบ
ผู้ใช้ตอบ "Enable Now" → AI ทำเองจน deploy เสร็จ ไม่ต้องนั่งจับมือ
cheat sheet · 5 คำสั่งใช้บ่อย
/04