📌 เนื้อหาในคลิป
- เตรียมเครื่องมือสำหรับเริ่มพัฒนา
- ตั้งค่าโปรเจกต์ Next.js ด้วย Codex
- นำภาพ UI มาใช้เป็น Reference ให้ AI
- แยก Asset จากภาพ UI เพื่อนำไปใช้ในเว็บไซต์
- ใช้ Codex สร้างหน้า Front-end จากภาพ UI
- ปรับ UI ให้ใกล้เคียงกับ Design ต้นฉบับ
- แนะนำแนวทางการเขียน Prompt สำหรับสั่งงาน AI
🛠️ Tech Stack
- Next.js
- TypeScript
- Tailwind CSS
- Visual Studio Code
- Codex
โปรเจกต์นี้เป็นระบบบันทึกรายรับ–รายจ่ายที่เราจะค่อย ๆ พัฒนาตั้งแต่การออกแบบ UI การสร้างหน้า Front-end ไปจนถึงการเพิ่มฟีเจอร์ AI สำหรับอ่านข้อมูลจากสลิปโดยอัตโนมัติ
เนื้อหาเหมาะสำหรับผู้ที่ต้องการเริ่มต้นใช้ AI ช่วยเขียนโปรแกรม หรือผู้ที่สนใจเรียนรู้การพัฒนา Web Application ด้วยแนวทาง Vibe Coding โดยไม่จำเป็นต้องเขียนโค้ดทุกส่วนด้วยตนเอง
ผู้เรียนจะได้เรียนรู้วิธีสื่อสารกับ AI การเตรียม Reference การปรับแก้หน้าจอ และการพัฒนาโปรเจกต์จริงอย่างเป็นขั้นตอน