VibeCode Live #01

10/31

📖 เนื้อหาเต็ม คู่มือ Prompt Library

🧠 Concept 2

Prompt 2 ส่วน

ง่ายแค่นี้พอ! · ส่วนที่ 1 = บอก AI ว่า "อยากได้อะไร" · ส่วนที่ 2 = "รายละเอียดที่ต้องมี"

📖 กดที่ภาพเพื่ออ่าน Prompt 2 ส่วนเต็ม ๆ

📖 Cheatsheet →

11/31

📖 เนื้อหาเต็ม Cheatsheet

🧠 Concept 1

3 ลูปหลัก

วนครบ = โปรเจกต์เร็ว ดี ตรงใจ

📖 กดที่ภาพเพื่ออ่าน 3 ลูปเต็ม ๆ

📖 อ่าน 3 ลูปเต็ม ๆ →

12/31

🖼️ ดูรูปเต็ม

3 Product Loops — Framework หลัก + QA Delivery Loop ตัวอย่างการใช้จริง

13/31

🖼️ ดูรูปเต็ม

เทียบการสั่ง AI กับความรัก — 6 ขั้นตอน: วิเคราะห์/Analyze · วางแผน/Plan · ลองรัก/Execute · แก้ปัญหา/Test (UI+API) · เข้าใจและรักกัน/Evaluate · พัฒนาและปรับปรุง/Improve

14/31

📖 ทฤษฎีจิ๊กซอ Workshops

🧠 Concept 3 · หัวใจของคอร์ส

ทฤษฎี "จิ๊กซอ"

แยกงานเป็นชิ้นเล็ก ๆ · แต่ละชิ้นใช้ได้จริง · แล้วค่อยต่อเป็นชิ้นใหญ่

📖 กดที่ภาพเพื่ออ่านทฤษฎีจิ๊กซอเต็ม ๆ

📋 all-versions.html (67 versions จริง) → 📖 ทฤษฎีเต็ม

15/31

🖼️ ดูรูปเต็ม

วิวัฒนาการการพัฒนาโปรแกรม SJ88 Video Editor Pro — 10 ขั้นตอน (ม.ค. - ก.ย. 2024) + Flowchart 7 ขั้นตอนการพัฒนาโปรแกรม

16/31

📋 all-versions.html 📸 Evolution

🎬 Video Editor จริง · 67 versions · 5 วัน

15 Eras — Evolution Timeline

จาก MVP 28 features → 470+ features ใน 5 วัน · 149 commits · 67 deploys

🌱E1GenesisV1-V11 · 7 ver28 → 60 featBase MVP → Multi-track → UI redesign

☁️E2CloudV12-V22 · 3 ver60 → 110 featMulti-user auth → Chroma → AI Magic

🎤E3InputV23-V25 · 3 ver110 → 150 featVoice + Stock Music + Screen Capture

⚡E4Tier 1V26 · 1 ver~150 featTutorial + Export + 20 Color + Shortcuts

🎬E5Tier 2V27.x · 2 ver150 → 180 featTemplate Gallery + AI Script-to-Video

📱E6Tier 3V28.x · 9 ver~210 featMobile + PWA + Cmd+K + A11y + Search

🎨E7Tier 4V29.x · 8 ver~240 featColorPicker + Auto Scene Cut + Speed Ramp

🤖E8AI SceneV30.x · 5 ver~270 featThai Whisper + AI Audio + Color Lab

🎬E9CapCutV31.x · 10 ver~310 featLong→Shorts + Motion Track + Beat Sync

✨E10AI MagicV32.x · 5 ver~330 featBG Remover + Voice Cloning + Smart Enhance

🎵E11AudioV33.x · 6 ver~340 featVisualizer + Voice Isolator + EQ + Compressor

🎨E12WebGLV34.x · 5 ver~350 featFilter Pipeline + Sobel Edge + Shader

⚡E13WebCodecsV35.x · 4 ver~360 featEncoder Detection + Core + Export Pipeline

🎮E14WebGPUV36 · 1 ver~400 featGPU Compute Shaders · 320 → 360 features

🤝E15CollaboratorV42.5470+ featTemplates + Multi-Cam + Snippets + Batch + History

