uncle ake. ลงทะเบียนเรียน ↗
คอร์สออนไลน์/Design to Web App with AI
ONLINE COURSE / DESIGN → BUILD → DEPLOY

จากไอเดีย สู่ Web App ที่ใช้งานได้จริง ด้วย AI

เรียนกระบวนการออกแบบและพัฒนาแบบครบ Workflow ตั้งแต่เข้าใจ Product ผู้ใช้ และปัญหา วางแผน ออกแบบ UI ด้วย Google Stitch เชื่อม Design ผ่าน MCP พัฒนาด้วย Cursor + Codex ก่อนอัปเกรดสู่ Supabase Database พร้อมระบบ Login และ Deploy ขึ้นใช้งานจริง

เริ่มจาก 0 ได้ไม่ต้องเขียนโค้ดทุกบรรทัดลงมือทำโปรเจกต์จริง
เรียนออนไลน์ประมาณ 10 ชั่วโมง 5 นาที
ราคา2,490 บาท
สิทธิ์การเรียนไม่มีวันหมดอายุ
เริ่มเรียน Design to Web App ↗ ดูเนื้อหาทั้งหมด ↓

เข้าเรียนได้ทันทีหลังยืนยันการลงทะเบียน • มีระบบชำระเงินในหน้า Register

Design to Web App with AI จากงานออกแบบสู่เว็บแอป
PROJECT BASEDเรียนจบ มี Web App ของตัวเองClientFlow • React + Vite • Supabase • Vercel
ไม่ได้สอนแค่เครื่องมือ แต่สอนให้เห็นภาพการทำงานตั้งแต่ “คิด” → “ออกแบบ” → “สร้าง” → “ตรวจ” → “Deploy”
THE COMPLETE WORKFLOW

อยากสร้าง App แต่ไม่รู้จะเริ่มตรงไหน?

คอร์สนี้วางลำดับให้ตั้งแต่ต้น เพื่อให้คุณไม่กระโดดไป Vibe Code ก่อนที่จะรู้ว่า “กำลังสร้างอะไร” และ “สร้างให้ใคร”

01

Understand

เข้าใจ Product, ผู้ใช้, ปัญหา เป้าหมาย และ Scope ของเวอร์ชันแรก

02

Plan

วาง Page Requirement, Sitemap, User Flow และโครงสร้างข้อมูลก่อนลงมือ

03

Design

กำหนด Design Foundation และออกแบบ UI ด้วย Google Stitch ให้เห็นภาพจริง

04

Connect

ใช้ DESIGN.md, PROJECT.md, AGENTS.md และ Stitch MCP ส่ง Context ให้ AI ถูกต้อง

05

Build & Upgrade

ใช้ Cursor + Codex พัฒนา ClientFlow เริ่มจาก LocalStorage ก่อนอัปเกรดสู่ Supabase Database และระบบ Login

06

Deploy

ตรวจสอบ Production Build, เชื่อม GitHub และ Deploy ด้วย Vercel จนได้ Web App ที่เปิดใช้งานผ่าน URL จริง

WHY THIS COURSE

AI ช่วยสร้างได้เร็วขึ้น
แต่คุณยังต้องรู้ว่า ควรสร้างอะไร

ไม่เริ่มจาก Prompt อย่างเดียวเริ่มจาก Product และ User ก่อน เพื่อให้สิ่งที่สร้างตอบโจทย์จริง

ไม่ให้ AI เดา UI เองเรียนรู้การส่ง Design Context ผ่าน Stitch MCP และกำชับให้ยึดงานออกแบบ

ไม่หยุดแค่ Prototypeพัฒนา Function, ตรวจงาน, Production Build และ Deploy ให้คนอื่นเปิดใช้ได้จริง

REAL PROJECT / CLIENTFLOW

ไม่ได้ดูอย่างเดียว
คุณจะสร้าง ClientFlow ไปพร้อมกัน

