UI x AI: สร้างเว็บและแอปอย่างมืออาชีพ รุ่น 1

คอร์สนี้เหมาะสำหรับ

• สำหรับผู้ที่สนใจการ prompt อย่างเป็นระบบ
• ทำ UI อย่างเป็นระเบียบ
• นำ UI นี้ไปใช้ทำ Prototype เพื่อคุยงานกันในทีม
• นำ UI ไปสร้างเป็นโปรเจคส่วนตัว สำหรับใช้งานจริงแบบง่ายๆ

เรียนทั้งหมด 3 วัน วันละ 3 ชม.
เวลา 9:00น. - 12:00น. ตามเวลาประเทศไทย

• Day 1 - วันเสาร์ที่ 2 สิงหาคม 2568 - เวลา 9:00น. - 12:00น.
• Day 2 - วันเสาร์ที่ 9 สิงหาคม 2568 - เวลา 9:00น. - 12:00น.
• Day 3 - วันเสาร์ที่ 16 สิงหาคม 2568 - เวลา 9:00น. - 12:00น.

เนื้อหาการเรียน

Day 1 - วันเสาร์ที่ 2 สิงหาคม 2568 - 3 ชม.

Module 0: Introduction & Setup

• Welcome & Course Overview
• ความเป็นมาของ AI โดยสังเขป (Brief History of AI)
• รู้จัก Generative AI (Understanding Generative AI)
• Why AI for UI?: ประโยชน์และความท้าทาย (รวมถึงปัญหาด้าน Consistency)
• Tools Overview (V0, Figma, Supabase)

Module 1: The Art of Prompting

• เข้าใจหลักการเขียน Prompt ที่มีประสิทธิภาพสำหรับงาน UI
• เรียนรู้เทคนิคการ Promptสำหรับ V0
• ฝึกฝนการปรับแก้ Prompt เพื่อให้ได้ผลลัพธ์ที่ต้องการ
• สามารถสั่งงาน AI ให้สร้าง UI ที่ซับซ้อนขึ้นได้

Module 2: AI UI Generation Fundamentals & Figma Basics

• ใช้งาน Figma เบื้องต้น สำหรับการออกแบบ UI (Interface, Features สำคัญ)
• รู้จักและเข้าใจฟีเจอร์หลักของ V0
• สร้าง Wireframe และกำหนดชุดสีเบื้องต้นใน Figma เพื่อเป็นแนวทางในการ Prompt AI และเตรียมพร้อมสำหรับ Design Tokens
• สามารถใช้ V0 สร้าง UI Component ง่ายๆ ได้

Module 3: From Figma to AI Code

• ใช้ Design จาก Figma เป็นแนวทางในการ Prompt AI ได้
• เข้าใจโครงสร้าง Design Tokens อย่างง่ายได้ (เช่น รูปแบบ JSON)
• เห็นประโยชน์ของการใช้ Tokens + Fronend framework (เช่น Tailwind) เพื่อความง่ายในการแก้ไข UI ในอนาคต

Day 2 - วันเสาร์ที่ 9 สิงหาคม 2568 - 3 ชม.

Module 4: Ensuring Consistency & Theme

• เข้าใจความสำคัญของ Consistency และ บทบาทของ Design System/Tokens ในการควบคุมคุณภาพ
• รู้จัก Design Tokens ประเภทต่างๆ และประโยชน์
• กำหนด Theme โดยใช้แนวคิด Tokens เป็นแกนกลาง
• ใช้ค่าหรือแนวคิดจาก Tokens มาช่วยในการเขียน Prompt เพื่อให้ AI สร้าง UI ที่สอดคล้องกัน
• สร้างชุดหน้า UI ที่มีรูปลักษณ์เป็นไปในทิศทางเดียวกัน โดยมี Tokens เป็นแนวทาง

Module 5: Component Thinking & Design Systems with AI

• เขาใจแนวคิด Design System
• ระบุและใช้ AI สร้าง UI Component ที่นำกลับมาใช้ซ้ำได้ โดยอ้างอิงจากค่าที่กำหนดไว้
• ฝึกสร้างและปรับแก้ Component ที่ใช้บ่อย โดยใช้ Prompt ที่สอดคล้องกับของที่มีอยู่แล้ว ไม่ต้องสร้างใหม่

Module 6: Making it Functional with Supabase

• รู้จัก Supabase และเข้าใจหลักการทำงานของ Backend as a Service
• ตั้งค่าโปรเจกต์และฐานข้อมูลเบื้องต้นบน Supabase ได้
• เชื่อมต่อ UI ที่สร้างจาก AI กับระบบ Authentication ของ Supabase ได้
• ทำให้ฟอร์มใน UI สามารถรับและบันทึกข้อมูลลง Database ได้

Module 7: Deploy a simple project to Vercel

• เข้าใจหลักการพื้นฐานของการ Deployment
• รู้จักและใช้งาน Vercel เบื้องต้นได้
• สามารถใช้เครื่องมือ v0 ในการ Deploy โปรเจกต์ขึ้น Vercel ได้โดยตรง
• จัดการ Environment Variables สำหรับ API Keys ได้อย่างปลอดภัย
• สามารถเชื่อมต่อ Domain Name ของตนเองเข้ากับโปรเจกต์บน Vercel ได้

Day 3 - วันเสาร์ที่ 16 สิงหาคม 2568 - 3 ชม.

Module 8 (Advanced/Optional): Automation Workflow Ideas

• เห็นภาพรวมและแนวคิดของการทำ Automation Workflow ระหว่าง Figma และ AI
• รู้จักเครื่องมือ Automation เบื้องต้น
• เข้าใจข้อจำกัดและความท้าทายในการทำ Automation จริง

Module 9: Capstone Project

• ประยุกต์ใช้ความรู้และทักษะทั้งหมดที่เรียนมาเพื่อสร้างโปรเจกต์จริง
• ได้ลงมือสร้างเว็บ/แอปง่ายๆ ที่ทำงานได้จริงตั้งแต่ต้นจนจบ (UI + Basic Backend)

Module 10: Conclusion & Next Steps

• ทบทวนความรู้สำคัญที่ได้จากคอร์ส
• เข้าใจข้อจำกัดปัจจุบันและมองเห็นอนาคตของ AI ในงาน UI
• รู้แหล่งข้อมูลสำหรับศึกษาเพิ่มเติมด้วยตนเอง
• พรีเซนต์ผลงานในคลาสเรียน

หมายเหตุ

• เนื่องจากเป็นคลาสแรก เราเลยอยากให้เนื้อหาครบถ้วนสมบูรณ์มากที่สุด
  คลาสเรียนอาจจะมีการปรับเนื้อหาเพิ่มเติม ทางเราจะแจ้งให้นักเรียนทราบก่อนเริ่มเรียนค่า
• ผู้สอนมีทั้งหมด 3 ท่าน โดยแต่ละท่านจะเชี่ยวชาญคนละฝั่งกัน คือ Frontend, Data, UI