เริ่มจาก E1 (28 feat) → deploy ได้ → ค่อย ๆ เพิ่ม era ตามต้องการ · คุณเลือกหยุดที่ era ไหนก็ได้

📋 all-versions.html → 📸 Evolution Gallery

17/31

🌐 V1 deploy 📸 Screenshot 🎬 MP4

🎬 W1 · V1 Genesis · ตัวอย่างจริง

V1 Genesis — V1 ที่ deploy ได้จริง

Base MVP · 28 features · 88.5 KB · 0 backend · deploy จริง port 31024

🎬 Features (28)

3-track timeline — CapCut-style (video/audio/text)
Media library — drag-drop files
Audio waveform + thumbnails
FFmpeg.wasm MP4 export — h264 + aac
6 export presets + ASS subtitle

📦 Specs

วัน deploy2026-07-07

Port31024

Bundle~88.5 KB

Backend deps0

Source files~18

DeployHTTP 200 ✓

✅ หลักฐาน (deploy ได้จริง)

Output จริง: 1,413,462 bytes MP4 (35s, h264+aac)

Generated โดย FFmpeg.wasm ใน browser · ไม่มี server

→ เปิด V1 deploy (live) → ดู Screenshot

💡 W1 = V1

V1 ที่ deploy ได้จริง · 28 features · 0 backend · deploy ครั้งเดียว · ใช้งานได้ทันที · ไม่ต้องรอ V12, V27.2, V42.5

18/31

📖 W1 เต็ม Workshops

🛠 Workshop #1

เว็บแรก · 7 ขั้น

ทำ W1 พร้อมกันใน Live · ใช้เวลา ~50 นาที

1เปิด AI

2Login

3New Task

4💡 ไอเดีย + สั่ง AI

5⏳ รอ 1-3 นาที

6🚀 Deploy

7🎉 เปิด URL

📝 Prompt ตัวอย่าง

"ทำ ระบบจดรายรับรายจ่าย · มีกราฟแท่ง · เก็บ localStorage
เพราะ แม่ค้าร้านเล็กอยากรู้ยอดขาย
Deploy ผ่าน space.minimax.io"

📖 ดู W1 step-by-step →

19/31

📖 W2 เต็ม Workshops

🛠 Workshop #2

เกม/บอท แรก

เพิ่มฟีเจอร์แรก · ~30 นาที

💾

1. localStorage

เก็บข้อมูลในเครื่อง · ไม่หายเวลาปิดเปิด

📤

2. ปุ่ม Export

Export เป็น CSV · เอาไปเปิด Excel ได้

📊

3. กราฟ

เพิ่มกราฟแท่ง/วงกลม · เห็นข้อมูลชัด

📑

4. หลายหน้า (tabs)

แยกหน้า Home/Settings/About

เพิ่มจาก W1 เท่านั้น · ไม่ต้องเริ่มใหม่

— หลักจิ๊กซอ: ต่อชิ้น ไม่ทำใหม่

📖 ดู W2 →

20/31

📖 W3 เต็ม

🛠 Workshop #3

แอป แรก

ทดสอบ AI ทำงานเอง · ~20 นาที

🌐

1. เปิดเว็บเอง

สั่ง AI เปิด browser ทดสอบ

📷

2. ถ่ายรูป

AI ถ่าย screenshot ทุกขั้น

🛠

3. แก้บั๊ก

AI เจอบั๊ก → บอก → แก้เฉพาะจุด

🚀

4. Deploy ใหม่

Deploy v2 ใช้ URL เดิม

💡 You Do Together

ผู้เรียนทำเป็นกลุ่ม 2-3 คน · AI ทำงานแทน · ครูตรวจ

📖 ดู W3 →

21/31

📖 W4 เต็ม

🛠 Workshop #4

ต่อยอด 10 อย่าง

ให้ AI แนะนำ → ทำตาม → ขายได้

1สั่ง AI ศึกษาของเดิม

2แนะนำ 10 อย่าง

3ทำทั้ง 10

4Deploy เป็น v2

✨ ผลลัพธ์

v1 (30 บรรทัด) → v2 (250+ บรรทัด) · ฟีเจอร์ครบ · พร้อมขาย

📖 ดู W4 →

22/31

📖 5 ไอเดีย

💼 ใครเหมาะ?