โปรเจกต์ตัวอย่างเป็น Web Application สำหรับจัดการลูกค้า โปรเจกต์ งาน และ Follow-up ซึ่งมีโครงสร้างมากพอให้เห็น Workflow การทำงานจริง แต่ยังเหมาะกับผู้เริ่มต้น

  • Dashboard และภาพรวมงาน
  • Clients และ Client Detail
  • Projects และสถานะของโปรเจกต์
  • Tasks / Follow-ups และการติดตามงาน
  • Search, Filter และ LocalStorage CRUD ในเวอร์ชันแรก
  • อัปเกรดข้อมูลไปใช้ Supabase Database
  • Login / Logout และป้องกันหน้าภายในระบบ
  • ตรวจสอบและ Deploy เวอร์ชัน Production
ตัวอย่าง Web Application ClientFlow แสดง Dashboard, Clients, Projects, Tasks และ Follow-ups
เป้าหมาย: จากโจทย์ → UI → Code → Web App ที่ Deploy ได้จริง
COURSE CURRICULUM

10 Modules รวม 66 บทเรียน

เรียนเป็นลำดับตั้งแต่เข้าใจ Vibe Design / Vibe Code วาง Product Structure ใช้ ChatGPT ช่วยวางแผน ออกแบบด้วย Google Stitch เตรียม Context สำหรับ AI Coding Agent ลงมือสร้าง ClientFlow ก่อนอัปเกรดจาก LocalStorage สู่ Supabase Database พร้อมระบบ Login และ Deploy ด้วย GitHub + Vercel

01Vibe Design to Vibe Code3 บทเรียน • เห็นภาพ Workflow ตั้งแต่ไอเดียจน Deploy
  1. Vibe Design คืออะไร
  2. Vibe Code คืออะไร
  3. Workflow ตั้งแต่ไอเดียจน Deploy
02Product Structure5 บทเรียน • วางปัญหา เป้าหมาย Scope โครงสร้าง และ User Flow
  1. กำหนดปัญหาและเป้าหมาย
  2. กำหนดขอบเขตของ ClientFlow
  3. โครงสร้างของระบบ
  4. เส้นทางการใช้งาน (User Flow)
  5. กำหนด Page Requirements
03Product Planning with ChatGPT6 บทเรียน • ใช้ ChatGPT ช่วยวาง Product และ Requirement อย่างเป็นระบบ
  1. กำหนด Product เป้าหมาย และผู้ใช้งาน
  2. กำหนดขอบเขต
  3. โครงสร้างระบบ
  4. ความสัมพันธ์ของข้อมูล
  5. เส้นทางการใช้งาน (User Flow)
  6. Page Requirement
04DESIGN.md4 บทเรียน • สร้าง Design Context ก่อนเริ่ม Vibe Design
  1. DESIGN.md คืออะไร
  2. เว็บ designed.ai
  3. วิธีการสร้างไฟล์ DESIGN.md
  4. สร้าง DESIGN.md ด้วย ChatGPT
05Vibe Design with Google Stitch12 บทเรียน • ออกแบบ UI ของ ClientFlow ตั้งแต่หน้าหลักถึง Detail
  1. รู้จัก Google Stitch
  2. ใช้งาน DESIGN.md ใน Google Stitch
  3. ออกแบบหน้า Dashboard (หน้าจอต้นแบบหลัก)
  4. ออกแบบหน้า Clients
  5. ออกแบบหน้า Client Detail
  6. ออกแบบหน้า Projects
  7. ออกแบบหน้า Project Detail
  8. ออกแบบหน้า Tasks
  9. ออกแบบหน้า Task Detail
  10. ออกแบบหน้า Follow ups
  11. ออกแบบหน้า Follow up Detail
  12. ตรวจสอบความเรียบร้อยของ UI
06Vibe Code Environment4 บทเรียน • เตรียมเครื่องมือก่อนเริ่มพัฒนา
  1. เครื่องมือที่ใช้ในขั้น Vibe Code
  2. ติดตั้ง Node.js และ VITE
  3. ติดตั้งและเตรียม Codex ใน Cursor
  4. Google Stitch MCP กับ Codex
07Prepare Context for Vibe Code3 บทเรียน • เตรียม Context ให้ Codex เข้าใจ Project ก่อนลงมือ
  1. PROJECT.md
  2. AGENTS.md
  3. ติดตั้งไฟล์
