เอกสารประกอบคลาส · ไฟล์เดียวกับที่ผู้เรียนได้รับหลังเรียน
สร้างเว็บแรกด้วย Claude Code ตั้งแต่ติดตั้งจนขึ้นออนไลน์ ไม่ต้องมีพื้นฐานเขียนโปรแกรม
ทำพร้อมกันใน 30 นาทีแรกของคลาส ใช้ได้ทั้ง Mac และ Windows
| เครื่องมือ | ใช้ทำอะไร | ติดตั้ง |
|---|---|---|
| VS Code | เปิดดูและแก้ไฟล์ | code.visualstudio.com |
| Git | เก็บประวัติงาน ย้อนกลับได้ | Mac: xcode-select --installWindows: git-scm.com |
| Node.js (LTS) | ใช้คำสั่ง npx ตอนขึ้นเว็บ | nodejs.org |
| Claude Code | ผู้ช่วยเขียนโค้ดใน Terminal | ดูคำสั่งด้านล่าง |
ติดตั้ง Claude Code (คำสั่งจากเอกสารทางการ)
curl -fsSL https://claude.ai/install.sh | bashirm https://claude.ai/install.ps1 | iexสร้างโฟลเดอร์งานแล้วเริ่มคุยกับ Claude ครั้งแรกจะให้ล็อกอินบัญชี Claude (แพ็กเกจ Pro ขึ้นไป)
mkdir my-site && cd my-site && claudeวิธีติดตั้งล่าสุดดูได้ที่ docs.claude.com · ยังไม่มี Claude Pro เริ่มเรียนด้วย Cursor หรือ ChatGPT แบบฟรีก่อนได้ หลักการเดียวกัน
คัดลอกไปแก้คำในวงเล็บให้ตรงกับงานของคุณ prompt ที่มี ★ คืออันที่ใช้จริงในตัวอย่างข้อ 4
ช่วยสร้างเว็บหน้าเดียวให้ร้านเทียนหอมชื่อ "กลิ่นมายด์" (ร้านสมมติ) ด้วย HTML CSS JavaScript ธรรมดา ไม่ใช้ framework แยกเป็นไฟล์ index.html, style.css, script.js มีส่วน: หัวเว็บพร้อมปุ่มสั่งซื้อทาง LINE, สินค้า 3 อย่างพร้อมราคา, เกี่ยวกับร้าน, ติดต่อ ให้ดูดีบนมือถือก่อน ช่วยบอกแผนสั้น ๆ ก่อนเริ่มเขียน
ปรับโทนสีเป็นครีมกับเขียวเซจ ใช้ฟอนต์ภาษาไทยจาก Google Fonts ที่อ่านง่าย เพิ่มระยะห่างให้ดูโล่งขึ้น และใส่รูปสินค้าเป็นสีพื้นไล่เฉดไปก่อน
เพิ่มปุ่ม "ใส่ตะกร้า" ใต้สินค้าแต่ละชิ้น นับจำนวนและแสดงยอดรวมที่มุมขวาบน กดดูรายการแล้วส่งสรุปไปทาง LINE ได้ ยังไม่ต้องจ่ายเงินจริง
ตรวจเว็บนี้บนจอมือถือกว้าง 375px ว่ามีอะไรล้น ตัวหนังสือเล็กหรืออ่านยาก หรือปุ่มกดยากไหม แก้ให้ แล้วสรุปว่าแก้อะไรบ้าง
ใส่ title, description และรูปพรีวิวเวลาแชร์ลิงก์ใน LINE / Facebook ให้เว็บนี้
เขียน README ภาษาไทยสั้น ๆ แล้วบอกคำสั่งสำหรับอัปขึ้น GitHub และขึ้นเว็บด้วย Vercel ทีละขั้น
กดปุ่ม (ชื่อปุ่ม) แล้วไม่เกิดอะไรขึ้น ใน Console ขึ้นว่า: (วาง error ทั้งหมด) ช่วยหาสาเหตุ อธิบายสั้น ๆ แล้วแก้ โดยไม่แก้ส่วนอื่นที่ทำงานอยู่
อธิบายไฟล์ script.js ทีละส่วน เหมือนอธิบายให้คนไม่เคยเขียนโค้ดฟัง แล้วบอกว่าถ้าอยากเพิ่มสินค้าใหม่ต้องแก้ตรงไหน
การแก้ล่าสุดทำให้หน้าเว็บพัง ช่วยย้อนกลับไปเหมือน commit ล่าสุด แล้วลองวิธีใหม่ที่เปลี่ยนน้อยกว่าเดิม
ตรวจว่าในโปรเจกต์มีรหัสผ่าน API key หรือข้อมูลส่วนตัวที่ไม่ควรขึ้น GitHub ไหม ถ้ามีให้ย้ายไปไฟล์ .env และใส่ชื่อไฟล์ใน .gitignore
วัดความเร็วเว็บนี้ด้วย Lighthouse แล้วแก้ 3 จุดที่ได้ผลมากที่สุด บอกคะแนนก่อนและหลังแก้
ฉันอยากทำเว็บ (อะไร) ให้ (ใคร) ใช้ ช่วยถามคำถามที่จำเป็น 5 ข้อก่อน แล้วสรุปเป็นแผนทำทีละขั้น ขั้นละ 1 prompt
ทำจริงด้วย Claude Code ตาม prompt ★ ด้านบนทีละขั้น ทุกขั้นถูกเก็บเป็น commit แยก เปิดดูโค้ดของแต่ละขั้นได้ที่ ประวัติใน GitHub · ผลลัพธ์สุดท้าย เปิดดูเว็บ
AI บอกแผน 3 ข้อก่อนเขียน: โครงหน้า 5 ส่วน, CSS เริ่มจากจอมือถือ, สคริปต์เลื่อนหน้าแบบนุ่ม แล้วสร้าง 3 ไฟล์
เช็คเอง: กดปุ่มสั่งซื้อทาง LINE แล้วเปิดแอป LINE พร้อมข้อความจริงไหม
เปลี่ยนเป็นโทนครีมกับเขียวเซจ ฟอนต์ Mitr กับ Noto Sans Thai เพิ่มระยะห่าง และกล่องสีไล่เฉดแทนรูปสินค้า
เช็คเอง: ตัวหนังสือบนพื้นสีอ่านง่ายไหม
ปุ่มใส่ตะกร้าใต้สินค้า ตัวนับและยอดรวมมุมขวาบน กดแล้วเห็นรายการ และปุ่มส่งสรุปเข้า LINE
เช็คเอง: ใส่ของ 3 ชิ้น ยอดรวมถูกไหม ข้อความใน LINE ครบไหม (ทดสอบแล้ว: ลาเวนเดอร์ ×2 + วานิลลา ×1 = 900 บาท)
AI เจอ 5 จุดและแก้ทั้งหมด: หัวเว็บแน่นจนชื่อร้านตกบรรทัด, ลิงก์เมนูสูงแค่ 24px กดยาก, ปุ่มเขียว LINE ตัวหนังสือขาวต่างสีแค่ 2.2:1, ปุ่มใส่ตะกร้าสีอ่อนเกินไป, ข้อความใต้ตะกร้า 13px
บทเรียน: งานที่ดูดีบนคอม อาจพังบนมือถือ ต้องสั่งตรวจเสมอ
เพิ่ม title, description และรูปพรีวิวขนาด 1200×630 เวลาแชร์ลิงก์ใน LINE / Facebook จะขึ้นรูปและชื่อร้าน
เช็คเอง: วางลิงก์ในแชท LINE ของตัวเองดูว่ารูปขึ้นไหม
AI เขียน README และคำสั่ง GitHub + Vercel ทีละบรรทัด ผู้เรียนพิมพ์ตาม แล้วได้ลิงก์ .vercel.app ส่งให้เพื่อนเปิดได้ทันที
ผลลัพธ์: vibecoding-th.vercel.app/demo
git add .
git commit -m "เว็บร้านกลิ่นมายด์"
git push
npx vercel --prodcommand not found: claudegit push ขึ้น rejectedgit pull --rebase แล้ว push ใหม่ ถ้ายังไม่ได้ วาง error ให้ Claude ช่วยดู/clear เริ่มแชทใหม่ แล้วอธิบายปัญหาให้สั้นและชัด พร้อม error ล่าสุดindex.html อยู่ในโฟลเดอร์ที่ deploy ไม่ได้อยู่ในโฟลเดอร์ย่อย