ชุดคำสั่ง (Prompts) ด้านล่างนี้ ได้รับการออกแบบโครงสร้างข้อความเพื่อระบุเงื่อนไขทางกายภาพ ฟังก์ชัน และหลักการ UX/UI ที่เป็นสากล คุณสามารถนำข้อความเหล่านี้ไปปรับใช้กับเครื่องมือสร้างเว็บด้วย AI เช่น Lovable, Bolt.new, v0, Cursor หรือระบบของ Google, OpenAI และ Anthropic โดยสามารถปรับเปลี่ยนชื่อสินค้า โทนสี หรือจำนวนข้อมูลให้ตรงกับสเปกงานของธุรกิจคุณได้ทันที
หมวดที่ 1: โครงสร้างหลักและส่วนประกอบนำทาง (Core Layout & Navigation)
| ลำดับ | ตัวอย่างคำสั่ง |
| Prompt 1 (Hero Section) | “ช่วยสร้าง Hero Section โดยประกอบด้วยหัวข้อหลัก (Main Headline) ข้อความอธิบายสั้นๆ (Sub-headline) และปุ่มกดปฏิสัมพันธ์ (CTA) จำนวนสองปุ่ม โดยเลือกใช้สไตล์แบบ Minimalism และกำหนดให้สีหลักของแบรนด์เป็นสี Teal รหัสสี #01696F” |
| Prompt 2 (Navigation Bar) | “กรุณาออกแบบ Navigation Bar ในรูปแบบตรึงอยู่กับที่เมื่อเลื่อนหน้าจอ (Sticky) โดยจัดวางโลโก้ไว้ทางด้านซ้าย เมนูนำทางจำนวน 5 รายการไว้ตรงกลาง และปุ่มสำหรับเข้าสู่ระบบ/สมัครสมาชิกไว้ทางด้านขวา พร้อมรองรับระบบ Responsive บนมือถือในรูปแบบ Hamburger Menu” |
| Prompt 3 (Footer Section) | “ช่วยออกแบบ Footer สำหรับท้ายหน้าเว็บโดยแบ่งเป็น 4 คอลัมน์หลัก ประกอบด้วย 1. ข้อมูลสรุปบริษัท 2. เมนูรายการสินค้า 3. เมนูรายการบริการ และ 4. ไอคอนสำหรับเชื่อมต่อไปยังโซเชียลมีเดียต่างๆ” |
| Prompt 4 (Sidebar Navigation) | “กรุณาสร้าง Sidebar Navigation สำหรับเมนูฝั่งซ้ายที่ผู้ใช้สามารถกดพับเก็บได้ (Collapse) โดยให้มีทั้งไอคอนและข้อความอธิบาย พร้อมแสดงสถานะหน้าเว็บที่กำลังเปิดใช้งาน (Active Page) ให้เห็นอย่างชัดเจน” |
| Prompt 5 (Mega Menu) | “ช่วยสร้าง Mega Menu ในรูปแบบ Dropdown ขนาด 3 คอลัมน์ โดยภายในเมนูประกอบด้วย หมวดหมู่สินค้าแยกย่อย, พื้นที่แสดงภาพสินค้าแนะนำ (Featured) และส่วนประชาสัมพันธ์โปรโมชันพิเศษ” |
| Prompt 6 (Mobile Bottom Navigation) | “กรุณาออกแบบ Mobile Bottom Navigation แถบเมนูด้านล่างสำหรับหน้าจอมือถือจำนวน 5 ไอคอน โดยโครงสร้างดีไซน์ต้องรองรับพื้นที่ปลอดภัย (Safe Area) สำหรับหน้าจอสมาร์ทโฟนรุ่นใหม่” |
หมวดที่ 2: ส่วนนำเสนอข้อมูลและสินค้า (Content & Product Display)
| ลำดับ | ตัวอย่างคำสั่ง |
| Prompt 7 (Pricing Table) | “ช่วยสร้างหน้าแสดงตารางราคา (Pricing Page) แบบ 3 ระดับ (Starter, Pro, Enterprise) โดยระบุรายละเอียดราคา รายการฟีเจอร์ที่ได้รับ และปุ่มเลือกซื้อในแต่ละระดับ ทั้งนี้ให้เน้นจัดวางแพ็กเกจ Pro ให้มีความโดดเด่นมากกว่าระดับอื่น (Highlight Tier)” |
| Prompt 8 (Card Component) | “กรุณาสร้าง Card Component สำหรับการแสดงผลรายการสินค้า โดยจัดวางรูปภาพไว้ด้านบน ตามด้วยชื่อสินค้า ราคา และปุ่มกดหยิบใส่ตะกร้า (Add to Cart) พร้อมใส่เอฟเฟกต์การเคลื่อนไหวเมื่อผู้ใช้นำเมาส์ไปชี้ (Hover Effect)” |
| Prompt 9 (Testimonial Section) | “ช่วยออกแบบ Testimonial Section เพื่อแสดงผลความคิดเห็นของลูกค้าจำนวน 6 คน ในรูปแบบตาราง Grid 3×2 โดยในแต่ละช่องการ์ดให้ระบุภาพโปรไฟล์ ชื่อ ตำแหน่ง และข้อความรีวิว” |
| Prompt 10 (Hero Split Screen) | “กรุณาสร้าง Hero Section ในรูปแบบแบ่งหน้าจอ (Split Screen) โดยให้ฝั่งซ้ายเป็นพื้นที่แสดงข้อความและปุ่มกด ส่วนฝั่งขวาเป็นพื้นที่แสดงภาพสินค้า พร้อมระบุให้มีแอนิเมชันเคลื่อนไหวแบบเลื่อนปรากฏ (Fade-in) เมื่อผู้ใช้ทำการเลื่อนหน้าจอลงมา” |
| Prompt 11 (Comparison Table) | “ช่วยสร้าง Comparison Table สำหรับเปรียบเทียบคุณสมบัติของแผนบริการหรือสินค้าจำนวน 4 รายการ โดยกำหนดให้แถวหัวข้อด้านบนตรึงอยู่กับที่เมื่อเลื่อนลง (Sticky Header) และให้ทำไฮไลต์แถวหรือคอลัมน์ที่เป็นตัวเลือกที่ดีที่สุด” |
| Prompt 12 (Image Gallery) | “กรุณาออกแบบ Image Gallery สำหรับแสดงผลรูปภาพในรูปแบบ Masonry Grid (จัดวางภาพหลายขนาดคละกันอย่างสมดุล) โดยระบุฟังก์ชันให้เมื่อผู้ใช้คลิกที่รูปภาพใดๆ จะปรากฏหน้าต่างขยายใหญ่แบบ Lightbox ขึ้นมาแสดงผลกลางหน้าจอ” |
หมวดที่ 3: แบบฟอร์มและระบบปฏิสัมพันธ์ (Forms & Interactivity)
| ลำดับ | ตัวอย่างคำสั่ง |
| Prompt 13 (FAQ Section) | “ช่วยสร้าง FAQ Section สำหรับตอบคำถามที่พบบ่อยในรูปแบบ Accordion ที่ผู้ใช้งานสามารถกดคลิกเพื่อขยายเนื้อหาคำตอบหรือยุบเก็บได้ โดยกำหนดให้มีหัวข้อคำถามจำนวน 8 ข้อ และแสดงผลการเคลื่อนไหว (Animation) ระหว่างการเปิด-ปิดอย่างนุ่มนวล” |
| Prompt 14 (Contact Form) | “กรุณาออกแบบ Contact Form สำหรับรับข้อมูลติดต่อ โดยมีช่องกรอกข้อมูล (Input Fields) ได้แก่ ชื่อ, อีเมล, เบอร์โทรศัพท์ และข้อความ พร้อมระบบตรวจสอบความถูกต้องของข้อมูลเบื้องต้น (Validation) และระบบแสดงข้อความแจ้งเตือนเมื่อส่งข้อมูลสำเร็จ (Success Message)” |
| Prompt 15 (Modal Popup) | “ช่วยออกแบบ Modal Popup หน้าต่างแจ้งเตือนสำหรับให้ผู้ใช้งานกดยืนยันการลบข้อมูล (Delete Confirmation) โดยภายในหน้าต่างประกอบด้วย ไอคอนเครื่องหมายเตือน, ข้อความคำถามยืนยัน, ปุ่มกดยกเลิก และปุ่มกดยืนยันการลบ (โดยกำหนดให้ปุ่มยืนยันใช้โทนสีแดง)” |
| Prompt 16 (Search Bar) | “กรุณาสร้าง Search Bar สำหรับช่องค้นหาข้อมูล ที่มีระบบแนะนำคำค้นหาอัตโนมัติ (Autocomplete) โดยให้ระบบแสดงรายการคำแนะนำ (Suggestions) จำนวน 5 รายการขึ้นมาด้านล่างในขณะที่ผู้ใช้งานกำลังพิมพ์ข้อความ” |
| Prompt 17 (Notification Toast) | “ช่วยออกแบบระบบแจ้งเตือนขนาดเล็กแบบ Notification Toast โดยรองรับการแสดงผล 4 รูปแบบตามสถานการณ์ ได้แก่ Success, Error, Warning และ Info โดยกำหนดให้กล่องแจ้งเตือนปรากฏขึ้นบริเวณมุมขวาบนของหน้าจอเป็นระยะเวลา 4 วินาทีก่อนจะจางหายไป” |
| Prompt 18 (Tab Component) | “กรุณาสร้าง Tab Component จำนวน 4 แท็บเมนู ที่ผู้ใช้สามารถกดคลิกสลับเพื่อเปลี่ยนเนื้อหาข้อมูลด้านล่างได้ พร้อมระบุให้มีเส้นใต้ (Underline Animation) เคลื่อนตามแท็บเมนูที่กำลังถูกเลือกใช้งาน” |
| Prompt 19 (Date Picker) | “ช่วยออกแบบ Date Picker ปฏิทินสำหรับเลือกวันที่ โดยระบุฟังก์ชันให้สามารถเลือกช่วงเวลาเริ่มต้นถึงสิ้นสุดได้ (Date Range) พร้อมมีปุ่มเลือกช่วงเวลาสำเร็จรูป (Presets) เช่น วันนี้, รอบ 7 วันที่ผ่านมา และรอบ 30 วันที่ผ่านมา” |
หมวดที่ 4: ข้อมูลสถานะและระบบสนับสนุนผู้ใช้ (Feedback & User Support)
| ลำดับ | ตัวอย่างคำสั่ง |
| Prompt 20 (Dashboard Layout) | “กรุณาสร้าง Dashboard Layout โครงสร้างหน้าจัดการหลังบ้าน โดยกำหนดให้มีแถบเมนูด้านซ้าย (Sidebar) แถบข้อมูลด้านบน (Top Bar) และพื้นที่แสดงเนื้อหาหลักตรงกลาง โดยในพื้นที่หลักส่วนบนสุดให้จัดวางการ์ดสรุปข้อมูลสถิติสำคัญ (KPI Cards) จำนวน 4 ใบ” |
| Prompt 21 (Loading Skeleton) | “ช่วยออกแบบ Loading Skeleton (โครงร่างหน้าจอสีเทาจำลองระหว่างรอโหลดข้อมูล) สำหรับพื้นที่แสดงผลข้อมูลรูปแบบรายการ (List View) เพื่อนำมาใช้แสดงผลทดแทนการใช้ไอคอนวงกลมหมุน (Spinner) ในช่วงเวลาที่ระบบกำลังดึงข้อมูล” |
| Prompt 22 (Stepper / Progress Indicator) | “กรุณาออกแบบ Stepper หรือแถบแสดงความคืบหน้าของกระบวนการทำงาน (Progress Indicator) จำนวน 5 ขั้นตอน โดยระบุสถานะทางทัศนศิลป์ให้ผู้ใช้แยกแยะได้ชัดเจนระหว่าง: ขั้นตอนที่ทำเสร็จสิ้นแล้ว, ขั้นตอนปัจจุบันที่กำลังดำเนินการ และขั้นตอนที่ยังมาไม่ถึง” |
| Prompt 23 (User Profile Card) | “ช่วยสร้าง User Profile Card การ์ดแสดงข้อมูลบุคคล โดยมีองค์ประกอบการจัดวางภาพโปรไฟล์ (Avatar), ชื่อ-นามสกุล, ตำแหน่งงาน, สังกัดหน่วยงาน พร้อมปุ่มปฏิสัมพันธ์สำหรับกดติดตาม (Follow) และปุ่มส่งข้อความ (Message)” |
| Prompt 24 (Newsletter Subscribe Section) | “กรุณาออกแบบ Newsletter Subscribe Section ส่วนสำหรับให้ผู้ใช้กรอกข้อมูลเพื่อติดตามข่าวสาร โดยดีไซน์ต้องมีความชัดเจน ประกอบด้วยหัวข้อหลัก, ข้อความอธิบายสั้นๆ, ช่องสำหรับกรอกอีเมล และปุ่มกดสมัครสมาชิก (Subscribe)” |
| Prompt 25 (Onboarding Tour) | “ช่วยสร้างระบบ Onboarding Tour แนะนำการใช้งานเว็บไซต์จำนวน 4 ขั้นตอน โดยในแต่ละขั้นให้มีกล่องข้อความชี้ไปที่องค์ประกอบหลักบนหน้าจอ (Tooltip Element) พร้อมข้อความคำอธิบายสั้นๆ และปุ่มสำหรับกด ‘ถัดไป’ หรือกด ‘ข้าม'” |
| Prompt 26 (Empty State) | “กรุณาออกแบบหน้าจอสถานะว่างเปล่า (Empty State) สำหรับหน้าเว็บหรือกล่องข้อมูลที่ยังไม่มีเนื้อหาแสดงผล โดยประกอบด้วยภาพภาพประกอบ (Illustration) ที่เรียบง่าย, ข้อความแนะนำผู้ใช้งาน และปุ่มกดปฏิสัมพันธ์เพื่อเริ่มต้นสร้างหรือเพิ่มข้อมูล” |
หมวดที่ 5: หน้าแจ้งเตือนระบบและความปลอดภัย (System & Privacy)
| ลำดับ | ตัวอย่างคำสั่ง |
| Prompt 27 (404 Error Page) | “ช่วยสร้างหน้า 404 Error Page (หน้าแจ้งเตือนเมื่อไม่พบลิงก์เนื้อหา) ในรูปแบบที่เป็นมิตรต่อผู้ใช้งาน ประกอบด้วยภาพประกอบอธิบายสถานการณ์, ข้อความแจ้งปัญหาที่สุภาพ และมีปุ่มกดนำทางเพื่อพากลับสู่หน้าแรก (Homepage) ของเว็บไซต์” |
| Prompt 28 (Pagination Component) | “กรุณาออกแบบระบบแบ่งหน้าข้อมูล (Pagination) โดยแสดงโครงสร้างปุ่มกด: ย้อนกลับ, ตัวเลขลำดับหน้า 1 ถึง 5, เครื่องหมายจุดไข่ปลา (…) สำหรับหน้าถัดไป, หน้าสุดท้าย และปุ่มหน้าถัดไป ทั้งนี้ให้ใส่สไตล์ลิ่งสีสันที่เด่นชัดให้กับหน้าปัจจุบันที่ผู้ใช้กำลังเปิดอยู่ (Active State)” |
| Prompt 29 (Dark Mode Toggle) | “ช่วยสร้างปุ่มสลับโหมดหน้าจอ Dark Mode / Light Mode (Toggle Switch) โดยกำหนดให้ระบบสามารถบันทึกค่าความต้องการของผู้ใช้งานไว้ได้ และให้เขียนโค้ดโครงสร้างรองรับการเปลี่ยนสไตล์ลิ่งผ่านคำสั่งคลาส dark: variant ของ Tailwind CSS” |
| Prompt 30 (Cookie Consent Banner) | “กรุณาออกแบบ Cookie Consent Banner แถบแจ้งเตือนการใช้งานคุกกี้เพื่อความปลอดภัยของข้อมูล โดยให้แสดงผลในรูปแบบแถบบาร์บริเวณขอบล่างสุดของหน้าจอโดยไม่บดบังเนื้อหาสำคัญ และมีปุ่มปฏิสัมพันธ์ 3 ทางเลือกอย่างชัดเจน ได้แก่ ปุ่มยอมรับทั้งหมด (Accept All), ปุ่มตั้งค่าส่วนบุคคล (Customize) และปุ่มปฏิเสธ (Reject)” |
แนวทางการนำไปใช้ในบทเรียน
ชุดคำสั่งทั้ง 30 ข้อนี้ มีโครงสร้างข้อความที่ครอบคลุมข้อกำหนดด้านโครงสร้างและหน้าที่การทำงาน (Functional Specifications) ไว้อย่างครบถ้วน ผู้เรียนสามารถคัดลอกข้อความคำสั่งเหล่านี้ไปป้อนให้ AI Builder ทำการเจนเนอเรทชิ้นส่วน (Components) แต่ละส่วน เพื่อนำมาร้อยเรียงเข้าด้วยกันเป็นหน้าเว็บไซต์ที่สมบูรณ์ตามหลัก UX/UI ได้ทันที