08Build ClientFlow with Codex18 บทเรียน • ลงมือสร้าง ทดสอบ และเก็บงาน Web App จริง
  1. ปรับตำแหน่ง Codex ให้ใช้งานง่ายขึ้น
  2. ให้ Codex วิเคราะห์โครงสร้างแอป
  3. วางแผนงานพัฒนา
  4. สร้าง Design Foundation
  5. Domain Model และ Local Storage
  6. Application Shell และ Navigation
  7. Clients
  8. Projects
  9. Tasks
  10. Follow ups
  11. Dashboard
  12. ตรวจสอบ UI เบื้องต้น
  13. Missing States
  14. เก็บงาน
  15. ตรวจสอบ UI
  16. เก็บงาน (อีกรอบ)
  17. สั่ง Codex ทดสอบ Flow บน Chrome
  18. สั่ง Codex ทดสอบ Flow ใน In-app Browser
09Deploy with GitHub and Vercel2 บทเรียน • นำ Web App ขึ้นออนไลน์ใช้งานจริง
  1. นำไฟล์ขึ้น GitHub
  2. เปิดเว็บแอปด้วย Vercel
10Upgrade ClientFlow with Login & Database9 บทเรียน • อัปเกรดจาก LocalStorage สู่ Supabase Database และระบบ Login
  1. อัปเดต Requirement ใน PROJECT.md
  2. วางแผนการอัปเกรดด้วย Codex
  3. อัปเดต Requirement ของ ClientFlow
  4. สร้างและเชื่อม Database ด้วย Supabase
  5. สร้างหน้า Login และป้องกันหน้าภายในระบบ
  6. เปลี่ยนจาก LocalStorage เป็น Database
  7. ปรับการบันทึกข้อมูลให้ทำงานกับ Database
  8. ตรวจสอบและเตรียม ClientFlow ก่อน Deploy
  9. Deploy ClientFlow to Production
TOOLS + CONTEXT

ไม่ได้จำแค่ชื่อเครื่องมือ
แต่รู้ว่าใช้ ตอนไหน และเพื่ออะไร

เป้าหมายคือเข้าใจ Workflow เพื่อให้เปลี่ยนเครื่องมือในอนาคตได้ โดยหลักการทำงานยังอยู่กับคุณ

ChatGPTคิด / วางแผน / Review Google StitchVibe Design MCPส่ง Design Context DESIGN.mdDesign Foundation PROJECT.mdScope / Feature AGENTS.mdกติกาให้ Coding Agent Cursor + CodexBuild / Refactor / Check React + ViteWeb App Foundation SupabaseDatabase / Authentication GitHub + VercelVersion / Deploy
AFTER THE COURSE

เรียนจบแล้ว คุณจะมองการสร้าง App เป็น “กระบวนการ” ไม่ใช่แค่ Prompt

01

เริ่มจากโจทย์ได้

แปลงไอเดียเป็น Problem, User, Scope และ Requirement ที่ชัดเจน

02

วาง Flow ได้

คิด Sitemap, Page Requirement และ User Flow ก่อนออกแบบ

03

ออกแบบกับ AI ได้

ใช้ Google Stitch และ DESIGN.md สร้าง UI ที่มีทิศทาง

04

ส่ง Context ให้ AI ได้

ใช้ MCP และไฟล์ Context ลดการเดาของ AI Coding Agent

05

อัปเกรดเป็นระบบจริงได้

เปลี่ยนจาก LocalStorage ไปใช้ Supabase Database พร้อม Login และการป้องกันหน้าภายใน

06

Deploy ได้จริง

ตรวจสอบระบบ เชื่อม GitHub และนำ Web App เวอร์ชัน Production ขึ้นใช้งานผ่าน Vercel

WHO IS THIS FOR?

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

UX/UI

Designer

อยากต่อยอดจากการออกแบบ ไปสู่การสร้าง Product ที่ใช้งานได้จริงด้วย AI

PRODUCT

Product Owner / PM

อยากทำ Prototype หรือ MVP ได้เร็วขึ้น และคุยกับ Design / Dev ได้เห็นภาพมากขึ้น

START

ผู้เริ่มต้น

มีไอเดียอยากสร้าง Web App แต่ยังไม่รู้ควรเริ่มจาก Design หรือ Code ก่อน

BUSINESS

Freelancer / เจ้าของธุรกิจ