5 คน × 5 ไอเดีย · deploy-จริง

👩‍🍳

แม่ค้า

ทำ POS ร้านตัวเอง ใช้กดขายหน้าร้านได้จริง

👨‍🏫

ครู · ผู้ปกครอง

ทำเกมเล็ก ๆ ให้เด็กเล่นฝึกคิด · ทำเองได้ใน 30 นาที

💼

SME · ฟรีแลนซ์

ทำระบบรายรับ-รายจ่าย · มีกราฟให้ดู

🛠

Maker · คนอยากมีเว็บ

ทำ Portfolio / Landing Page 1 หน้า พร้อมแชร์

🎓 นักเรียน

ทำ To-Do เก็บงาน · ไม่หายเวลาปิดเปิดเครื่อง

📖 ดูรายละเอียด — 5 ตัวอย่างจริง

ทุกตัวอย่างใน use-cases.html deploy-จริง · มี URL ให้คลิก · ไม่ใช่ mockup

หลักการ: "ไม่มีตัวอย่างที่ deploy-จริง = ไม่มีในหน้านี้"

ดูเพิ่มได้ที่ /use-cases.html · มีทั้งหมด 5 ตัวอย่าง + screenshots

📖 ดู 5 ไอเดีย deploy-จริง →

23/31

📖 เนื้อหาเต็ม

⚡ Capabilities

AI ทำอะไรได้บ้าง · 9 อย่าง

🧠

Brain · 4 อย่าง

ความจำ · ทำงานอัตโนมัติ · คิดวิเคราะห์ · ตัดสินใจ

🎨

Create · 3 อย่าง

ภาพ · เพลง · วิดีโอ

🔍

Search · 1 อย่าง

เข้าใจข้อมูล — เว็บ ภาพ เสียง

🚀

Deploy · 1 อย่าง

จากข้อความไป URL จริง

📖 ดูรายละเอียด — 9 capabilities เต็ม ๆ

Brain (4): ความจำ + ทำงานอัตโนมัติ + วิเคราะห์ + ตัดสินใจ

Create (3): สร้างภาพ (image gen) + เพลง (music gen) + วิดีโอ (video gen)

Search (1): เข้าใจข้อมูล เว็บ/ภาพ/เสียง — เหมือน search engine แต่ฉลาดกว่า

Deploy (1): จาก prompt → ไฟล์ → URL จริง (space.minimax.io)

9 อย่างนี้คือ "ของเล่น" ทั้งหมดที่ AI ให้เราใช้

📖 ดู 9 capabilities + ตัวอย่าง →

24/31

📖 Engine Guide

🎮 Engines

เกม · ใช้ Engine อะไร?

🌐

❌ ไม่ใช้ Engine

AI เขียนเอง · HTML/CSS/JS · เหมาะกับเกมง่าย

2️⃣

2D Engine

Phaser · Kaboom · เกม 2 มิติ

3️⃣

3D Engine

Babylon.js · Three.js · เกม 3 มิติ

📖 ดูรายละเอียด — เมื่อไหร่ใช้ Engine?

❌ ไม่ใช้ Engine: เกมง่าย ๆ เช่น Snake, Tetris, ทายคำ — AI เขียน HTML/JS เองก็พอ

2D Engine (Phaser/Kaboom): เกม 2D ที่ต้องการ physics + animation เช่น Mario, platformer

3D Engine (Babylon/Three.js): เกม 3D ที่ต้องการ 3D models เช่น FPS, simulation, 3D world

ผู้เรียนส่วนใหญ่ ไม่ต้องใช้ Engine · AI จัดการให้

📖 เปรียบเทียบ 6 engines →

25/31

codehub 🎁 9 เกมเด่น

🎮 9 เกม

9 เกมจาก codehub

เล่นได้เลย · คลิกที่ card → เปิดเกม

🌸

SJ88Cute

น่ารัก ๆ puzzle

🏠

StayHub

จัดการห้องพัก

📋

FlowBoard

Kanban board

👥

Sims Lite

ชีวิตจำลอง

🐺

Wolfstein

FPS ยิงผี

📝

Quick Note

จด note เร็ว

📖 ดูรายละเอียด — เกมทั้งหมด 19 เกม

ใน codehub.sj88ai.com มี 19 เกม · 9 เกมเด่น + 10 เกมทดลอง

