เปลี่ยนไอเดียของคุณ
ให้เป็น Web Application
ที่ใช้งานได้จริงด้วย AI
เรียน Workflow แบบครบเส้นทาง ตั้งแต่ Product Structure, UX/UI, Vibe Design ไปจนถึง Vibe Code, Test และ Deploy โดยสร้างโปรเจกต์จริงไปพร้อมกัน
WHY THIS COURSE
Vibe Coding ไม่ควรเริ่มที่การสั่ง AI เขียน Code ทันที
ถ้าไม่มี Product Structure, UX/UI และ Design Direction ที่ชัด AI จะต้องเดาเองมากขึ้น ส่งผลให้หน้าตาไม่ตรง Design, Component ไม่สม่ำเสมอ และแก้งานวนซ้ำ คอร์สนี้จึงเริ่มจากการคิดให้ชัดก่อน แล้วค่อยให้ AI ช่วย Build
คิด Product ให้ชัด
กำหนด Problem, Goal, Scope, Users, Pages และ User Flow ก่อนเริ่มออกแบบ
ออกแบบก่อน Build
สร้าง Design Foundation และ UI ใน Google Stitch เพื่อให้มีต้นฉบับที่ชัดเจน
ให้ AI ยึด Design จริง
เชื่อม Stitch ผ่าน MCP แล้วใช้ Codex ช่วยสร้าง React App โดยไม่ปล่อยให้ AI เดาหน้าตาเอง
OUTCOME
เรียนจบแล้ว คุณจะเห็นภาพทั้งกระบวนการตั้งแต่ต้นจนจบ
เป้าหมายไม่ใช่แค่ “ใช้ AI เป็น” แต่คือเข้าใจว่าควรคิด ออกแบบ สั่ง และตรวจงาน AI อย่างไรให้กลายเป็น Product ที่ใช้งานได้จริง
วางโครงสร้าง Web App
เปลี่ยนไอเดียให้เป็น Scope, Pages, User Flow และ Requirements ที่ AI เข้าใจได้
สร้าง Design Foundation
กำหนด UI direction และ DESIGN.md ก่อนเริ่ม Vibe Design และ Vibe Code
ออกแบบด้วย AI
ใช้ Google Stitch สร้างและปรับ UI อย่างมีระบบ ไม่ให้แต่ละหน้าหลุด Style
เชื่อม Design สู่ Code
ใช้ MCP ให้ AI Coding Agent อ่าน Design จากต้นทางแทนการเดาจากภาพอย่างเดียว
สร้าง React Web App
ใช้ Cursor + Codex ช่วยวางโครงสร้าง Components, Routes, Data และลงมือ Build
Test และ Deploy
ตรวจความตรงกับ Design, Production Build, GitHub และ Deploy ขึ้น Vercel
THE WORKFLOW
จากไอเดีย
ไปจนถึง Web App
เรียนเป็นลำดับเดียวกับการทำงานจริง เพื่อให้เห็นว่าทุกขั้นตอนเชื่อมต่อกันอย่างไร
เริ่มเรียน Workflow นี้ →Problem & Goal
เข้าใจปัญหา เป้าหมาย และผู้ใช้
Product Structure
Scope, Pages, Flow และ Requirements
Design Foundation
Design direction, UI rules และ DESIGN.md
Vibe Design
สร้าง UI ด้วย Google Stitch
Stitch MCP
เชื่อม Design เข้า Coding Environment
Vibe Code
สร้าง React App ด้วย Cursor + Codex
Review & Test
เช็ก Design, Error และ Production Build
Deploy
GitHub และ Vercel
PROJECT-BASED LEARNING
เรียนผ่านการสร้าง ClientFlow Web Application จริง
ตัวอย่างในคอร์สเป็นระบบบริหารลูกค้า โปรเจกต์ งาน และ Follow-up ทำให้ได้ฝึกทั้ง Product Thinking, UX/UI และการสร้าง Functional Prototype ด้วย Code
- Dashboard & Metrics
- Clients & Client Detail
- Projects
- Tasks & Follow-ups
- Search & Filter
- LocalStorage CRUD
- Import / Export JSON
- Deploy Live URL
CURRICULUM
เนื้อหาครบทั้ง
Design และ Build
เนื้อหจัดเต็มกว่า 9 ชั่วโมง แบ่งเป็น 9 Modules เรียนตามลำดับหรือย้อนกลับมาดูเฉพาะหัวข้อที่ต้องการได้
ภาพรวม Workflow, แนวคิด Vibe Design / Vibe Code และการทำงานร่วมกับ AI ในแต่ละขั้นตอน
Problem, Goal, Scope, Target Users, User Flow, Page Requirements และการเตรียม PRODUCT/PROJECT context
กำหนด Design Direction, Style Guide, UI rules และ DESIGN.md เพื่อให้ AI มีกรอบการออกแบบที่ชัดเจน
Prompt ออกแบบหน้าจอ, คุม Visual Consistency และสร้าง UI Version แรกของ ClientFlow
Node.js, Vite, Cursor และพื้นฐาน Environment ที่ต้องใช้ก่อนเริ่ม Coding
PROJECT.md, DESIGN.md, Stitch MCP, Pages / Routes / Components, Data Structure และ AGENTS.md
สร้าง React + Vite, App Layout, Tokens, Shared Components และ Feature หลักด้วย AI Coding Agent
เช็ก UI ให้ตรง Design, ตรวจ Error, ปรับ Responsive, Test Flow และ Production Build
จัดการ Git ขั้นพื้นฐาน, Push Project ขึ้น GitHub และ Deploy Web Application ไปยัง Vercel
WHO IS THIS FOR?
คอร์สนี้เหมาะกับคนที่อยากไปไกลกว่าแค่ “ออกแบบหน้าจอ”
UX/UI Designer
อยากต่อยอดจาก Design ไปสู่การสร้าง Functional Web App ด้วย AI
Product Designer / PO
อยากเข้าใจภาพรวมตั้งแต่ Product Structure ไปจนถึง Build และ Deploy
ผู้เริ่มต้น Vibe Coding
ยังไม่รู้ว่าจะเริ่มจาก Prompt, Design หรือ Code ก่อน และอยากได้ Workflow ที่ชัดเจน
Freelancer / Creator
มีไอเดีย Digital Product และอยากทำ Prototype หรือ Web App ได้ด้วยตัวเองมากขึ้น
WHAT YOU GET
ไม่ได้มีแค่วิดีโอ
แต่มีไฟล์ให้คุณเอาไปใช้ต่อ
ตัวอย่างและ Template ในคอร์สช่วยให้คุณนำ Workflow ไปประยุกต์กับโปรเจกต์ของตัวเองได้ง่ายขึ้น
PROJECT / PRODUCT Template
โครงสร้างบริบทของ Product สำหรับ AI
DESIGN.md Template
แนวทางกำหนด Design Foundation และ UI rules
AGENTS.md Template
กฎการทำงานสำหรับ AI Coding Agent
ClientFlow Example
ตัวอย่าง Workflow และ Web Application ที่สร้างระหว่างเรียน
INSTRUCTOR
เรียนกับ Uncle Ake
คอร์สนี้ถูกออกแบบจากมุมมองของคนที่ทำทั้ง UX/UI, Product และนำ AI มาใช้กับกระบวนการสร้าง Digital Product จริง
จุดเน้นจึงไม่ใช่การจำ Prompt หรือผูกตัวเองกับเครื่องมือใดเครื่องมือหนึ่ง แต่คือเข้าใจ Workflow ว่าเมื่อไรควรคิดเอง เมื่อไรควรให้ AI ช่วย และตรวจงานอย่างไรให้ยังคงคุณภาพของ Design และ Product
READY TO BUILD?
เริ่มจากไอเดีย
แล้วสร้าง Web App ของคุณเอง
เรียนออนไลน์ เข้าเรียนได้ทันที และกลับมาทบทวน Workflow ได้เมื่อคุณเริ่มโปรเจกต์ใหม่
กรอกข้อมูล → ชำระเงินตามขั้นตอน → ทีมงานตรวจสอบ → เปิดสิทธิ์เรียน
FAQ
คำถามที่พบบ่อย
คำตอบสั้น ๆ ก่อนตัดสินใจเริ่มเรียน
ได้ครับ เนื้อหาออกแบบให้เห็นภาพตั้งแต่ Product, Design ไปจนถึง Code โดยใช้ AI ช่วยเป็นขั้นตอน แต่ผู้เรียนควรพร้อมลองทำตามและเรียนรู้พื้นฐานใหม่ระหว่างทาง
ไม่จำเป็น Workflow หลักสามารถทำบน Windows หรือ macOS ได้ ขอเพียงติดตั้งเครื่องมือที่ใช้ในบทเรียนได้
ตัวอย่างหลักใช้ Google Stitch, Cursor และ Codex ร่วมกับ Vite, React, GitHub และ Vercel โดยเน้นหลักการที่นำไปปรับกับ Tool อื่นได้
กดสมัครเรียนไปยัง Google Form กรอกข้อมูลและชำระเงินตามรายละเอียด จากนั้นทีมงานตรวจสอบและเปิดสิทธิ์เรียนในระบบ Course Platform