อยากทดลองทำ Internal Tool, Prototype หรือ Product Idea โดยใช้ AI ช่วยลดขั้นตอน

Uncle Ake ผู้สอน UX/UI และ AI-assisted design
YOUR INSTRUCTOR

เรียนกับ Uncle Ake
จากมุมมอง Design + Product + AI

คอร์สนี้ออกแบบให้ผู้เรียนเห็นทั้งภาพใหญ่และขั้นตอนลงมือจริง โดยเชื่อม Product Thinking, UX/UI และ AI Coding เข้าด้วยกัน ไม่ได้แยก Design กับ Development ออกจากกัน

เหมาะกับคนที่อยากเข้าใจว่า AI ช่วยตรงไหนได้บ้าง และส่วนไหนที่เรายังต้องคิด ตรวจ และตัดสินใจด้วยตัวเอง

รู้จัก Uncle Ake เพิ่มเติม ↗
FAQ

คำถามก่อนเรียน

คำถามที่มักเกิดขึ้นกับคนที่อยากเริ่มสร้าง Web App ด้วย AI

ไม่มีพื้นฐานเขียนโค้ดเรียนได้ไหม?

ได้ครับ คอร์สเริ่มจาก Product และ Design ก่อน แล้วค่อยพาเข้าสู่การ Build ด้วย AI คุณไม่จำเป็นต้องเขียนโค้ดทุกบรรทัดเอง แต่จะได้เรียนรู้การอ่าน Context, ตรวจผลลัพธ์ และสั่ง AI ให้ทำงานเป็นขั้นตอน

จำเป็นต้องเป็น UX/UI Designer มาก่อนไหม?

ไม่จำเป็น แต่ถ้ามีพื้นฐาน Design หรือ Product จะช่วยให้เชื่อมโยงได้เร็วขึ้น สำหรับผู้เริ่มต้นจะมีการวางพื้นฐาน Product Structure, User Flow และ Design Foundation ก่อนลงมือ

เรียนแล้วได้ทำ Web App จริงหรือแค่ Prototype?

ได้ทำ Web App จริงครับ โปรเจกต์ ClientFlow จะเริ่มจาก React + Vite และ LocalStorage เพื่อให้เข้าใจโครงสร้างก่อน จากนั้นจะอัปเกรดไปใช้ Supabase Database เพิ่มระบบ Login/Logout ป้องกันหน้าภายใน และ Deploy เวอร์ชัน Production ผ่าน Vercel

คอร์สนี้สอน Database และ Login ด้วยไหม?

สอนครับ ใน Module 10 จะพาอัปเกรด ClientFlow จาก LocalStorage ไปใช้ Supabase Database พร้อมสร้างระบบ Login/Logout ป้องกันหน้าภายใน และปรับการบันทึกข้อมูลให้ทำงานกับ Database จริง

ทำไมต้องมี DESIGN.md, PROJECT.md และ AGENTS.md?

เพราะไฟล์แต่ละตัวมีหน้าที่ต่างกัน: PROJECT.md ช่วยอธิบาย Scope/Feature, DESIGN.md ช่วยกำหนดทิศทาง UI และ AGENTS.md ช่วยกำหนดกติกาการทำงานให้ AI Coding Agent เพื่อให้ทำงานสอดคล้องกับโปรเจกต์มากขึ้น

เรียนได้นานแค่ไหน?

เข้าเรียนได้ทันทีหลังลงทะเบียน และสิทธิ์การเรียนไม่มีวันหมดอายุ สามารถย้อนกลับมาดูเนื้อหาได้ตามเวลาของตัวเอง

READY TO BUILD?

ไอเดียของคุณ ไม่จำเป็นต้องหยุดอยู่แค่ใน Figma หรือในหัว

เริ่มจากความเข้าใจที่ถูกต้อง แล้วใช้ AI ช่วยพา Design ไปสู่ Web App ที่ใช้งานได้จริง

Design to Web App with AI 2,490 บาท 10 Modules • 66 บทเรียน • ประมาณ 10 ชั่วโมง 5 นาที • ไม่มีวันหมดอายุ ลงทะเบียนเรียน ↗ มีคำถาม? คุยกับ Uncle Ake →