1. Core Concept & Mindset
เปลี่ยนบทบาทจาก "กรรมกร" สู่ "ผู้กำกับ"
Vibe Coding คือการทำงานร่วมกับ AI (Gemini Canvas) โดยคุณทำหน้าที่วางโครงร่าง กำหนดทิศทาง (Vibe) โทนสี และฟังก์ชันการทำงาน หน้าที่เขียนโค้ดทั้งหมดปล่อยให้ AI จัดการ
- คิดเป็นก้อน (Chunking): อย่าสั่งทำทั้งเว็บในรอบเดียว ให้แบ่งทำทีละ Section
- มีภาพอ้างอิงเสมอ: อธิบาย Vibe ให้เห็นภาพ เช่น "ใช้ดีไซน์สไตล์ Apple โทนสีแบบ Spotify"
กฎเหล็ก 3 ประการ (The Golden Rules)
Rule 1 Mobile-First เสมอ
สั่ง AI ทุกครั้งว่าเลย์เอาต์ต้องรองรับการแสดงผลบนมือถือ 100%
Rule 2 Single Page Architecture
ให้ AI รวม HTML, CSS และ JavaScript ไว้ในไฟล์เดียว (index.html) เพื่อความง่ายในการนำไปใช้
Rule 3 60-30-10 Color Rule
บังคับใช้กฎกระจายสี (สีหลัก 60%, สีรอง 30%, สีเน้น 10%) เพื่อความสบายตาและเป็นมืออาชีพ
2. The 5-Step Canvas Workflow
1
1. เข้าสู่ Workspace
เข้าสู่ gemini.google.com/canvas เพื่อเปิดโหมดการทำงานคู่ขนาน (แชทซ้าย โค้ดขวา)
2
2. วางโครงสร้าง (Initial Prompt)
ป้อนคำสั่งแบบครบวงจร ระบุสไตล์ องค์ประกอบ และความต้องการให้ชัดเจนที่สุดในครั้งแรก
3
3. ขัดเกลา (Refine & Iteration)
ดู Preview สดๆ ไฮไลต์เฉพาะจุดที่ต้องการแก้ แล้วสั่งด้วยภาษาพูด (เช่น "เปลี่ยนปุ่มนี้เป็นสีแดง")
4
4. ต่อระบบหลังบ้าน (Integration)
สั่งให้ AI เติมโค้ด JavaScript เพื่อเชื่อมต่อแบบฟอร์มเข้ากับระบบเก็บข้อมูล (เช่น Google Sheets)
5
5. นำขึ้นออนไลน์ (Deploy)
คัดลอกโค้ดทั้งหมด บันทึกเป็น index.html และนำไปฝากไว้บนโฮสติ้งที่ต้องการ
3. Deployment Strategy Matrix
เลือกวิธีการนำเว็บไซต์ขึ้นออนไลน์ (Hosting) ให้เหมาะสมกับสเกลของโปรเจกต์
Netlify
ง่ายที่สุด- • ระบบ Drag & Drop
- • เสร็จภายใน 3 นาที
- • ลิงก์:
.netlify.app
เหมาะสำหรับ: งานเทส, Landing Page เร่งด่วน
Vercel
ล้ำสมัย- • โหลดเร็วระดับโลก
- • รองรับเฟรมเวิร์กยุคใหม่
- • ลิงก์:
.vercel.app
เหมาะสำหรับ: โปรเจกต์ที่เตรียมต่อยอดด้วย React/Next.js
Cloudflare
ปลอดภัยสูง- • เครือข่าย CDN ใหญ่ที่สุด
- • ป้องกัน DDoS ฟรี
- • ลิงก์:
.pages.dev
เหมาะสำหรับ: ธุรกิจจริงจัง, แคมเปญโฆษณา
WordPress
ยืดหยุ่น- • ใช้ Custom HTML Block
- • ใช้ Elementor HTML Widget
- • *ต้องแยกส่วนโค้ด HTML/CSS
เหมาะสำหรับ: ผู้ที่มีเว็บไซต์ระบบหลักอยู่แล้ว
4. Data Capture Architecture
Zero-Cost Backend ด้วย Google Apps Script (GAS)
ไม่ต้องเช่าเซิร์ฟเวอร์หลังบ้าน คุณสามารถใช้ Google Sheets เป็น Database รับข้อมูลจากฟอร์มหน้าเว็บ (HTML) ได้ฟรี 100%
Fetch API (POST)
appendRow()
ขั้นตอนฝั่ง Google Sheets
- สร้างไฟล์ Sheet ตั้งชื่อหัวคอลัมน์ (เช่น Name, Email)
- ไปที่ ส่วนขยาย > Apps Script
- วางโค้ดสคริปต์
doPost(e) - กด การทำให้ใช้งานได้ (Deploy) > เว็บแอป (Web App)
- ตั้งสิทธิ์การเข้าถึงเป็น ทุกคน (Anyone)
- คัดลอก Web App URL เก็บไว้
// โค้ดตัวอย่างสำหรับสั่ง Gemini
"ช่วยเพิ่มโค้ด JavaScript หน้าเว็บ
สำหรับฟอร์มติดต่อ เพื่อใช้ส่งข้อมูล
ไปยัง URL ของ Apps Script ด้วย Fetch API
ตั้งค่า e.preventDefault() เพื่อไม่ให้เว็บรีเฟรช
และให้มีข้อความขอบคุณเด้งขึ้นมาเมื่อสำเร็จ"
5. The Professional Prompt Framework
เคล็ดลับการได้เว็บไซต์ที่สมบูรณ์แบบตั้งแต่คำสั่งแรก (Zero-Shot) คือการใช้โครงสร้างคำสั่งแบบ 5 ส่วนประกอบ
[Role] +
[Type] +
[Design System] +
[Structure] +
[UX/UI & Tech]
ตัวอย่างการประกอบร่าง Prompt ระดับมืออาชีพ:
"[Role] สวมบทบาทเป็น Senior UI/UX Designer [Type] ช่วยเขียนโค้ดหน้า Salepage ขายนวัตกรรมหูฟังแบบ Single Page ด้วย HTML/CSS
[Design System] ขอสไตล์ Modern Dark Mode โทนสีหลักดำสนิท ตัดกับสีเขียวนีออน ใช้ฟอนต์ 'Prompt'
[Structure] โครงสร้างประกอบด้วย: 1. Hero Banner มีภาพตรงกลางและปุ่มสั่งซื้อใหญ่ 2. สเปกสินค้าจัดแบบ Grid 3 คอลัมน์ 3. ฟอร์มเก็บข้อมูลลูกค้าด้านล่างสุด
[UX/UI & Tech] ขอให้โค้ดเป็น Mobile-first responsive, ปุ่มสั่งซื้อให้มีเอฟเฟกต์ Pulse (กระเพื่อมเบาๆ), และตั้งค่า CSS รูปภาพไม่ให้ผิดสัดส่วน (object-fit: cover)"
ทริคการใส่รูปภาพ
อัปโหลดรูปภาพขึ้นเว็บฝากรูป (เช่น Imgur) เพื่อเอา Direct Link (ที่ลงท้ายด้วย .jpg, .png) มาแปะใน Prompt เพื่อให้ AI ใส่รูปจริงลงไปในโค้ดให้ทันที ไม่ต้องใช้ Placeholder
ทริคการใส่วิดีโอ
แปะลิงก์ YouTube ลงใน Prompt ได้เลย แล้วสั่งว่า "ขอให้ตั้งค่า iframe วิดีโอให้เป็นแบบ Responsive (aspect-ratio: 16/9)" AI จะจัดการให้พอดีกับมือถืออัตโนมัติ