ทุกเกม เล่นได้ฟรี · ไม่ต้อง login · เปิด URL เล่นได้เลย

ทั้งหมดสร้างด้วย AI · ใช้เวลา 1-2 ชั่วโมงต่อเกม

🎁 เปิด codehub เล่น 19 เกม →

26/31

📖 11 Lab Lab: To-do

🧪 Lab

11 โปรแกรม · ทดลองจริง

ทุกตัวมี prompt + workflow + หลักฐาน deploy

✅

To-Do (Lab)

ทำเสร็จ + deploy-จริง

🍜

POS ร้านก๋วยเตี๋ยว

ทำเสร็จ + deploy-จริง

📊

Expense tracker

ทำเสร็จ + deploy-จริง

📋 11 โปรแกรม · มี 2 ที่ verify แล้ว

2 verified (To-Do, POS) + 9 pending · ดู prompt เต็ม + workflow + screenshots ได้ที่ /lab.html

📖 ดูรายละเอียด — Lab คืออะไร?

Lab = โปรแกรมที่ทำเสร็จจริง + deploy จริง · ไม่ใช่แค่ prompt

แต่ละ Lab มี: prompt เต็ม + workflow ทีละขั้น + screenshots + URL จริง

2 Lab verify แล้ว: To-Do (case study 7 section) + POS ร้านก๋วยเตี๋ยว

9 Lab ที่เหลือ: dashboard, expense, kanban, snake game, portfolio, pomodoro, quiz, recipe, journal

🧪 ดู 11 Lab + prompt →

27/31

AI Tools สมัคร ↗

💰 ราคา

AI MiniMax M3 · จ่ายรายปี

Plus

$200/ปี

~1.7B tokens/เดือน

3-4 agents

M3 + M2.7 + image + speech + music

Context 1M

⭐ POPULAR

Max

$500/ปี

~5.1B tokens/เดือน

4-5 agents

+ video 3 clips/day

Context 1M

Ultra

$1,200/ปี

~12.5B tokens/เดือน

6-7 agents

+ video 5 clips/day

Context 1M

💡 แนะนำ

เริ่ม Plus $200/ปี (≈700 บาท/เดือน) · ใช้ได้เยอะพอ · ไม่ต้องใช้ Ultra

💳 สมัคร Plus $200/ปี →

28/31

🏠 Workshops

🆚 เปรียบเทียบ

Live vs เรียนเอง

📖

เรียนเอง

✓ เร็ว · ไม่ต้องรอ

❌ เจอปัญหา → หาคำตอบยาก

❌ ทำตาม tutorial → หลงทาง

❌ ไม่เห็น trick ของคนจริง

🎬

Live 2 ชม.

✓ ทำพร้อมกัน → ไม่หลงทาง

✓ เจอปัญหา → ถามได้ทันที

✓ เห็น trick → เรียนเร็วขึ้น 3-5 เท่า

✓ ได้ deploy จริงใน 2 ชม.

🎯 สรุป

Live ไม่ได้แทนเรียนเอง · แต่ Live ช่วยให้เริ่มต้นเร็วขึ้น + มีคนช่วยตอบตอนติด

29/31

codehub 🎁 Showcase

🎁 ของแจก

codehub.sj88ai.com · 70+ โปรเจค

โค้ด + คำสั่ง AI + skill · แจกฟรี

🎁

70+ โปรเจค

เกม 19 · เว็บ 25 · เครื่องมือ 15 · Lab 11

📋

Prompt เต็ม

ทุกโปรเจคมี prompt ที่ copy ได้

🤖

/skill AI Playbook

Claude AI skill · ใช้ได้ทันที

📍 วิธีรับ

ส่ง screenshot แชร์ Live นี้ใน Facebook Group → DM รับ code + skill

🎁 เปิด codehub.sj88ai.com →

30/31

คู่มือ FAQ

❓ Q&A

คำถามที่ ถามบ่อย

❓ ไม่มีพื้นฐาน code ทำได้ไหม?

ได้ · Live นี้ออกแบบมาสำหรับคนไม่มีพื้นฐาน · แค่พิมพ์ prompt เป็นพอ

❓ ต้องลงโปรแกรมอะไรไหม?

