EP.1 ใช้ ChatGPT ออกแบบ UI เว็บไซต์บันทึกรายรับ–รายจ่าย
ในบทนี้ เราจะใช้ ChatGPT ช่วยเปลี่ยนไอเดียระบบบันทึกรายรับ–รายจ่ายให้กลายเป็นแบบ UI เว็บไซต์ที่เห็นภาพและพร้อมนำไปพัฒนาต่อ โดยยังไม่เริ่มเขียนโค้ด
ผู้เรียนจะได้เรียนรู้วิธีอธิบายความต้องการให้ AI เข้าใจ การกำหนดรูปแบบและธีมของเว็บไซต์ รวมถึงการสร้างหน้าจอที่จำเป็นสำหรับระบบ เช่น Dashboard หน้าบันทึกรายการ และหน้าจัดการหมวดหมู่
เนื้อหาในบทนี้
วิเคราะห์ว่าระบบควรมีหน้าจออะไรบ้าง
ใช้ ChatGPT ช่วยออกแบบโลโก้และแนวทางของแบรนด์
กำหนดสี ฟอนต์ และ Design System
เขียน Prompt สำหรับออกแบบ UI
ออกแบบหน้า Dashboard
ออกแบบหน้าบันทึกรายรับ–รายจ่าย
ออกแบบหน้าจัดการหมวดหมู่
ออกแบบส่วนอัปโหลดสลิปเพื่อให้ AI อ่านข้อมูล
ปรับแก้ UI ให้มีรูปแบบสอดคล้องกันทั้งเว็บไซต์
เตรียมภาพ UI สำหรับนำไปสร้าง Front-end ในบทถัดไป
สิ่งที่จะได้รับหลังเรียนจบ
ผู้เรียนจะมีแนวทางของแบรนด์ Design System และแบบ UI ของเว็บไซต์บันทึกรายรับ–รายจ่ายที่พร้อมส่งต่อให้ AI หรือ Codex นำไปเขียนเป็น Front-end ได้ทันที