เคยไหมครับ? ให้ AI ช่วยสร้างเว็บไซต์หรือ Web Application ขึ้นมา แต่หน้าตามันออกมาเรียบๆ บ้านๆ ดูทั่วไปซะเหลือเกิน
.
เพราะโดยทั่วไปแล้ว AI จะสร้างหน้าตาเว็บโดยอิงจากผลลัพธ์ของเว็บไซต์ทั่วๆ ไปบนอินเทอร์เน็ตที่มันถูกเทรนมา ซึ่งหน้าตาก็ไม่ได้แย่ครับ แต่ถ้าเราอยากได้สไตล์ที่มีความโดดเด่น แตกต่าง ไม่ว่าจะเป็น:
✨ สไตล์ Minimalist เรียบหรู
✨ สไตล์ Neobrutalism / Modern จัดจ้าน ดึงดูดสายตา
✨ สไตล์ Notebook / สเก็ตช์ น่ารักน่าใช้งาน
.
วันนี้ผมจะมาแชร์ Website ที่ผมทำขึ้นมา ที่ได้ทำการรวบรวมสไตร์การสร้างหน้าตาเว็บในแบบต่างๆ 20 แบบ พร้อมด้วย Prompt ที่สามารถ copy ไปวาง เพื่อให้ AI ช่วยปรับเปลี่ยนหน้าตาของเว็บให้กับเราได้ทันทีครับ
โดยขั้นตอนการทำงานทำได้ง่ายๆ เพียง 3 ขั้นตอนดังนี้ครับ:
สร้างโครงสร้างเว็บเริ่มต้น:
เราสามารถใช้ AI ตัวไหนก็ได้ (เช่น Claude Sonnet บนแพลตฟอร์มอย่าง AI Passport) สั่ง prompt สั้นๆ เช่น “สร้างเว็บจัดการระบบรายรับรายจ่ายแบบง่ายๆ” แล้วเราก็จะได้โค้ด HTML/Web App หน้าตาพื้นฐานมา
เลือกสไตล์และ Copy Prompt:
เข้าไปเลือกดูตัวอย่างสไตล์การออกแบบที่ต้องการ (มีให้เลือกมากกว่า 20 สไตล์) จากนั้นเลื่อนลงมาด้านล่างแล้วกดปุ่ม “คัดลอก Prompt” ของสไตล์นั้นมาได้ทันที
สั่ง AI ให้เปลี่ยนสไตล์:
นำ Prompt ที่คัดลอกมา มาวางลงในแชท AI แล้วสั่งว่า “ฝากเปลี่ยนสไตล์ของ Web Application ให้เป็นดังต่อไปนี้: [วาง Prompt ที่ก๊อปปี้มา]” แล้วกดส่งได้เลยครับ
เพียงเท่านี้ AI ก็จะทำการเปลี่ยนธีมและสไตล์หน้าตาให้ใหม่ทั้งหมด เมื่อเทียบผลลัพธ์ Before / After แล้วจะเห็นเลยว่าเปลี่ยนไปเยอะมาก จากหน้าตาเพลนๆ กลายเป็นสไตล์ที่สวยงาม น่าใช้งานขึ้นทันทีครับ!
Before :
After :
➡️ ใครที่อยากได้ไอเดียและ Prompt ทั้ง 20 สไตล์ สามารถเข้าไปดูได้ที่ลิงก์ด้านล่างนี้เลยครับ:
Link รวม 20 สไตล์และ Prompt ตกแต่งเว็บไซต์ด้วย AI
🎓 สนใจคอร์สสร้าง Template ระบบสต๊อกสินค้าใน Google Sheets สอนโดยผมเอง สามารถดูรายละเอียดได้ที่ลิงค์นี้เลย
https://www.skilllane.com/courses/GoogleSheets-Noobitguy
🎓 สนใจคอร์ส สร้าง Web Application โดยไม่ต้องเขียนโค้ดด้วย Lovable AI สอนโดยผมเอง สามารถดูรายละเอียดได้ที่นี้เลย
https://page.futureskill.co/lovablewebapp?aff=446
🎥 อุปกรณ์ที่ผมใช้
กล้อง Sony ZV-E10 kit 16-50mm
Mouse Logitech MX Master 3s
MacBook Air M2
ไมค์ wireless Saramonic Blink 500
เก้าอี้ Anda Seat X-Air Pro Ergonomic Gaming Chair
แขนจับจอ Anda Seat Stealth A6L Ergonomic Monitor Arm
ไมโครโฟน AKG Lyra
ไฟส่องหน้าจอ Xiaomi Light Bar