ไม่ต้อง · แค่มี browser + internet · เปิด agent.minimax.io ได้เลย

❓ AI จ่ายรายปี $20/เดือน (≈700 บาท) คุ้มไหม?

คุ้ม · ใช้ได้ทั้งเดือน · ไม่จำกัดจำนวนครั้ง · เหมือนค่ากาแฟ

❓ ทำเสร็จแล้ว deploy ที่ไหน?

space.minimax.io · ฟรี · ได้ URL จริง · แชร์ได้ทันที

❓ ถ้า AI ทำพัง?

บอก AI ว่าพังตรงไหน · AI จะแก้เฉพาะจุด · ไม่ต้องเริ่มใหม่

31/31

🏠 หน้าแรก

🎬 จบ Live

ลิงก์ทั้งหมด · เรียนต่อ

เก็บไว้เลย · ใช้ได้ทุกที่

🛠
10 Workshops 🔄
3 ลูปหลัก 📋
Prompt Cheatsheet ⚡
W1 step-by-step 💼
5 Use Cases 🤖
9 Capabilities 🎮
9 เกม 🧪
11 Lab 🎁
codehub 70+ โปรเจค

✅ เรียบร้อย!

คุณผ่าน Live #01 แล้ว · ต่อไปเรียน W2-W4 · หรือเริ่ม W1 เลย

🎬 ดูย้อนหลัง Live ได้ 2 ที่

📱 ใน Facebook Group · 🌐 เว็บ vibe.sj88ai.com/ppt/LiveEp01.html

🏠 กลับหน้าแรก

เหลือเวลาอีก ...

📍 สถานที่สอน

🎬 ดูย้อนหลังได้ที่ไหน?

Live นี้คือ อะไร

ใคร ๆ ก็ทำได้

ไม่ต้องลงโปรแกรม

ไม่ต้องเขียน code

ไม่ต้องใช้เวลาเยอะ

เตรียมตัว ก่อน Live

📱 มือถือ โหลด App minimax

🌐 1. Browser

💡 โบนัส (ไม่บังคับ)

SJ88 · "เชื่อเล่น เจ ลูกเพจเรียก เอ๊ย"

AI ไม่ได้ยาก

AI แก้ปัญหาจริง

Prompt 2 ส่วน

3 ลูปหลัก

ทฤษฎี "จิ๊กซอ"

15 Eras — Evolution Timeline

V1 Genesis — V1 ที่ deploy ได้จริง

🎬 Features (28)

📦 Specs

✅ หลักฐาน (deploy ได้จริง)

💡 W1 = V1

เว็บแรก · 7 ขั้น

📝 Prompt ตัวอย่าง

เกม/บอท แรก

1. localStorage

2. ปุ่ม Export

3. กราฟ

4. หลายหน้า (tabs)

แอป แรก

1. เปิดเว็บเอง

2. ถ่ายรูป

3. แก้บั๊ก

4. Deploy ใหม่

💡 You Do Together

ต่อยอด 10 อย่าง

✨ ผลลัพธ์

5 คน × 5 ไอเดีย · deploy-จริง

แม่ค้า

ครู · ผู้ปกครอง

SME · ฟรีแลนซ์

Maker · คนอยากมีเว็บ

🎓 นักเรียน

AI ทำอะไรได้บ้าง · 9 อย่าง

Brain · 4 อย่าง

Create · 3 อย่าง

Search · 1 อย่าง

Deploy · 1 อย่าง

เกม · ใช้ Engine อะไร?

❌ ไม่ใช้ Engine

2D Engine

3D Engine

9 เกมจาก codehub

SJ88Cute

StayHub

FlowBoard

Sims Lite

Wolfstein

Quick Note

11 โปรแกรม · ทดลองจริง

To-Do (Lab)

POS ร้านก๋วยเตี๋ยว

Expense tracker

📋 11 โปรแกรม · มี 2 ที่ verify แล้ว

AI MiniMax M3 · จ่ายรายปี

Plus

Max

Ultra

💡 แนะนำ

Live vs เรียนเอง

เรียนเอง

Live 2 ชม.

🎯 สรุป

codehub.sj88ai.com · 70+ โปรเจค

70+ โปรเจค

Prompt เต็ม

/skill AI Playbook