คอร์สสร้างเว็บด้วย AI · ไม่ต้องมีพื้นฐาน
สร้างเว็บจริง
ด้วย AI จากศูนย์
แค่พูดเป็นภาษาคน แล้วให้ AI เขียนโค้ดให้ — จบคอร์สมีเว็บออนไลน์จริง ภายใน 2–3 ชั่วโมง
บทที่ 1 · ประวัติศาสตร์
การเขียนโค้ด
วิวัฒนาการ 70 ปี
- 1950s บัตรเจาะรู — เขียนผิดรูเดียว ต้องเริ่มใหม่ทั้งใบ
- 1970s จอเขียวเทอร์มินัล พิมพ์คำสั่งทีละบรรทัด
- 1990s คอมส่วนตัว + โปรแกรมช่วยเขียน (IDE)
- 2008 Stack Overflow — ยุคค้นหา-คัดลอกโค้ด
- 2025 Karpathy บัญญัติคำว่า "Vibecoding"
ยิ่งเวลาผ่าน ยิ่งเขียนง่ายขึ้น — และ AI คือก้าวที่ใหญ่ที่สุด
บทที่ 1 · พื้นฐาน
โค้ดมีกี่ภาษา?
เขียนได้อะไรบ้าง?
ภาษาโปรแกรมมีมากกว่า 700 ภาษา — ที่นิยมเช่น Python, JavaScript, Java, C++, Go
เว็บไซต์
หน้าเว็บ, ร้านค้า, แอปบนเบราว์เซอร์
แอปมือถือ
iOS / Android
เกม
2D / 3D / มือถือ
AI & ระบบอัตโนมัติ
บอท, วิเคราะห์ข้อมูล
คอร์สนี้โฟกัสที่ เว็บไซต์ — เห็นผลเร็ว แชร์ได้ทันที
บทที่ 1 · สมัยก่อน
ยุคก่อน AI:
ค้น Stack Overflow
Stack Overflow (ตั้งปี 2008) เว็บถาม-ตอบโค้ด มีคำถามกว่า 24 ล้านข้อ — เป็นที่พึ่งของโปรแกรมเมอร์ทั้งโลก
วงจรเดิมเวลาเจอ error:
- คัดลอก error → เอาไป Google
- เปิด Stack Overflow อ่านหลายคำตอบ
- คัดลอกโค้ดมาวาง → ลองรัน → ยังพัง → วนใหม่
ช้า น่าหงุดหงิด และต้องเข้าใจโค้ดเองพอสมควร
บทที่ 1 · เปรียบเทียบ
แล้ว Vibecoding
เร็วขึ้นแค่ไหน?
(งานวิจัยของ GitHub)
- สร้างต้นแบบเว็บ (prototype): เร็วขึ้น หลายเท่า (5–10x)
- ไม่ต้องค้น Stack Overflow — ถาม AI ได้ตรงๆ
- เจอ error → วางให้ AI แก้ให้เลย
จาก "หลายชั่วโมง/หลายวัน" → เหลือ "ไม่กี่นาที"
บทที่ 2 · แนวคิด
Vibecoding คืออะไร?
การเขียนโปรแกรมโดย "บอกเป็นภาษาคน" แล้วให้ AI เขียนโค้ดให้ (Andrej Karpathy บัญญัติ ก.พ. 2025)
- ไม่ต้องท่องไวยากรณ์ — แค่สื่อสารให้ชัด
- AI เป็นผู้ช่วย เราเป็นคนสั่ง
- ทำทีละก้าว → ดูผล → สั่งแก้
หัวใจของ vibecoding
วงจรที่ใช้
ตลอดทั้งคอร์ส
- พูด — บอกสิ่งที่อยากได้เป็นภาษาคน
- ดูผล — เปิดในเบราว์เซอร์ทันที
- พูดแก้ — ปรับจนพอใจ ทำทีละเล็ก
- Ship — ปล่อยขึ้นออนไลน์
เปลี่ยนวิธีคิด
คุณคือ ผู้กำกับ
ไม่ใช่คนพิมพ์โค้ด
เมื่อก่อน
ท่องไวยากรณ์ เขียนเองทุกบรรทัด error แล้วตัน
ตอนนี้
โฟกัส "อยากได้อะไร" ปล่อยให้ AI จัดการ "ทำยังไง"
หน้าที่ใหม่: มีวิสัยทัศน์ · สื่อสารชัด · ตรวจงาน · ตัดสินใจ
บทที่ 3 · เตรียมพร้อม
เครื่องมือหลัก 7 อย่าง
Node.js
เครื่องยนต์รันเว็บ
VS Code
เปิด/แก้ไฟล์โค้ด
Claude Code
AI เขียนโค้ด · จ่าย $20/ด
Git + GitHub
เก็บโค้ด · ฟรี
Google Stitch
AI ออกแบบ · ฟรี
Railway
ปล่อยเว็บ · ฟรี credit
บทที่ 3 · เตรียมพร้อม
บัญชี AI เสริม สมัครเบื้องต้น
สมัครไว้ก่อน (ส่วนใหญ่ฟรี) ไว้ต่อยอด — เชื่อมผ่าน MCP หรือใช้สร้างสื่อในเว็บ
OpenRouter
เชื่อม AI หลายเจ้า
ChatGPT
OpenAI
Gemini
ElevenLabs
AI เสียง/พากย์
fal.ai
AI รูป/วิดีโอ
เชื่อมยังไง?
ผ่าน MCP →
บัญชี AI เสริม · เจาะลึก
OpenRouter
ประตูเดียว สู่ AI ทุกเจ้า
สมัครครั้งเดียว ได้ API key เดียว ใช้ได้กับ Claude, GPT, Gemini, Llama และอีกหลายร้อยโมเดล
ช่วย vibecoding ยังไง:
- สลับโมเดลได้ทันทีโดยไม่ต้องเปลี่ยนโค้ด — งานยากใช้ตัวเก่ง งานเล็กใช้ตัวถูก
- คุมค่าใช้จ่ายจุดเดียว เห็นยอดรวม ไม่ต้องเปิดหลายบัญชี
- มีโมเดลฟรีให้ลอง + ตั้ง fallback อัตโนมัติถ้าเจ้าหนึ่งล่ม
บัญชี AI เสริม · เจาะลึก
fal.ai
สร้างรูป/วิดีโอด้วย AI
บริการรันโมเดลสร้างสื่อความเร็วสูง (FLUX, Veo, Kling) ผ่าน API — เรียกใช้จากเว็บได้โดยตรง
ช่วย vibecoding ยังไง:
- สร้าง ภาพจริงสำหรับเว็บ — hero, รูปสินค้า, พื้นหลัง แทนภาพ placeholder
- ทำวิดีโอสั้น/แบ็คกราวด์เคลื่อนไหวให้ landing page น่าสนใจ
- บอก Claude ให้เรียก fal.ai ผ่าน MCP → ได้ asset มาใส่อัตโนมัติ
บทที่ 4 · AI Models
สมองที่ เขียนโค้ดให้
Opus
ฉลาดสุด คิดลึก — วางแผน/ออกแบบระบบ
Sonnet
เก่งโค้ด สมดุล — งานทั่วไป (เริ่มที่ตัวนี้)
Haiku
เร็วสุด ประหยัด — งานเล็ก ซ้ำๆ
สลับรุ่นด้วย /model · นอกจาก Claude ยังมี ChatGPT, Gemini
บทที่ 4 · AI Models
MCP คืออะไร?
มาตรฐานกลางที่ให้ AI เชื่อมต่อกับ tools และบริการภายนอกได้ — เหมือน "USB-C สำหรับ AI"
- AI ไม่ใช่แค่ "ตอบ" แต่ "ลงมือทำ" ได้จริง
- ต่อกับ fal.ai, ElevenLabs, GitHub, Figma ได้
บทที่ 5 · Tech Stack
ใช้อะไรสร้างเว็บ?
Next.js
โครงเว็บ จัดการหน้าอัตโนมัติ
Tailwind CSS
แต่งหน้าตาเร็วด้วย class สั้นๆ
Git / GitHub
เก็บโค้ด
Railway
ปล่อยออนไลน์
Stack ที่ AI "ถนัด" ที่สุด → โค้ดดี บั๊กน้อย
Workflow หลักของคอร์ส
5 ขั้น: Dribbble → Ship
- 1. Dribbble — หา reference ดีไซน์
- 2. Google Stitch — AI ออกแบบ UI
- 3. Copy HTML — วางให้ Claude Code รันต่อ
- 4. Git Push — เก็บโค้ดขึ้น GitHub
- 5. Railway — deploy ออนไลน์จริง
Step 1
Dribbble
หา reference
- เข้า dribbble.com ค้น "landing page"
- เก็บภาพที่ชอบ 1–2 ภาพ ดูสี/ฟอนต์/layout
- ตั้งทิศทางให้ชัด (มินิมอล / luxury / สดใส)
Step 2
Google Stitch
ออกแบบ UI ด้วย AI
- เปิด stitch.withgoogle.com (ฟรี บัญชี Google)
- วางภาพ reference หรือพิมพ์บรรยาย design
- เลือก Gemini 2.5 Pro → Generate
- กด Export Code → React / HTML
Step 3
Copy HTML
→ Claude Code รันต่อ
- คัดลอก code ที่ Stitch export มา
- เปิด Claude Code ในโฟลเดอร์โปรเจกต์
- วาง code + บอกให้ใส่เข้าโปรเจกต์
- Claude ปรับให้เข้ากับ Next.js + Tailwind
- รัน npm run dev ดูที่ localhost:3000
เจอ error → คัดลอกไปวางใน Claude แล้วบอก "ช่วยแก้"
Step 4 · Git + GitHub
เก็บโค้ดด้วย Git
- Git = จุดเซฟ ย้อนกลับได้เมื่อพัง
- GitHub = คลังโค้ดบนคลาวด์ (ฟรี)
- Railway ดึงโค้ดจาก GitHub ไป deploy
git add . git commit -m "เพิ่ม hero section" git push
หรือบอก Claude: "ช่วย commit ขึ้น GitHub ให้หน่อย"
Step 5 · Deploy
ปล่อยเว็บขึ้น Railway
- Login with GitHub → New Project
- Deploy from GitHub repo → เลือก repo
- Railway build ให้อัตโนมัติ
- Generate Domain → ได้ URL จริง
ต่อไปแค่ git push → deploy ใหม่อัตโนมัติ
ทักษะสำคัญ
เขียน Prompt
ให้ได้ผลดี
คลุมเครือ
"ทำให้สวยขึ้น" · "แก้ตรงนี้"
เจาะจง
"เพิ่มระยะห่าง section 2 เท่า ปุ่มขอบมน"
การบ้าน
ทำเว็บของตัวเอง
แล้ว deploy จริง
- Landing page / เว็บโปรไฟล์ หัวข้ออะไรก็ได้
- หา reference จาก Dribbble + ออกแบบด้วย Stitch
- มี navbar + hero + section + footer
- push GitHub + deploy Railway
จบคอร์ส
เริ่มเลย!
จาก "ไม่เคยเขียนโค้ด" → มีเว็บของตัวเองออนไลน์จริง
