สูตรสำเร็จของการเขียน Prompt ระดับมืออาชีพประกอบด้วย:
[สวมบทบาท] + [ประเภทเว็บ] + [Design System (โทนสี/ฟอนต์/สไตล์)] + [Structure (ระบุ Section 1, 2, 3...)] + [UX/UI & Tech (เทคนิค CSS/JS ที่อยากได้เป็นพิเศษ)]
กลุ่มที่ 1: ธุรกิจและแพลตฟอร์ม (Prompts 1–10)
1. เว็บไซต์ B2B SaaS / แพลตฟอร์มซอฟต์แวร์ "สวมบทบาทเป็น Senior UI/UX Designer และ Frontend Developer ช่วยเขียนโค้ดหน้า Landing Page สำหรับแพลตฟอร์ม B2B SaaS ด้วย HTML5, CSS3 และ Vanilla JS Design System: สไตล์ Modern Corporate, โทนสีหลัก Navy Blue (#0F172A) ตัดกับ Electric Blue (#3B82F6), ฟอนต์ 'Inter' Structure: 1. Sticky Navbar แบบ Glassmorphism 2. Hero Section 2 คอลัมน์ 3. Logo Cloud 4. Features Section Grid 3 คอลัมน์ 5. Pricing Section พร้อมสวิตช์ Toggle รายเดือน/รายปี UX/UI: Mobile-first Responsive, CSS Variables, Hover Effect transition: 0.3s ease"
2. Salepage สินค้าพรีเมียม (E-Commerce Single Product)
"เขียนโค้ด Salepage หน้าเดียวสำหรับขายเซรั่มบำรุงผิวระดับไฮเอนด์
Design System: สไตล์ Elegant & Luxury, โทนสีขาวออฟไวท์ (#FAFAFA), โรสโกลด์ (#B76E79), ฟอนต์ 'Playfair Display' + 'Prompt'
Structure: 1. Hero Banner เต็มจอ 2. Problem/Solution 2 คอลัมน์ 3. Key Ingredients กริด 4 ช่อง 4. Testimonials สไลด์ 5. Sticky Floating CTA
UX/UI: รูปภาพทุกรูปใช้ object-fit: cover, ปุ่มสั่งซื้อมีเอฟเฟกต์ Pulse กระเพื่อมเบาๆ"
3. เว็บไซต์โครงการอสังหาริมทรัพย์ระดับหรู (Real Estate)
"สร้างหน้าเว็บ Landing Page สำหรับโครงการคอนโดมิเนียมเปิดใหม่
Design System: สไตล์ Premium & Exclusive, โทนสี Midnight Blue (#1A2B4C) + สีทอง (#D4AF37), ฟอนต์ 'Cinzel' + 'Kanit'
Structure: 1. Navbar โปร่งใสที่เปลี่ยนสีเมื่อเลื่อน (JS) 2. Hero 100vh 3. Project Highlight ตัวเลขสถิติ 4. Gallery Masonry + Lightbox 5. Lead Form VIP
UX/UI: Fade-in Animation (Scroll Reveal), Focus state สีทอง"
4. พอร์ตโฟลิโอส่วนตัวระดับโปร (Developer/Designer Portfolio)
"ออกแบบหน้าเว็บ Portfolio ส่วนตัวแบบ Single Page สไตล์ Minimalist Dark Mode
Design System: โทนสีดำ (#121212), ตัวหนังสือเทาอ่อน (#E0E0E0), สีเน้นเหลืองนีออน (#EAB308), ฟอนต์ 'Fira Code' + 'Roboto'
Structure: 1. Hero สไตล์การพิมพ์โค้ดมี Cursor กระพริบ 2. Tech Stack Marquee 3. Projects การ์ด 2 คอลัมน์ 4. Contact ลิงก์ขนาดใหญ่
UX/UI: Custom Scrollbar, การ์ดโปรเจกต์ยกตัวลอยขึ้นพร้อมเงาเมื่อ Hover"
5. เว็บไซต์คลินิกทันตกรรม / สุขภาพ (Healthcare Service)
"เขียนโค้ดหน้าเว็บสำหรับคลินิกทันตกรรม
Design System: สไตล์ Clean & Trustworthy, โทนสีขาว + ฟ้าการแพทย์ (#0EA5E9), ฟอนต์ 'Sarabun'
Structure: 1. Top Bar แจ้งเบอร์โทรและเวลา 2. Navbar 3. Hero มีกล่องทับซ้อน 4. Services การ์ด 4 ใบ 5. Dentist Team วงกลม 6. Appointment Form
UX/UI: Whitespace นำสายตา, Input ขนาดใหญ่กดง่ายบนมือถือ, Floating Action Button โทรศัพท์มุมขวาล่าง"
6. เว็บไซต์ร้านอาหาร / คาเฟ่ Fine Dining
"สร้างหน้าเว็บไซต์ร้านอาหาร Fine Dining
Design System: สไตล์ Rustic Modern, โทนสีดำชาร์โคล (#2D2D2D) + ส้มอิฐ (#D97757), พื้นหลังลวดลายหินอ่อนจางๆ, ฟอนต์ 'Lora'
Structure: 1. Hero Banner ภาพอาหารเต็มจอ 2. About Us เล่าเรื่องราวร้าน 3. Featured Menu ตารางพร้อมเส้นประไข่ปลา 4. Reservation Form 5. Footer พร้อม Google Maps
UX/UI: Hamburger Icon บนมือถือ, Semantic HTML tags"
7. หน้าลงทะเบียนงานสัมมนา (Event & Webinar)
"ออกแบบหน้า Landing Page สำหรับงานสัมมนาการตลาด
Design System: สไตล์ Vibrant & Energetic, โทนสีม่วงเข้ม (#4C1D95) Gradient ไปชมพูสว่าง (#EC4899), ฟอนต์ 'Poppins'
Structure: 1. Hero ชื่องานตัวใหญ่ + ปุ่ม Get Tickets 2. Countdown Timer JS 3. Speakers รูปขาวดำเปลี่ยนสีเมื่อ Hover 4. Agenda Timeline 5. Pricing/Tickets
UX/UI: ปุ่ม CTA สีตัดกันจัดจ้าน, Backdrop-filter กล่องกระจกฝ้าในส่วนตารางราคา"
8. เว็บไซต์ Digital Agency / เอเจนซี่
"เขียนโค้ดหน้าโฮมเพจของ Digital Agency
Design System: สไตล์ Brutalism ผสม Modern, โทนสีขาว-ดำ + เหลืองสว่าง (#FACC15), Typography ขนาดใหญ่มาก, ฟอนต์ 'Montserrat' (Black weight)
Structure: 1. Hero คำโปรยชิดซ้าย 2. Marquee 'WE BUILD BRANDS - WE DRIVE SALES' 3. Our Work พาดเต็มจอ 4. Accordion FAQ 5. Massive Footer 'LET'S TALK'
UX/UI: เส้นขอบหนาสีดำแทนเงา, ออกแบบแหกกฎเกณฑ์เดิมๆ"
9. หน้าจอระบบหลังบ้าน (Dashboard / Admin Panel UI)
"สร้างหน้า UI สำหรับระบบ Dashboard แอดมิน
Design System: สไตล์ Clean & Functional, พื้นหลังเทาอ่อน (#F8FAFC), การ์ดสีขาวขอบมน, สีแจ้งเตือนเขียว/แดง/เหลือง, ฟอนต์ 'Nunito'
Structure: 1. Sidebar Menu พับเก็บได้ 2. Top Header ช่องค้นหา + กระดิ่ง + โปรไฟล์ 3. Stats Widgets 4 การ์ด 4. Data Table
UX/UI: CSS Grid แบ่ง Sidebar + Main Content, ตารางเลื่อนแนวนอนได้บนมือถือ"
10. เว็บไซต์ขายคอร์สเรียนออนไลน์ (E-Learning)
"สร้างหน้า Salepage ขายคอร์สเรียนเขียนโปรแกรม
Design System: สไตล์ Tech & Educational, โทนสีเขียวมิ้นต์ (#10B981) + พื้นดำเทา (#1F2937)
Structure: 1. Hero มีวิดีโอตัวอย่างจาก YouTube + เรตติ้ง 5 ดาว 2. What you'll learn 2 คอลัมน์ 3. Curriculum Dropdown 4. Instructor โปรไฟล์ 5. Bottom Sticky Bar ราคา + Enroll Now
UX/UI: Flexbox จัดระเบียบ, วิดีโอ YouTube Responsive 16:9"
กลุ่มที่ 2: ร้านค้าและบริการ (Prompts 11–20)
11. เว็บไซต์ร้านค้าออนไลน์ (E-Commerce Storefront)
"สวมบทบาทเป็น E-Commerce UI/UX Expert เขียนหน้าเว็บโฮมเพจสำหรับร้านขายเสื้อผ้าออนไลน์
Design System: สไตล์ Minimalist, โทนสีขาว-เทาอ่อน-Peach (#FFDAB9), ฟอนต์ 'Outfit' หรือ 'Prompt'
Structure: 1. Announcement Bar 2. Navbar 3. Hero Carousel 4. Category Grid 3 คอลัมน์ 5. Featured Products 4 คอลัมน์
UX/UI: CSS Grid จัดสินค้า, ภาพสินค้าซูมเข้าเมื่อ Hover"
12. เว็บไซต์ฟิตเนส / ยิม (Fitness & Gym)
"เขียนโค้ดหน้าเว็บสำหรับฟิตเนสเซ็นเตอร์
Design System: สไตล์ Bold & Energetic, โทนสีดำ (#000000) + แดงนีออน (#FF3333), ฟอนต์ 'Montserrat' ExtraBold
Structure: 1. Hero ภาพคนออกกำลังกาย + Overlay 2. Why Choose Us 3 คอลัมน์ 3. Classes แกลลอรี่ Clip-path 4. Pricing Plans 3 ระดับ
UX/UI: Diagonal Section ด้วย clip-path, ปุ่ม CTA แดงสดกระแทกตา"
13. หน้า Landing Page สำหรับแอปพลิเคชัน (Mobile App)
"สร้างหน้าเว็บโปรโมตแอปพลิเคชันมือถือ Fintech
Design System: สไตล์ Modern Tech & Glassmorphism, พื้นหลัง Gradient ม่วง (#8B5CF6) → น้ำเงิน (#3B82F6), ฟอนต์ 'Inter'
Structure: 1. Hero ปุ่ม App Store/Google Play + Mockup มือถือลอย 2. Features ไอคอน 3D 3. How it works 1-2-3 4. Testimonials กระจกฝ้า
UX/UI: CSS Keyframes ภาพมือถือขึ้นลงช้าๆ (Floating effect)"
14. เว็บไซต์มูลนิธิ / แคมเปญระดมทุน (Non-Profit)
"ออกแบบหน้าเว็บสำหรับองค์กรการกุศลเพื่อช่วยเหลือเด็ก
Design System: สไตล์ Warm & Trustworthy, โทนสีเขียวใบไม้ (#2E8B57) + เหลืองอ่อน, ฟอนต์ 'Lora' + 'Kanit'
Structure: 1. Hero ภาพสื่ออารมณ์ + ปุ่มบริจาคด่วน 2. Our Mission 3. Active Campaigns การ์ด + Progress Bar 4. Volunteer Form
UX/UI: <progress> หรือ CSS Width สร้างแถบวัดเงินบริจาค"
15. การ์ดแต่งงานออนไลน์ (Digital Wedding Invitation)
"สร้างหน้าเว็บการ์ดแต่งงานดิจิทัล (Single Page)
Design System: สไตล์ Romantic & Elegant, โทนสีพาสเทล (ครีม, ชมพู Blush, ทอง), ฟอนต์ Script 'Great Vibes' + Serif
Structure: 1. Hero รูปพรีเวดดิ้ง + ชื่อ + วันที่ 2. Countdown 3. Our Story Timeline 4. Venue + Google Maps iframe 5. RSVP Form
UX/UI: Parallax Scrolling เบาๆ, CSS Timeline, Radio Buttons ดีไซน์สวยกดง่าย"
16. เว็บไซต์ที่ปรึกษา / โค้ช / ฟรีแลนซ์ (Consultant)
"เขียนโค้ดเว็บไซต์ Personal Branding สำหรับที่ปรึกษาธุรกิจ
Design System: สไตล์ Professional, โทนสีน้ำเงินกรมท่า (#1E3A8A) + เบจ (Beige), ฟอนต์ 'Prompt'
Structure: 1. Hero ข้อความ + รูปถ่าย Professional 2. As Seen In โลโก้สื่อ 3. Services การ์ดแนวตั้ง 3 ใบ 4. Success Stories รีวิว 5. Booking CTA ปุ่มขนาดใหญ่
UX/UI: ความสำคัญกับ Typography, CSS Blob/Shape ซ้อนหลังรูปโค้ช"
17. เว็บไซต์เช่ารถ / บริการยานยนต์ (Car Rental)
"ออกแบบหน้าเว็บสำหรับบริษัทรถเช่า
Design System: สไตล์ Sleek & Industrial, โทนสีเงิน-ดำ + เหลืองสว่าง (#FFD700) สำหรับปุ่ม CTA, ฟอนต์ 'Roboto'
Structure: 1. Hero ภาพรถหรู 2. Quick Booking Form ลอยเหนือ Hero 3. Our Fleet Grid รูปรถ + สเปก + ราคา 4. How it Works 3 ขั้นตอน
UX/UI: Date picker ตกแต่งด้วย CSS, การ์ดรถ Hover effect ดูพุ่งออกมา"
18. เว็บไซต์บริษัททัวร์ / แพ็กเกจท่องเที่ยว (Travel Agency)
"สร้างหน้าโฮมเพจสำหรับบริษัททัวร์ต่างประเทศ
Design System: สไตล์ Fresh & Inviting, โทนสีฟ้าใส (Sky Blue #87CEEB) + ขาว, ฟอนต์ 'Sarabun'
Structure: 1. Hero ช่องค้นหา 'คุณอยากไปไหน?' ตรงกลาง 2. Popular Destinations Masonry Grid 3. Top Packages การ์ดพร้อมป้าย 'ลด 20%' 4. Newsletter อีเมล
UX/UI: CSS position: relative/absolute วางป้ายราคาทับรูปแม่นยำ"
19. เว็บขายสินค้าแบบกล่องสุ่ม (Subscription Box)
"ออกแบบ Salepage สำหรับธุรกิจ Subscription Box
Design System: สไตล์ Playful & Vibrant, โทนสีส้มพีช + เขียวมิ้นต์, ขอบมน (Border-radius: 20px), ฟอนต์ 'Nunito'
Structure: 1. Hero กล่องสุ่มเปิดออก 2. How it works 3 สเต็ป 3. What's Inside แกลลอรี่ 4. Choose Your Plan Custom Radio Button
UX/UI: Chunky UI ปุ่มอวบอิ่ม, CSS ตกแต่ง <input type='radio'> เป็นการ์ดที่คลิกได้"
20. แพลตฟอร์มสั่งอาหาร / ร้านอาหารเดลิเวอรี (Food Ordering)
"เขียนโค้ดหน้าเว็บ Web App สำหรับสั่งอาหารออนไลน์
Design System: สไตล์ Appetizing, โทนสีขาวสะอาด + ส้มแดง (#E53E3E), ฟอนต์ 'Kanit'
Structure: 1. Top Header ช่องค้นหา + ตะกร้า Badge 2. Categories Pill-shape Buttons 3. Popular Items การ์ด 2 คอลัมน์ + ปุ่ม [+] 4. Floating Cart แถบสรุปด้านล่าง
UX/UI: Mobile-first, overflow-x: auto ซ่อน Scrollbar, ปุ่มวงกลมกดง่าย"
กลุ่มที่ 3: สื่อและคอนเทนต์ (Prompts 21–30)
21. เว็บบล็อก / นิตยสารออนไลน์ (Blog & Magazine)
"สวมบทบาทเป็น Editorial Web Designer สร้างหน้าแรกของเว็บบล็อกไลฟ์สไตล
Design System: สไตล์ Editorial & Clean, โทนสีขาวดำ (Monochrome), ฟอนต์ 'Playfair Display' + 'Inter'
Structure: 1. Top Header โลโก้กลาง + เมนูหมวดหมู่ 2. Featured Article รูปใหญ่พาดหัวทับ 3. Latest News Grid 3 คอลัมน์ 4. Newsletter Subscription
UX/UI: Magazine Layout, Thumbnail Zoom-in เมื่อ Hover, CSS Grid"
22. เว็บไซต์จองโรงแรม / ที่พัก (Hotel & Resort)
"ออกแบบหน้าโฮมเพจสำหรับรีสอร์ตหรูริมทะเล
Design System: สไตล์ Tropical Luxury, โทนสีขาว-ครีมทราย (#F5F5DC)-น้ำทะเล (#20B2AA), ฟอนต์ 'Cinzel' + 'Prompt'
Structure: 1. Hero วิดีโอลูปพร้อมฟอร์มเช็คอิน/เอาท์ลอยด้านล่าง 2. Accommodation ซ้ายรูป-ขวาอธิบาย 3. Facilities ไอคอน 4. Photo Gallery สลับฟันปลา
UX/UI: Sticky Search Bar เมื่อเลื่อนลงมา, Parallax effect บนรูปรีสอร์ต"
23. แดชบอร์ดวิเคราะห์ข้อมูล (Data Analytics Dashboard)
"เขียนโค้ด UI หน้า Dashboard สรุปยอดขาย Sales Analytics
Design System: สไตล์ Modern SaaS Dark Mode, พื้นหลัง (#0F172A), กราฟสีนีออน, ฟอนต์ 'Roboto'
Structure: 1. Top Navbar 2. KPI Cards 4 กล่อง รายได้/ออเดอร์/ลูกค้าใหม่/อัตราเติบโต 3. Main Chart Area 4. Recent Transactions ตาราง 5 รายการ
UX/UI: Flexbox, Glassmorphism บาง, UI สไตล์ Web3/Crypto Trading"
24. เว็บไซต์โรงเรียน / สถาบันการศึกษา (Education)
"สร้างหน้าเว็บสำหรับสถาบันสอนภาษาหรือมหาวิทยาลัย
Design System: สไตล์ Trustworthy & Academic, โทนสี Navy Blue + Gold, ฟอนต์ 'Sarabun'
Structure: 1. Top Bar สำหรับนักศึกษา/ศิษย์เก่า/บุคลากร 2. Hero ภาพแคมปัส 3. Programs 3 ระดับ 4. News & Events 2 คอลัมน์ 5. Apply Now Banner
UX/UI: Information Architecture ชัดเจน, CSS Grid จัดบล็อกข่าวเท่ากันทุกกล่อง"
25. หน้าเว็บโปรโมต Podcast / รายการวิทยุ
"ออกแบบหน้าเว็บสำหรับโปรโมตรายการพอดแคสต์
Design System: สไตล์ Bold & Trendy, โทนสีส้มอิฐตัดกับพื้นหลังสีดำ, Oversized Typography
Structure: 1. Hero ภาพหน้าปกรายการ + ปุ่ม Listen Now 2. Available On Spotify/Apple/YouTube 3. Latest Episodes ลิสต์ 3 ตอน + Play button 4. About the Host
UX/UI: Sticky Bottom Audio Player, Ripple effect เมื่อ Hover ปุ่ม Play"
26. เว็บไซต์ศัลยกรรม / ความงาม (Plastic Surgery / Beauty Clinic)
"เขียนหน้า Salepage สำหรับคลินิกศัลยกรรมความงาม
Design System: สไตล์ Premium Beauty, โทนสีขาวมุก-ชมพูแชมเปญ (#F2DFD3)-เทาเข้ม, ฟอนต์ 'Prompt'
Structure: 1. Hero นางแบบสวยละมุน + พาดหัวโปรโมชั่น 2. Before & After 2 คอลัมน์ 3. Doctor Profile 4. FAQ Accordion 5. Consultation Form
UX/UI: CSS Slider UI Before-After, ปุ่มจองคิวลอยเด่นตลอดเวลา"
27. เว็บไซต์ขายงานคราฟต์ / สินค้าแฮนด์เมด
"ออกแบบหน้าโฮมเพจร้านขายเซรามิกหรือของแต่งบ้านแฮนด์เมด
Design System: สไตล์ Earthy & Organic, โทนสีเบจ-เทอร์ราคอตตา (#E2725B)-เขียวใบไม้, ฟอนต์ 'Lora' + 'Kanit'
Structure: 1. Hero ภาพสตูดิโอแสงธรรมชาติ 2. Categories รูปทรงวงรี (Oval) 3. Bestsellers กริด 3 คอลัมน์ไม่มีกรอบ 4. Story ประวัติช่างปั้น
UX/UI: Clip-path รูปทรงออร์แกนิก, Image swap on hover"
28. แพลตฟอร์มหางาน / สมัครงาน (Job Board)
"สร้างหน้า Landing Page สำหรับแพลตฟอร์มหางานสาย Tech
Design System: สไตล์ Clean & Professional, โทนสีขาว-เทาอ่อน-ฟ้า (Primary), ฟอนต์ 'Inter'
Structure: 1. Hero ช่องค้นหาใหญ่ยักษ์ (ตำแหน่งงาน + สถานที่) 2. Popular Categories แท็กเม็ดยา (Pill tags) 3. Recent Jobs ตารางแนวตั้ง + ปุ่ม Apply 4. For Employers Banner
UX/UI: Job row Hover effect เปลี่ยนสีพื้นหลัง, Touch-friendly targets"
29. เว็บไซต์สตูดิโอถ่ายภาพ / โปรดักชันเฮาส์
"เขียนเว็บพอร์ตโฟลิโอสำหรับโปรดักชันเฮาส์ถ่ายวิดีโอโฆษณา
Design System: สไตล์ Cinematic & Brutalism, โทนสีดำสนิท-ขาว-เทา, ฟอนต์ 'Montserrat'
Structure: 1. Fullscreen Video Hero วิดีโอ Showreel เล่นอัตโนมัติ 2. Our Services Accordion 3. Featured Works กริดชิดติดกันไม่มีช่องว่าง 4. Let's Talk Form Minimal
UX/UI: Material Design Input ขอบล่างเท่านั้น, Hover ให้รูปมืดลงโชว์ชื่อโปรเจกต์"
30. หน้าเว็บลิงก์รวม Linktree ขั้นเทพ (Bio Link)
"ออกแบบหน้าเว็บรวมลิงก์สำหรับ Instagram/TikTok ของ Influencer
Design System: สไตล์ Glassmorphism & Neumorphism ผสม, พื้นหลังภาพเบลอหรือ Live Gradient พาสเทล, ปุ่มโปร่งใสมีมิติ, ฟอนต์ 'Poppins'
Structure: 1. Profile รูปโปรไฟล์ + ชื่อ + Verified Badge + Bio 2. Highlight Link ปุ่มแรกขนาดใหญ่ 3. Standard Links เรียงแนวตั้ง 4. Social Icons ด้านล่าง
UX/UI: Max-width 480px สำหรับมือถือ, CSS Gradient Animation เคลื่อนไหว"
กลุ่มที่ 4: Web3 และแอปพลิเคชันขั้นสูง (Prompts 31–40)
31. หน้าเว็บ Web3 / NFT Minting Page
"สวมบทบาทเป็น Web3 Frontend Developer สร้างหน้า Landing Page สำหรับโปรเจกต์ NFT
Design System: สไตล์ Cyberpunk Dark Mode, โทนสีดำ (#000000) + นีออนม่วงและฟ้า, ฟอนต์ 'Fira Code' หรือ 'Orbitron'
Structure: 1. Navbar + ปุ่ม Connect Wallet 2. Minting Hero รูป NFT + กล่อง Mint ปุ่ม [+]/[-] 3. Progress Bar ที่ Mint แล้ว 4. Roadmap Timeline
UX/UI: CSS box-shadow Neon glow, ปุ่ม Connect Wallet Hover Glitch เบาๆ"
32. แพลตฟอร์มแลกเปลี่ยนเหรียญ (DeFi Swap / Crypto Exchange)
"ออกแบบ UI หน้าต่าง Swap เหรียญคริปโต สไตล์ Uniswap/PancakeSwap
Design System: สไตล์ Glassmorphism & Clean Crypto, พื้นหลัง Mesh Gradient เบลอๆ, กล่อง Swap กระจกฝ้า, ฟอนต์ 'Inter'
Structure: 1. Swap Card กล่างจอ Input 'From' + 'To' 2. Token Selector Dropdown โลโก้เหรียญ 3. Swap Arrow ไอคอนสลับ 4. Action Button กว้างเต็มกล่อง
UX/UI: backdrop-filter: blur(10px), Focus state ไฮไลต์เปลี่ยนสี"
33. แพลตฟอร์มระบบสมาชิก / ครีเอเตอร์ (Subscription Platform)
"สร้างหน้าโปรไฟล์ครีเอเตอร์แบบระบบสมาชิก
Design System: สไตล์ Minimalist & Exclusive, โทนสีขาว-เทาอ่อน-ฟ้าพาสเทล, ฟอนต์ 'Nunito'
Structure: 1. Creator Cover & Avatar ภาพปกยาว + รูปโปรไฟล์วงกลมซ้อน 2. Creator Bio 3. Subscription Tiers 3 ระดับ 4. Feed/Posts โพสต์ล่าสุดชัด + โพสต์เก่าเบลอ + แม่กุญแจ
UX/UI: CSS filter: blur(8px) กับรูปล็อก"
34. หน้าเว็บพรีเซนต์สินค้าสไตล์ Apple (Scroll-Triggered UI)
"เขียนโค้ด Landing Page เปิดตัวแกดเจ็ตใหม่สไตล์ Apple
Design System: สไตล์ Ultra Minimalist, พื้นหลังดำหรือขาวล้วน, Whitespace เยอะมาก, Typography ใหญ่ยักษ์, ฟอนต์ 'Helvetica Neue'
Structure: 1. Sticky Hero พาดหัวสั้นๆ สินค้ากลางจอ 2. Feature Highlights ซ้าย-ขวาสลับกัน 3. Big Typography ตัวหนังสือเต็มจอ 4. Call to Action ปุ่มเล็กๆ มินิมอล
UX/UI: CSS @keyframes Fade-in on scroll, position: sticky สินค้า"
35. หน้าตาแอปพลิเคชันแชท / คอมมูนิตี้ (Discord / Slack Style)
"ออกแบบหน้า UI เว็บแอปพลิเคชันสำหรับแชทกลุ่ม
Design System: สไตล์ App Interface Dark Theme, โทนสีเทาเข้มหลายระดับ, ฟอนต์ 'Roboto'
Structure: 1. Left Sidebar 1 ไอคอนเซิร์ฟเวอร์วงกลม 2. Left Sidebar 2 รายชื่อห้องแชท 3. Main Chat Area ข้อความ + ช่องพิมพ์ 4. Right Sidebar รายชื่อสมาชิก
UX/UI: CSS Flexbox 4 คอลัมน์ 100vh, เลื่อนเฉพาะในกล่องแชท overflow-y: auto"
36. เว็บไซต์ระดมทุน (Crowdfunding / Kickstarter Style)
"สร้างหน้าเว็บแคมเปญระดมทุนสำหรับสินค้านวัตกรรม
Design System: สไตล์ Trust & Innovation, โทนสีขาว-ดำ + เขียวสด (#05CE78), ฟอนต์ 'Prompt'
Structure: 1. Campaign Header ฝั่งซ้ายวิดีโอ/รูป - ฝั่งขวาเป้าหมายเงิน + วันที่เหลือ 2. Progress Bar เขียว 3. Story/Pitch พื้นที่เล่าเรื่อง 4. Rewards Sidebar
UX/UI: <progress> สำหรับแถบเงิน, การ์ด Reward Hover เปลี่ยนกรอบเขียว"
37. ฟอร์มแบบสอบถาม/ควิซ (Interactive Quiz / Typeform Style)
"เขียน UI หน้าเว็บสำหรับทำแบบประเมินสุขภาพแบบทีละข้อ
Design System: สไตล์ Ultra Clean, พื้นหลัง Solid color เรียบๆ, ตัวหนังสือหัวข้อใหญ่จัดกึ่งกลาง, ฟอนต์ 'Kanit'
Structure: 1. Top Progress Bar เส้นบาง 2. Question Container คำถามตัวใหญ่ 1 ข้อกลางจอ 3. Multiple Choice Buttons ขนาดใหญ่ A, B, C, D 4. Navigation ลูกศรขึ้น/ลง
UX/UI: 100vh พอดีจอ, ปุ่มเลือก Active state กระเพื่อม, ซ่อน Scrollbar"
38. แพลตฟอร์ม Dark Kitchen / ระบบสั่งอาหาร Multi-brand
"ออกแบบหน้าเว็บสำหรับสั่งอาหารจากหลายร้านในที่เดียว (Cloud Kitchen)
Design System: สไตล์ Street & Urban Dark Mode, โทนสีเข้ม + เหลืองมัสตาร์ด (#FFDB58), ฟอนต์ 'Montserrat'
Structure: 1. Top Bar ช่องพิมพ์ที่อยู่จัดส่ง 2. Brand Selector โลโก้ร้านสไลด์ได้ 3. Food Grid การ์ดเมนู Top-view + ราคา + ตะกร้า 4. Sticky Cart Summary ด้านล่าง
UX/UI: Mobile-first ขนาดปุ่มกดด้วยนิ้วโป้ง"
39. เว็บไซต์โปรโมตเกม / E-Sports Tournament
"สร้าง Landing Page สำหรับการแข่งขัน E-Sports
Design System: สไตล์ Aggressive & Gaming, โทนสีดำ-เทา + แดงเลือด (#DC2626) + ลวดลาย Grunge, ฟอนต์ 'Teko' หรือฟอนต์เหลี่ยม
Structure: 1. Hero ภาพตัวละคร + ปุ่ม REGISTER SQUAD 2. Prize Pool ตัวเลขใหญ่ยักษ์ 3. Bracket/Schedule Tournament Bracket 4. Sponsors โลโก้ขาวดำ
UX/UI: CSS กล่อง Bracket ด้วย Flexbox, Vignette บน Hero"
40. เว็บไซต์สไตล์ Retro ยุค 90s / ดิบเถื่อน (Brutalism Art)
"สวมบทบาทเป็นเว็บดีไซเนอร์ยุค 90 สร้างหน้าเว็บโปรโมตงานปาร์ตี้อินดี้
Design System: สไตล์ 90s Web & Brutalism, สีตัดกันแสบตา (เหลืองนีออน + น้ำเงินสด), เส้นขอบดำหนาเตอะ, ฟอนต์ 'Courier New' หรือ Pixel
Structure: 1. Marquee Header ข้อความวิ่งยุค 90s 2. Hero Box เงาดำขอบแข็ง + GIF กระพริบ 3. Lineup List ตารางดิบๆ 4. Ticket Button สไตล์ Windows 95
UX/UI: ปฏิเสธกฎดีไซน์ยุคใหม่ทั้งหมด, box-shadow: 5px 5px 0px 0px black"
กลุ่มที่ 5: เครื่องมือและแอปเฉพาะทาง (Prompts 41–50)
41. แพลตฟอร์มจัดการโปรเจกต์ (Kanban Board / Task Management)
"สวมบทบาทเป็น SaaS Product Designer เขียนโค้ด UI สำหรับแอปจัดการโปรเจกต์สไตล์ Trello
Design System: สไตล์ Productivity & Clean, โทนสีเทาอ่อน, การ์ดขาวขอบมนเนียน, ฟอนต์ 'Inter'
Structure: 1. Top Navbar ปุ่มสร้าง Task ใหม่ 2. Board Area 3-4 คอลัมน์แนวตั้ง (To Do, In Progress, Review, Done) 3. Task Cards ชื่องาน + Label สี + รูปโปรไฟล์ + ไอคอนคอมเมนต์
UX/UI: Flexbox overflow-x: auto, การ์ดยกตัว Lift up เมื่อ Hover"
42. หน้าเว็บเล่าประวัติแบรนด์ (Interactive Timeline & Storytelling)
"ออกแบบหน้าเว็บ 'About Us' แบบเล่าประวัติศาสตร์องค์กรผ่านเส้นเวลา
Design System: สไตล์ Editorial & Elegant, โทนสีครีม-น้ำตาลเข้ม, ฟอนต์ 'Playfair Display'
Structure: 1. Hero วิดีโอ/ภาพประวัติศาสตร์ 2. Vertical Timeline เส้นตรงผ่ากลาง 3. Story Nodes จุดบนเส้น + กล่องข้อความ + รูปสลับซ้าย-ขวา
UX/UI: CSS ::before ::after สร้างเส้นตรงและจุดวงกลม, ปรับมือถือเป็น 1 ด้าน"
43. แอปพลิเคชันฟังเพลงออนไลน์ (Music Streaming Player UI)
"สร้าง UI สำหรับ Web App ฟังเพลงสไตล์ Spotify
Design System: สไตล์ Dark Mode & Glassmorphism, พื้นหลังดำเทา Gradient, สีเน้นเขียวเรืองแสง, ฟอนต์ 'Montserrat'
Structure: 1. Left Sidebar เมนู Home/Search/Library + Playlist 2. Main Content กริดปกอัลบั้ม 3. Fixed Bottom Player ปก + ชื่อเพลง + Play/Pause/Skip + Progress Bar
UX/UI: position: fixed; bottom: 0, ปก Hover โชว์ปุ่ม Play เขียว Overlay"
44. แดชบอร์ดพยากรณ์อากาศ (Dynamic Weather Web App)
"เขียนโค้ด UI หน้าจอแอปพลิเคชันพยากรณ์อากาศ Mobile-first
Design System: สไตล์ Atmospheric & Immersive, พื้นหลัง Gradient สื่อสภาพอากาศ, การ์ดกระจกฝ้า, ฟอนต์ 'Nunito'
Structure: 1. Main Info ชื่อเมือง + อุณหภูมิขนาดใหญ่ยักษ์ 2. Hourly Forecast การ์ดแนวนอนเลื่อนได้ 3. 7-Day Forecast ลิสต์แนวตั้ง
UX/UI: overflow-x: auto ซ่อน Scrollbar, backdrop-filter: blur(15px)"
45. หน้าค้นหาอสังหาฯ แบบ Split-Screen (Real Estate Map Search)
"ออกแบบหน้าค้นหาบ้าน/คอนโด สไตล์ Airbnb
Design System: สไตล์ Modern Functional, โทนสีขาว-เทา, ปุ่มสีชมพูแดง (#FF385C), ฟอนต์ 'Roboto'
Structure: 1. Top Filter Bar สถานที่/วันที่/ผู้เข้าพัก/ตัวกรองราคา 2. Split Content แบ่งจอ 2 ฝั่ง 3. Left Side ลิสต์การ์ดที่พัก 4. Right Side พื้นที่ Google Maps
UX/UI: แผนที่ position: sticky; top: 0; height: 100vh"
46. ฟอร์มชำระเงินแบบหลายขั้นตอน (Multi-step Checkout)
"สร้างหน้าเว็บ Checkout กระบวนการชำระเงินของ E-commerce
Design System: สไตล์ Trustworthy & Clean, โทนสีขาว-เทาอ่อน, ปุ่ม 'ดำเนินการต่อ' สีเขียว/น้ำเงิน, ฟอนต์ 'Prompt'
Structure: 1. Top Stepper 1.ตะกร้า → 2.ที่อยู่ → 3.ชำระเงิน 2. Main Form กรอกที่อยู่ 2 คอลัมน์ 3. Right Sidebar Order Summary Sticky
UX/UI: Focus State ชัดเจน (กรอบเรืองแสงสีฟ้า), Order Summary Sticky"
47. เครื่องมือคำนวณราคา / ROI Calculator
"สวมบทบาทเป็น B2B Growth Designer สร้างหน้าเว็บเครื่องมือคำนวณความคุ้มค่า
Design System: สไตล์ Corporate & Data-driven, โทนสีน้ำเงินเข้ม + ฟ้านีออน, ฟอนต์ 'Inter' เน้นตัวเลขใหญ่
Structure: 1. Heading 'คำนวณเงินที่คุณจะประหยัดได้ต่อปี' 2. Sliders/Inputs Range Slider 2-3 อัน 3. Result Box กล่องไฮไลต์ตัวเลขผลลัพธ์ขนาดใหญ่
UX/UI: CSS Custom Range Slider, Font-weight: 800 สีโดดเด่น"
48. แอปสูตรอาหารแบบทีละขั้นตอน (Step-by-Step Recipe UI)
"เขียน UI หน้าเว็บแนะนำสูตรอาหาร
Design System: สไตล์ Warm & Appetizing, โทนสีส้มอ่อน-เหลืองครีม, ตัวหนังสือขนาดใหญ่, ฟอนต์ 'Kanit'
Structure: 1. Hero Image ภาพอาหารจานเสร็จ 2. Quick Info เวลาเตรียม/ทำ/ระดับ/เสิร์ฟ 3. Ingredients Custom Checkbox กดขีดฆ่าได้ 4. Instructions ขั้นตอน 1, 2, 3 ตัวเลขในวงกลมส้ม
UX/UI: CSS :checked ขีดฆ่าตัวหนังสือ Line-through + เปลี่ยนสีอ่อนลง"
49. ห้องรอเข้าสัมมนาออนไลน์ (Virtual Event Waiting Room)
"ออกแบบหน้าเว็บ Waiting Room สำหรับนับถอยหลังก่อนเริ่ม Live สัมมนา
Design System: สไตล์ Exciting & Immersive, ภาพพื้นหลังเต็มจอ, กล่องข้อความกลาง Glassmorphism, ฟอนต์ 'Montserrat'
Structure: 1. Status Badge ป้ายกระพริบ 'Starting soon' 2. Event Title ชื่อหัวข้อ 3. Massive Countdown ชั่วโมง:นาที:วินาที 4. Chat Placeholder จำลองช่องแชท
UX/UI: CSS Pulsating effect ป้าย Status, Flexbox 100vh กึ่งกลางทั้งแนวตั้ง-นอน"
50. หน้า 404 Error แบบมีลูกเล่น (Creative Interactive 404 Page)
"สร้างหน้า 404 Not Found แบบมีความคิดสร้างสรรค์และไม่น่าเบื่อ
Design System: สไตล์ Playful & Brand-aligned, พื้นหลังสีสว่าง, ฟอนต์ขนาดใหญ่ยักษ์
Structure: 1. Massive 404 ตัวอักษรขนาดใหญ่เต็มจอ 2. Creative Copy 'โอ๊ะโอ... ดูเหมือนคุณจะหลงทางไปในอวกาศแล้ว' 3. Back to Home ปุ่มหลักพากลับ
UX/UI: CSS background-clip: text + color: transparent ใส่ภาพอวกาศใน 404, ไอคอนนักบินอวกาศลอยขึ้นลงด้วย @keyframes"
💡 ข้อแนะนำการนำไปใช้: คุณสามารถ คัดลอก Prompt ข้อที่ตรงกับโจทย์ของคุณ ไปวางใน Gemini Canvas ได้เลยทันที และสามารถปรับเปลี่ยนค่าเฉพาะ เช่น รหัสสี (
Hex Code), ชื่อฟอนต์, หรือสลับตำแหน่ง Section ตามความต้องการ เพื่อให้ได้ผลลัพธ์ที่ตรงใจและพร้อมใช้งานจริงมากที่สุด!