ในกรณีที่โครงสร้างหน้าเว็บหรือส่วนประกอบ (Components) ที่ AI เจนเนอเรทขึ้นมาในตอนแรกยังมีรายละเอียดบางจุดที่ไม่ตรงกับความต้องการ หรือมีข้อผิดพลาดด้านการแสดงผล แนะนำให้ใช้ชุดคำสั่งเฉพาะเจาะจง (Targeted Prompts) ด้านล่างนี้ในการสั่งปรับแต่งทีละองค์ประกอบ เพื่อป้องกันไม่ให้ระบบ AI เกิดความสับสนในการประมวลผลคำสั่ง
หมวดที่ 1: การจัดตกแต่งหน้าตาและเลย์เอาต์ (Styling & Layout Refinement) ลำดับ ตัวอย่างคำสั่ง Prompt 1 (ปรับแต่งความเด่นของปุ่ม) “ปุ่มกดปฏิสัมพันธ์ (CTA) ยังแสดงผลไม่ชัดเจนพอ กรุณาปรับขนาดให้ใหญ่ขึ้น เปลี่ยนโทนสีให้เป็นสีหลักของแบรนด์ (Primary Color) และเพิ่มเอฟเฟกต์เมื่อนำเมาส์ไปชี้ (Hover Effect) ให้ขยายขนาดขึ้นเล็กน้อยที่สเกล 1.05” Prompt 2 (เพิ่มพื้นที่ว่างหน้าเว็บ) “โครงสร้างภายใน Hero Section ดูหนาแน่นเกินไป กรุณาเพิ่มพื้นที่ว่าง (White Space) และจัดระยะห่างแนวตั้ง (Vertical Spacing) ขององค์ประกอบต่างๆ ให้ดูโปร่งและสะอาดตามากขึ้น” Prompt 3 (เพิ่มเอฟเฟกต์เงาและการ์ด) “องค์ประกอบรูปแบบการ์ด (Card Component) เมื่อนำเมาส์ไปชี้ยังไม่มีการตอบสนอง กรุณาเพิ่มเอฟเฟกต์การแสดงเงา (Box Shadow) ให้มีมิติความลึกเพิ่มขึ้น พร้อมกำหนดให้เลื่อนตัวขึ้นด้านบนเล็กน้อย (Translate Y -4px) และกำหนดความเร็วในการเคลื่อนไหว (Transition) ที่ 0.2 วินาที” Prompt 4 (แก้ไขเลย์เอาต์ไม่สมบูรณ์บนแท็บเล็ต) “การจัดวางโครงสร้างหน้าจอแสดงผลบนแท็บเล็ตยังไม่ถูกต้อง กรุณาปรับแต่งจุดเปลี่ยนการแสดงผล (Breakpoint) ที่ความกว้าง 768 พิกเซล ให้แสดงผลเป็นรูปแบบ 2 คอลัมน์ และสำหรับหน้าจอคอมพิวเตอร์ (Desktop) ให้แสดงผลเป็น 3 คอลัมน์” Prompt 5 (ปรับปรุงรูปแบบฟอนต์ภาษาไทย) “การแสดงผลฟอนต์ภาษาไทยยังไม่เป็นระเบียบและอ่านยาก กรุณาปรับเปลี่ยนไปเลือกใช้ฟอนต์ Noto Sans Thai หรือ Sarabun โดยเรียกใช้งานผ่านระบบ Google Fonts เพื่อความเป็นมาตรฐาน” Prompt 6 (เน้นย้ำแพ็กเกจแนะนำ) “หน้าตารางราคา (Pricing Section) ยังไม่ได้เน้นย้ำแพ็กเกจที่ต้องการแนะนำ กรุณาปรับแต่งส่วนของ Pro Plan ให้มีเส้นขอบ (Border) เป็นสีหลักของแบรนด์ และเพิ่มป้ายกำกับ (Tag) ข้อความว่า ‘Most Popular'”
หมวดที่ 2: การตอบสนองบนมือถือและระบบปฏิสัมพันธ์ (Responsive & Interaction) ลำดับ ตัวอย่างคำสั่ง Prompt 7 (ปรับขนาดตัวอักษรบนหน้าจอมือถือ) “การแสดงผลบนหน้าจอสมาร์ทโฟนมีขนาดตัวอักษรเล็กเกินไป กรุณาปรับขนาดตัวอักษรในส่วนเนื้อหาหลัก (Body Font) ให้มีขนาด 16 พิกเซล และเพิ่มระยะห่างภายใน (Padding) รอบองค์ประกอบต่างๆ ให้มีความเหมาะสมกับการกดใช้งาน” Prompt 8 (ปรับแต่งแถบเมนูให้ตรึงอยู่กับที่) “แถบเมนูนำทาง (Navigation Bar) ไม่เลื่อนตามหน้าจอเมื่อทำการ Scroll กรุณาแก้ไขให้แถบเมนูตรึงอยู่บริเวณบนสุดของหน้าจอเสมอ (Sticky Navbar) พร้อมใส่เอฟเฟกต์พื้นหลังเบลอ (Background Blur) ในขณะที่เลื่อนหน้าจอ” Prompt 9 (ระบบตรวจสอบแบบฟอร์มทันที) “ระบบตรวจสอบความถูกต้องของข้อมูลในแบบฟอร์ม (Form Validation) ยังไม่ทำงาน กรุณาเพิ่มระบบแสดงข้อความแจ้งเตือนข้อผิดพลาดในแถวข้อมูลทันที (Inline Error) ในขณะที่ผู้ใช้กำลังกรอกข้อมูล โดยไม่ต้องรอให้กดส่งฟอร์ม (Submit)” Prompt 10 (แก้ไขระบบเมนูด้านบนบนมือถือ) “เมนูนำทางบนหน้าจอมือถือ (Mobile Menu) เมื่อเปิดใช้งานแล้วไม่ยอมปิดตัวลงโดยอัตโนมัติหลังจากที่ผู้ใช้คลิกเลือกลิงก์ กรุณาแก้ไขระบบคำสั่งให้หน้าต่างเมนูปิดตัวลงทันทีเมื่อมีการเปลี่ยนหน้าเว็บ” Prompt 11 (ปรับแต่งแอนิเมชันให้ราบรื่น) “การเคลื่อนไหว (Animation) ของเนื้อหาในแต่ละ Section มีอาการกระตุกหรือไม่ราบรื่น กรุณาปรับแต่งการแสดงผลให้นุ่มนวลขึ้น โดยกำหนดค่าการเคลื่อนไหวผ่าน Framer Motion ให้เป็นรูปแบบ easing: easeOut และกำหนดช่วงเวลา (Duration) อยู่ที่ 0.6 วินาที” Prompt 12 (ควบคุมการเลื่อนหน้าจอขณะเปิดหน้าต่างเตือน) “ในขณะที่หน้าต่างแจ้งเตือน (Modal Popup) เปิดแสดงผลอยู่ ผู้ใช้งานยังคงสามารถเลื่อนหน้าจอพื้นหลังได้ กรุณาแก้ไขระบบให้ทำการล็อกการเลื่อนหน้าจอหลัก (Lock Body Scroll) ไว้ในระหว่างที่หน้าต่าง Modal กำลังเปิดใช้งาน”
หมวดที่ 3: สถาปัตยกรรมข้อมูลและระบบหลังบ้าน (Data & Infrastructure) ลำดับ ตัวอย่างคำสั่ง Prompt 13 (ปรับปรุงระบบการแสดงผลรูปภาพ) “รูปภาพภายในหน้าเว็บแสดงผลช้า กรุณาดำเนินการปรับแต่งไฟล์ภาพ (Image Optimization) โดยเลือกใช้ระบบ Next/Image ควบคู่กับฟังก์ชันโหลดภาพเมื่อเลื่อนไปถึง (Lazy Loading) และกำหนดให้แปลงไฟล์รูปภาพเป็นฟอร์แมต WebP” Prompt 14 (แก้ไขสัดส่วนรูปภาพ Hero ให้สมดุล) “รูปภาพในส่วน Hero Section ไม่แสดงผลตามสัดส่วนที่ถูกต้องบนหน้าจอขนาดต่างๆ กรุณาปรับแต่งระบบให้กำหนดอัตราส่วนภาพ (Aspect Ratio) และตั้งค่าการแสดงผลแบบครอบตัวรูปภาพ (object-cover) เพื่อไม่ให้ภาพบิดเบี้ยว” Prompt 15 (แก้ไขสีสันในโหมดหน้าจอมืด) “ระบบการสลับโหมดหน้าจอมืด (Dark Mode) มีบางองค์ประกอบที่สีพื้นหลังไม่ยอมปรับเปลี่ยนตามค่านิยมหลัก กรุณาตรวจสอบการกำหนดคำสั่งคลาส dark: variant ของ Tailwind CSS ในทุกๆ Element ที่มีโครงสร้างสีพื้นหลัง” Prompt 16 (เพิ่มระบบโครงร่างจำลองระหว่างรอข้อมูล) “ระบบยังขาดส่วนแสดงสถานะการรอโหลดข้อมูล กรุณาเพิ่มองค์ประกอบโครงร่างหน้าจอจำลอง (Skeleton Loader) เพื่อแสดงผลในระหว่างที่ระบบกำลังดึงข้อมูลผ่านอินเทอร์เฟซโปรแกรม (API)” Prompt 17 (ขยายโครงสร้างส่วนท้ายหน้าเว็บ) “ส่วนท้ายของเว็บไซต์ (Footer) มีเนื้อหาสั้นเกินไป กรุณาปรับเพิ่มโครงสร้างให้เป็นรูปแบบ 4 คอลัมน์หลัก ประกอบด้วย ส่วนจัดวางโลโก้, ลิงก์เมนูสำคัญ พร้อมเพิ่มส่วนสำหรับกรอกข้อมูลสมัครรับข่าวสาร (Newsletter Signup) ไว้บริเวณด้านบนของระบบ Footer” Prompt 18 (พัฒนาระบบรองรับสองภาษา) “ปุ่มกดและข้อความบนหน้าเว็บมีเฉพาะภาษาอังกฤษเท่านั้น กรุณาปรับแต่งโครงสร้างระบบให้รองรับการทำงานสองภาษา (ภาษาไทยและภาษาอังกฤษ – TH/EN) โดยนำระบบ i18n มาประยุกต์ใช้ พร้อมจัดวางปุ่มสำหรับสลับเปลี่ยนภาษาไว้บริเวณแถบหัวข้อบนสุด (Header)”
หมวดที่ 4: การค้นหาและความเร็วระบบ (SEO & Performance) ลำดับ ตัวอย่างคำสั่ง Prompt 19 (เพิ่มโครงสร้างข้อมูลสำหรับ Search Engine) “หน้าเว็บไซต์ยังขาดข้อมูลสำหรับการทำอันดับบนเครื่องมือค้นหา กรุณาเพิ่มโครงสร้างข้อมูล Meta Tags ที่จำเป็นให้ครบถ้วนทุกหน้า ประกอบด้วย ข้อมูลหัวข้อหน้าเว็บ (Title), ข้อความอธิบายเนื้อหา (Description), โครงสร้าง Open Graph สำหรับการแชร์ลงโซเชียลมีเดีย และไฟล์ไอคอนประจำเว็บ (Favicon)” Prompt 20 (ปรับปรุงคะแนนประสิทธิภาพความเร็ว) “คะแนนประสิทธิภาพความเร็วของเว็บไซต์ (Performance Score) อยู่ในเกณฑ์ต่ำ กรุณาดำเนินการปรับปรุงระบบดังนี้: เปิดใช้งาน Lazy Load สำหรับรูปภาพทั้งหมด, ตั้งค่าให้โหลดไฟล์ JavaScript ทีหลัง (Defer JS), ปรับแต่งซอร์สโค้ด CSS สำคัญให้อยู่ในหน้าจอหลัก (Inline Critical CSS) และทำการคัดกรองลบไลบรารีซอฟต์แวร์ที่ไม่ได้นำมาใช้งานออกจากโครงการ”
แนวทางการนำไปใช้ในบทเรียน การปรับปรุงโค้ดเว็บไซต์ร่วมกับ AI ให้ได้ผลลัพธ์ที่ดีที่สุด คือการส่งคำสั่งแก้ไขรายละเอียดระบุไปทีละจุด (Specific Fix) จากคลัง Prompt ในหมวดนี้ จะช่วยให้ AI วิเคราะห์ไฟล์ซอร์สโค้ดเดิมและเขียนโค้ดปรับปรุงเฉพาะส่วนได้อย่างแม่นยำ โดยไม่กระทบกระเทือนโครงสร้างหลักของหน้าเว็บส่วนอื่นๆ
