เทคนิคสำคัญของ Vibe Coding คือ “อย่าสั่งให้ AI สร้างใหม่ทั้งหมดเมื่อเจอจุดผิดพลาด” แต่ให้ใช้วิธี ไฮไลต์ (Highlight) เฉพาะโค้ดส่วนที่มีปัญหาบน Canvas แล้วพิมพ์คำสั่งแก้ไขเฉพาะจุดเหล่านี้ลงไป เพื่อป้องกันไม่ให้กระทบกับส่วนอื่นที่ทำไว้ดีอยู่แล้ว:
1. ปัญหาเว็บพังเมื่อดูบนมือถือ (Responsive ล้นกรอบ)
สาเหตุ: โค้ดเริ่มต้นอาจมีการกำหนดขนาดความกว้างแบบตายตัว (Fixed Width) ไว้ เช่น width: 1200px; ทำให้เมื่อเปิดบนหน้าจอมือถือ ข้อความหรือรูปภาพจะล้นออกขอบขวา และต้องเลื่อนหน้าจอซ้าย-ขวาเพื่ออ่าน
Plaintext
เนื้อหาในส่วน [ระบุชื่อ Section] แสดงผลบนมือถือแล้วล้นจอ ช่วยปรับ CSS เป็นแบบ Responsive โดยใช้ Flexbox/Grid หรือ Media Query เพื่อให้บนมือถือเรียงเป็น 1 คอลัมน์ และไม่มีการเลื่อนแนวนอน (overflow-x: hidden)
- ผลลัพธ์ที่ได้: AI จะเปลี่ยนหน่วยวัดจาก Pixel (px) ไปเป็น Percent (%) หรือ rem พร้อมเพิ่ม CSS Media Query สำหรับสลับเลย์เอาต์บนมือถือให้อัตโนมัติ
2. ปัญหารูปภาพยืด บีบแบน หรือผิดสัดส่วน (Image Distortion)
สาเหตุ: กรอบรูปภาพถูกปรับขนาดตามหน้าจอ แต่ตัวไฟล์รูปไม่ได้ถูกตั้งค่าให้คงสัดส่วนเดิม (Aspect Ratio) เอาไว้
Plaintext
รูปภาพในส่วนนี้สัดส่วนเพี้ยน (ยืด/แบน) ช่วยแก้ CSS ของรูปภาพโดยใช้ object-fit: cover; และกำหนด width/height ให้พอดีกับกรอบ เพื่อให้รูปคงสัดส่วนเดิมเสมอแม้หน้าจอจะเปลี่ยนขนาด
- ผลลัพธ์ที่ได้: คำสั่ง object-fit: cover; จะทำการครอบตัด (Crop) ภาพให้อยู่ในกรอบอย่างสวยงามเหมือนรูปใน Instagram โดยไม่ทำให้รูปโดนบีบแบนหรือยืดจนเสียทรง
3. ปัญหาจัดกึ่งกลางไม่ได้ (Centering Issues)
สาเหตุ: ปัญหาคลาสสิกของการเขียนเว็บ ที่ปุ่มหรือข้อความชอบเขยิบไปชิดซ้ายหรือชิดขวา ไม่ยอมอยู่ตรงกลางกล่อง
Plaintext
กล่องข้อความและปุ่มใน Section นี้มันเบี้ยว ไม่ยอมอยู่กึ่งกลาง ช่วยแก้ CSS โดยใช้ Flexbox (display: flex; justify-content: center; align-items: center;) จัดให้ทุกอย่างอยู่กึ่งกลางหน้าจอเป๊ะๆ
ผลลัพธ์ที่ได้: โครงสร้าง Flexbox ชุดนี้จะดึงทุกองค์ประกอบ (ทั้งแนวตั้งและแนวนอน) มาจัดให้อยู่ตรงกลางของกล่องอย่างสมบูรณ์แบบ
4. ปัญหาหน้าเว็บดูอึดอัด เนื้อหาติดกันเกินไป (Spacing & Whitespace)
สาเหตุ: AI มักจะใส่ระยะห่างขอบ (Padding/Margin) มาให้แบบขั้นต่ำ ทำให้แต่ละส่วนของเว็บดูเบียดและอ่านยาก
Plaintext
หน้าเว็บส่วนนี้ดูอึดอัด เนื้อหาติดกันเกินไป ช่วยเพิ่มพื้นที่ว่าง (Whitespace) โดยปรับ Padding ด้านบน-ล่างของแต่ละ Section ให้มากขึ้น และเพิ่ม Margin ระหว่างหัวข้อกับเนื้อหาให้ดูสบายตา อ่านง่ายขึ้น
- ผลลัพธ์ที่ได้: หน้าเว็บจะดูมีระดับ น่าอ่าน และดูเป็นมืออาชีพขึ้นทันทีจากการมี “ระยะหายใจ” (Breathing Room) ที่เหมาะสม
5. ปัญหาฟอนต์ดูโบราณ ไม่สวยงาม (Typography)
สาเหตุ: หากไม่ระบุฟอนต์ เบราว์เซอร์จะดึงฟอนต์ระบบพื้นฐานขึ้นมาแสดงผล ซึ่งมักจะเป็นฟอนต์ไม่มีหัวที่ดูไม่ทันสมัย
Plaintext
ตัวหนังสือดูแข็งและไม่ทันสมัย ช่วยนำเข้า (Import) ฟอนต์จาก Google Fonts เช่น 'Prompt' หรือ 'Kanit' มาใส่ใน CSS แล้วตั้งค่าเป็นฟอนต์หลักของเว็บ พร้อมปรับขนาดหัวข้อ (h1, h2) ให้หนาและเด่นขึ้น
- ผลลัพธ์ที่ได้: AI จะเขียนโค้ด @import ดึงฟอนต์สวยๆ จาก Google Fonts มาใส่ในไฟล์ CSS ให้ทันที ทำให้เว็บดูสวยงามสไตล์ไทยทันสมัย
6. ปัญหาตัวหนังสือกลืนไปกับภาพพื้นหลัง (Readability)
สาเหตุ: รูปภาพพื้นหลัง (Background Image) มีสว่างหรือลวดลายเยอะเกินไป จนกลืนข้อความที่ทับอยู่ด้านบน
Plaintext
ตัวหนังสือในส่วน Hero Banner กลืนไปกับรูปพื้นหลังจนอ่านยาก ช่วยเพิ่มแผ่นฟิล์มสีดำจางๆ (Overlay) ทับบนรูปภาพพื้นหลัง หรือเพิ่มเงาให้ตัวหนังสือ (text-shadow) เพื่อให้ข้อความโดดเด่นและอ่านง่ายขึ้น
- ผลลัพธ์ที่ได้: AI จะใส่เลเยอร์สีดำโปร่งแสง (rgba(0,0,0,0.5)) ทับบนภาพ ทำให้ข้อความสีขาวอ่านได้อย่างเด่นชัดทันที
7. ปัญหากดเมนูแล้วกระโดดวาร์ป แข็งกระด้าง (Smooth Scrolling)
สาเหตุ: การทำลิงก์ข้ามไปส่วนต่างๆ ในหน้าเดียวกัน (Anchor Link เช่น #contact) ปกติจะตัดภาพไปทันที ทำให้ผู้ใช้สับสน
Plaintext
เวลากดเมนูด้านบนเพื่อเลื่อนไปส่วนต่างๆ ของเว็บ มันกระโดดลงมาแบบแข็งๆ ช่วยเพิ่ม CSS: html { scroll-behavior: smooth; } เพื่อให้หน้าเว็บค่อยๆ สไลด์เลื่อนลงมาแบบนุ่มนวล
- ผลลัพธ์ที่ได้: เว็บจะมีเอฟเฟกต์การเลื่อน (Slide) ลงมาที่ราบรื่น ดูพรีเมียมขึ้นด้วยโค้ดเพียงบรรทัดเดียว
8. ปัญหาเมนูด้านบนบังเนื้อหา หรือเลื่อนแล้วหายไป (Navbar Issues)
สาเหตุ: เมื่อตั้งค่าให้เมนูด้านบนติดหนึบ (Sticky/Fixed) เมนูก็จะลอยไปทับข้อความส่วนแรกสุดของหน้าเว็บ
Plaintext
ช่วยปรับเมนูด้านบน (Navbar) ให้เป็นแบบติดหนึบ (Sticky/Fixed) เลื่อนหน้าเว็บแล้วยังเห็นเมนูอยู่ และช่วยแก้ปัญหาเมนูทับเนื้อหาส่วนแรก โดยการเพิ่ม Padding-top ให้กับ Body หรือ Section แรกให้พอดีกับความสูงของเมนูด้วย
- ผลลัพธ์ที่ได้: เมนูจะค้างอยู่ด้านบนตลอดเวลาที่เลื่อนดูเว็บ โดยไม่ไปบังหัวข้ออันแรกของหน้าเว็บ
9. ปัญหาฟอร์มกรอกข้อมูลดูไม่น่าใช้งาน (Form Styling)
สาเหตุ: ฟอร์มดิบๆ ของ HTML จะเป็นกล่องสี่เหลี่ยมขอบสีเทาแข็งๆ ดูเหมือนเว็บไซต์ยุคเก่า
Plaintext
ช่องกรอกข้อมูลในฟอร์มและปุ่ม Submit ดูธรรมดาไป ช่วยปรับแต่ง CSS ให้ดูเป็น Modern UI โดยเพิ่มขอบมน (border-radius), เปลี่ยนสีเส้นขอบเวลาคลิกพิมพ์ (focus state), และเพิ่มเอฟเฟกต์ (Hover) ตอนเอาเมาส์ไปชี้ที่ปุ่มส่งข้อมูล
- ผลลัพธ์ที่ได้: ฟอร์มจะเปลี่ยนเป็นสไตล์โมเดิร์น มีการเปลี่ยนสีเมื่อคลิกพิมพ์ และปุ่มจะมีลูกเล่นเปลี่ยนสีหรือยกตัวขึ้นเวลานำเมาส์ไปชี้
10. ปัญหาเมนูบนมือถือยาวเกะกะ (Hamburger Menu)
สาเหตุ: ตัวเลือกเมนูหลายๆ อัน พอไปอยู่บนจอมือถือที่มีพื้นที่แคบ จะเรียงต่อกันซ้อนกันจนบังพื้นที่หน้าจอ
Plaintext
ส่วนของ Navbar เวลาเปิดบนมือถือลิงก์มันเรียงเกะกะมาก ช่วยเขียน HTML/CSS และ JavaScript เบื้องต้น ซ่อนเมนูทั้งหมดไว้ แล้วเปลี่ยนเป็นไอคอน 3 ขีด (Hamburger Menu) ที่พอกดแล้วเมนูค่อยกางตกลงมา (Dropdown)
- ผลลัพธ์ที่ได้: บนมือถือจะแสดงผลเป็นปุ่มไอคอน 3 ขีดแทน เมื่อผู้ใช้กด ปุ่มถึงจะสไลด์เมนูลงมา ทำให้หน้าเว็บดูคลีนและไม่เกะกะสายตา
สรุปทริคการแก้ปัญหา: เมื่อเจอจุดพังบนหน้าเว็บ ให้คิดว่า Gemini Canvas เป็นโปรแกรมเมอร์ส่วนตัว คุณไม่จำเป็นต้องรู้ชื่อคำสั่ง CSS หรือ JavaScript ลึกๆ แค่อธิบายอาการของปัญหา เช่น “มันล้นจอ”, “มันเบี้ยว”, หรือ “มันอ่านยาก” แล้วใช้ Prompt ด้านบนนี้ AI จะแปลภาษาพูดของคุณไปเป็นโค้ดแก้ไขให้อย่างแม่นยำ