Vibe UX/UI Workshop · 2026
Design × AI
เรียนรู้ UX/UI + ใช้ AI ช่วยออกแบบ จนเปลี่ยนไอเดียเป็น Interactive HTML ส่งให้เดฟได้จริง
⏱️ 2 วันเต็ม
🛠️ Hands-on จริง
🤖 AI-Powered
💻 สำหรับสาย Dev
2 วันนี้เราจะไปไหนกัน
จากพื้นฐาน → ใช้ AI → ส่งมอบงานจริง
1
Day 1 — ดีไซน์เป็น เห็นภาพ ใช้ Figma ได้
ปูพื้นฐาน UX/UI → ฝึก "ตาดีไซน์" → ลงมือใช้ Figma & FigJam จริง
UX vs UI & บทบาทในทีม
ตาดีไซน์ + วิเคราะห์ Bad UX
User Inyerface Challenge
MoSCoW จัดลำดับฟีเจอร์
Figma & FigJam จากศูนย์
Wireframe Lo-fi → Hi-fi
2
Day 2 — AI → Interactive HTML → ส่งเดฟ
เปลี่ยนดีไซน์เป็นของจริงที่กดได้ แล้วส่งมอบให้เดฟใช้ต่อ
AI Landscape & Pipeline
Figma Make · Google Stitch · Claude
อ่าน/วิจารณ์งาน AI ออก
Prompt ให้ได้ HTML ที่ดี
ส่งมอบให้เดฟ (Handoff)
Capstone Project
⏱️ 2 วันเต็ม · 🛠️ ลงมือทำจริงทุกช่วง · 👥 มี Workshop กลุ่ม + Challenge ตลอดคอร์ส
จบคอร์สนี้ น้องจะทำอะไรได้
👁️ มี "ตาดีไซน์"
มองออกว่างานไหนสวย/ใช้ง่าย/ห่วย และบอกได้ว่าเพราะอะไร
🎨 ใช้ Figma & FigJam ได้
รู้จัก interface, ทำ wireframe และ brainstorm เป็น
🤖 ใช้ AI ช่วยออกแบบ
Figma Make, Stitch, Claude — generate แล้วสั่งแก้ให้ดีขึ้น
🚀 ส่งงานเป็น HTML
เปลี่ยนดีไซน์เป็น interactive HTML mockup ส่งให้เดฟใช้จริง
ยุคนี้ "เดฟ" ออกแบบเองได้แล้ว
AI ทำงานพิกเซลให้เร็วขึ้นเรื่อยๆ — สิ่งที่มีค่าขึ้นคือ "การตัดสินใจว่าอะไรดี"
🐢
เมื่อก่อน
• เดฟต้องรอดีไซเนอร์ส่งไฟล์
⚡
ยุค AI
• พิมพ์ prompt → ได้ UI ใน 10 วิกำกับ AI + ตัดสินงานเป็น
💡 AI ทำพิกเซลให้เร็วขึ้น — คุณค่าใหม่ของเดฟคือ "ตาดีไซน์" + ตัดสินใจว่าอะไรดี
วิธีติดตั้ง Figma
ติดตั้งให้พร้อมก่อนเริ่มลงมือ
💡 แนะนำ Desktop App + RAM 8GB ขึ้นไป เพื่อทำงานออกแบบหลัก
ลิงก์ประกอบการเรียน
เปิดเตรียมไว้ในแท็บ จะได้ทำตามทัน
Part 1 · Fundamentals
UX vs UI
"…there is a difference?" — ใช่ มันต่างกันจริงๆ มาดูกัน
User Experience
UX
การออกแบบ "ประสบการณ์" ผู้ใช้
"ประสบการณ์โดยรวมของผู้ใช้โต้ตอบ กับผลิตภัณฑ์หรือบริการ"
🔀 Flow การใช้งาน
User Journey
ใช้ง่าย · มีประโยชน์ · ตอบโจทย์
User Interface
UI
การออกแบบ "ส่วนติดต่อ" ผู้ใช้
"ส่วนของผลิตภัณฑ์ที่ผู้ใช้มองเห็น โต้ตอบ ได้จริงบนหน้าจอ"
🔘 องค์ประกอบ
Buttons & Icons
สวยงาม · ชัดเจน · สื่อสารดี
แล้วต่างกันยังไง?
🧠 UX Design
โฟกัสที่ "ประสบการณ์" — รู้สึก, ใช้ง่าย
ดูแล Flow ตั้งแต่ก่อน–ระหว่าง–หลังใช้
เน้น โครงสร้าง (Structure / IA)
🎨 UI Design
โฟกัสที่ "หน้าตา" — สวย, จัดวาง
องค์ประกอบที่โต้ตอบได้ (ปุ่ม/ไอคอน)
เน้น การนำเสนอ (Visual)
🛣️ UX = ทางที่คนเดินจริง · UI = ทางที่เราปูสวยๆ — ดีที่สุดคือตรงกัน
👥 ใครทำอะไรในทีม
🔍 UX วางโครงสร้าง → 🎨 UI ทำให้สวย
💻 Dev สร้างของจริง → 🍼 User คือปลายทาง
✨ ยุค AI: คนเดียวสวมหลายหมวกได้
บทบาท UX และ UI ในโปรเจกต์
🧩 UX: ผู้วางรากฐาน
รับผิดชอบการค้นหาปัญหา และวางโครงสร้างการใช้งาน
User Research
User Persona
User Journey
Information Architecture
Wireframing
Usability Testing
🎨 UI: ผู้สร้างสรรค์
รับผิดชอบการออกแบบหน้าจอให้สวยงาม และสื่อสารได้ชัดเจน
Visual Hierarchy
Color & Typography
Interactive Elements
Design System
Prototyping
Accessibility (a11y)
🗂️ 1. Wireframe / Structure
UX วางโครงร่าง & flow การใช้งาน
↓
🎨 2. Visual Design
UI ลงสี ฟอนต์ และองค์ประกอบ
↓
💻 3. Hand-off to Dev
ส่งต่อให้เดฟสร้างเป็นของจริง
ℹ️ UX วางโครงสร้างก่อน → ส่งต่อให้ UI ลงรายละเอียด
🤝 Teamwork: ทำงานวนลูป (Iterate) ร่วมกันตาม Feedback
Good UX is invisible —bad UX is unforgettable.
UX ที่ดีจะไม่มีใครสังเกต · แต่ UX ที่แย่จะจำไปตลอด
Train Your Eye 👁️
Bad UX
มาดูตัวอย่างจริง แล้วช่วยกันวิเคราะห์ว่า "พังตรงไหน"
FAIL
♿ ทางลาดสำหรับใคร?
🎯 ติดป้ายว่าเข้าถึงได้ แต่ชันจนรถเข็นขึ้นไม่ได้จริง
💡 ฟีเจอร์ที่ "มีแต่ใช้ไม่ได้" = ไม่ต่างจากไม่มี
FAIL
🚧 ทางม้าลายสู่...กำแพง
🔗 แต่ละส่วนถูก แต่ต่อกันไม่ได้ = flow ขาดตอน
💡 ต้องคิดทั้ง journey ไม่ใช่ทีละหน้าจอ
FAIL
🍵 แก้วน่ารัก...แต่ดื่มยังไง?
🎨 สวย ≠ ใช้ดี — ดีไซน์เก๋แต่ลืมหน้าที่หลัก
💡 กับดักคลาสสิกของ UI ที่ไม่มี UX
🍅 เปลี่ยนนิดเดียว ชีวิตดีขึ้น
😤 ฝาอยู่บน → ต้องเขย่า เคาะ ลุ้น
😎 ฝาอยู่ล่าง → คว่ำขวดไหลทันที
💡 UX ดีมัก "ปรับเล็กๆ" ที่แก้ปัญหาจริง
🔍 Group Brainstorm
UX/UI แย่ ๆ อยู่รอบตัวเรา มากกว่าที่คิด
ช่วยกันนึกถึงของใช้ / แอป / เว็บ / ป้าย ที่เคยเจอแล้ว "ใช้ยาก" หรือชวนหงุดหงิด → แปะลง FigJam board แล้วบอกหน่อยว่าพังตรงไหน และถ้าจะแก้ จะแก้ยังไง
👀 ฝึกสังเกตของรอบตัว
🧠 brainstorm บน FigJam
💬 บอกได้ว่าพังเพราะอะไร
เปิด FigJam Board →
🔥 UI ที่แย่ที่สุดในโลก
User Inyerface — เกมท้าประสาท
เว็บที่จงใจออกแบบ UI ให้ใช้ยากที่สุด! ลองเล่นแล้วน้องจะ "รู้สึก" ได้เลยว่า Bad UI ทรมานแค่ไหน — และเข้าใจว่าทำไม UX/UI ดีถึงสำคัญ
🎮 เริ่มเล่น
🏆 ใครเล่นจบภายใน 5 นาที มีของรางวัล!
User Persona คืออะไร
ตัวแทน "สมมติ" ของผู้ใช้กลุ่มหนึ่ง — สร้างจากข้อมูลจริง ไม่ใช่การเดา
ถ้าออกแบบให้ "ทุกคน" สุดท้ายจะไม่โดนใจใครเลย"ใคร"
🎭 ตัวแทนผู้ใช้จริง
รวมพฤติกรรมของคนกลุ่มหนึ่ง มาเป็น "คนคนเดียว" ที่จับต้องได้
📊 มาจากข้อมูล
สัมภาษณ์ · แบบสอบถาม · data การใช้จริง — ไม่ใช่จินตนาการ
🧭 เอาไว้ตัดสินใจ
เถียงกันน้อยลง เพราะอ้างอิงได้ว่า "แล้วผู้ใช้ของเราล่ะ?"
Persona มีอะไรบ้าง
ไม่ต้องครบทุกช่อง — เอาเท่าที่ช่วยให้ "ตัดสินใจ" ได้
🧑 ชื่อ + รูป
ทำให้รู้สึกเป็นคนจริง เรียกแทนได้ เช่น "พี่ฝ้าย 33"
📇 Demographic
อายุ อาชีพ ความถนัดเทคโนโลยี อุปกรณ์ที่ใช้
🎯 Goals
เขาอยากทำอะไรให้สำเร็จเมื่อใช้ผลิตภัณฑ์ของเรา
😤 Pain Points
อะไรที่ขัดใจ / หงุดหงิด / ทำให้เลิกใช้อยู่ตอนนี้
📱 Behavior & Context
ใช้ตอนไหน ที่ไหน อุปกรณ์อะไร เน็ตดีไหม
💬 Quote
หนึ่งประโยคจากปากเขา ที่สะท้อนตัวตน
⚠️ ระวัง: ถ้าเดาเอาเองโดยไม่มี research = แค่ "proto-persona" ใช้ตั้งสมมติฐานชั่วคราว ยังเชื่อ 100% ไม่ได้
ตัวอย่างจริง: ลูกค้า SUMDAY
การ์ดใบเดียว → กลายเป็นฟีเจอร์ในหน้าเว็บที่เราทำ
✨
⭐ ขาประจำตัวจริง
พี่ฝ้าย 🙋♀️
33 ปี · พนักงานออฟฟิศแถวพระราม 9
"ชีวิตขาดกาแฟไม่ได้! แต่คิวหน้าร้านน่ะเหรอ...ขอผ่านน้า 🙅♀️"
🎯 Goals
สั่งกาแฟล่วงหน้า แวะรับตอนพักเที่ยงได้พอดี · จ่ายเงินไว ๆ
😤 Pain Points
ขี้เกียจสมัครสมาชิก/โหลดแอป · คิวหน้าร้านยาว · ไม่อยากพกเงินสด
📱 Behavior
เปิดลิงก์จากมือถือ · จ่ายผ่าน PromptPay เป็นประจำ · สั่งช่วง 11:30–12:00
👨💻 Persona นี้ → ฟีเจอร์ใน SUMDAY
🚫 ขี้เกียจสมัครสมาชิก
→ "สั่งได้เลย ไม่ต้องสมัครสมาชิก" กรอกแค่ชื่อ+เบอร์
🏃 รีบ · ไม่อยากต่อคิว
→ สั่งล่วงหน้า + เลือก "รับเองที่ร้าน / ให้โทรกลับ"
💸 ไม่พกเงินสด
→ จ่าย PromptPay QR + แนบสลิป จบในมือถือ
📲 เปิดจากมือถือเป็นหลัก
→ mobile-first, รูปเมนูโหลดไว, ปุ่มสั่งซื้ออยู่ล่างจอ
🔗 รู้จัก user แล้ว → ขั้นต่อไปเอา Pain Points พวกนี้ไป จัดลำดับว่าทำอะไรก่อน ด้วย MoSCoW
จัดลำดับฟีเจอร์ด้วย MoSCoW
ของมีจำกัด เวลามีจำกัด — MoSCoW ช่วยให้ทั้งทีมเห็นตรงกันว่า "อะไรทำก่อน อะไรทำทีหลัง" แทนที่จะเถียงกันว่าฟีเจอร์ไหนสำคัญกว่า
📌 ตั้งต้นจาก Persona เสมอ: "Must / Should" วัดจาก Pain Points & Goals ของ user ที่เพิ่งทำ — ไม่ใช่ฟีเจอร์ที่เราชอบเอง
✅ Must Have — ต้องมี
หัวใจของระบบ ขาดไม่ได้เด็ดขาด ถ้าไม่มีคือ launch ไม่ได้ เช่น Login, ตะกร้า/สั่งซื้อ, ชำระเงิน
⭐ Should Have — ควรมี
สำคัญมากแต่ยังไม่ถึงตาย เลื่อนไปเฟสหน้าได้โดยระบบไม่พัง เช่น ค้นหา, ตัวกรอง, แจ้งเตือน
✨ Could Have — มีก็ดี
ของแถมที่เพิ่มความว้าว ไม่มีก็ไม่เป็นไร ทำเมื่อมีเวลา/งบเหลือ เช่น Dark Mode, ธีมสี, อนิเมชัน
🚫 Won't Have — ยังไม่ทำ
ตกลงร่วมกันว่า "รอบนี้ยังไม่ทำ" ไม่ใช่ไม่ดี แต่ขอเก็บไว้ก่อน เช่น หลายภาษา, ระบบ AI แนะนำ
💡 วิธีใช้จริง: ทำ Must ให้เสร็จก่อนเสมอ → ตั้งเวลา (time-box) แล้วค่อยไล่ Should → Could • ถ้าเวลาไม่พอ ตัดจากล่างขึ้นบน (Won't → Could → Should) อย่าแตะ Must
🧠 Group Brainstorm
คิด Product เว็บไซต์ของกลุ่ม + จัด MoSCoW
แบ่งกลุ่ม → ช่วยกันคิดเว็บไซต์/แอปที่อยากทำ → ลิสต์ฟีเจอร์ทั้งหมดลง FigJam → จัดลำดับด้วย MoSCoW ว่าอันไหน Must / Should / Could / Won't
👥 ทำเป็นกลุ่ม
🧠 ฝึก brainstorm บน FigJam
📊 ฝึกตัดสินใจ
เปิด FigJam Board →
Hands-on 🛠️
Figma
มาเริ่มลงมือใช้ Figma ตั้งแต่ศูนย์ไปด้วยกัน
ทัวร์หน้าตา Figma
🧰 Toolbar
Move, Frame, Shape, Pen, Text V F T
📚 Left Sidebar
จัดการ Layers, Pages, Assets
🎛️ Properties Panel
ปรับสี ขนาด เอฟเฟกต์ ทางขวา
🖼️ Frame & Canvas
Frame = Artboard ที่ใส่ UI ของเรา F
🧩 Assets & Libraries
คลังเก็บ Components ใช้ซ้ำได้
⚡ Quick Actions
หาเมนูไม่เจอ? กด ⌘ +/
Frame & รูปทรงพื้นฐาน
พื้นที่ทำงานหลัก + เครื่องมือสร้างรูปทรง
🖼️ Frame / Artboard F
คอนเทนเนอร์ใส่งาน ต่างจาก Group ตรงมี Constraints & Auto Layout
📐 Presets
ขนาดมาตรฐานเลือกได้ทันที — iPhone 14 (390×844), Pro Max (430×932), MacBook Pro 14″ (1512×982)
🔲 Rectangle R
พื้นหลัง / การ์ด / ปุ่ม — ปรับมุมโค้ง (Radius) ได้
⭕ Ellipse O
วงกลม / วงรี — ทำ Avatar, Badge, จุดแจ้งเตือน
⭐ Polygon / Star
หลายเหลี่ยม / ดาว — ปรับจำนวนเหลี่ยม (Count) ได้
↗️ Line / Arrow L
เส้นแบ่ง / ลูกศรชี้ตำแหน่ง (Arrow = Shift +L )
💡 กด Shift ค้างขณะลาก = รักษาสัดส่วน · Export ได้ทั้ง PNG / JPG / PDF / SVG
Pen, Text & Stroke
วาดเส้นอิสระ + คุมตัวอักษรและเส้นขอบ
✒️ Pen Tool P
วาด Vector แม่นยำ คุมจุด (Node) และเส้นโค้ง (Bezier) ได้ละเอียด
✏️ Pencil Shift +P
วาดมือเปล่า (Freehand) เหมาะสเก็ตช์ — ระบบเกลี่ยเส้นให้เรียบอัตโนมัติ
🔤 Text T
Font Family, Weight, Size, Line Height, Letter Spacing
📏 Text Resize
Auto Width / Auto Height / Fixed Size — คุมพฤติกรรมกล่องข้อความ
〰️ Stroke
ความหนา / สี-Gradient / Dash / หัวท้าย (Cap)
◻️ Stroke Align
Inside / Center / Outside — เส้นขอบอยู่ด้านในหรือนอกวัตถุ
💡 กด T สร้างข้อความ · กด / เปิดเมนูปรับค่าแบบละเอียด
Effects: เงา & เบลอ
เพิ่มมิติและความลึกให้งานออกแบบ
🟪 Drop Shadow
เงา "ด้านหลัง" วัตถุ ทำให้ดูลอยและมีมิติ — นิยมใช้กับ Card, Button, Modal
🔳 Inner Shadow
เงา "ภายใน" ให้ความรู้สึกยุบลง — นิยมใช้กับ Input หรือ Pressed State
💧 Layer Blur
เบลอทั้งวัตถุ ลดความคมชัด เพื่อลดความสำคัญหรือทำ Abstract Background
👓 Background Blur
เบลอสิ่งที่อยู่ "ด้านหลัง" (Glassmorphism) — ต้องลด Opacity ของ Fill ให้ < 100%
🎚️ Adjusting Values
ปรับ X, Y (ทิศทาง), Blur (ความฟุ้ง), Spread (ขนาดเงา)
🎨 Effect Styles
บันทึกการตั้งค่าเป็น Style ใช้ซ้ำได้ทันที ให้ความลึกสม่ำเสมอทั้งโปรเจกต์
💡 Spread ติดลบ = เงาเล็กลง · เก็บเป็น Effect Style ไว้ใช้ซ้ำ
Auto Layout คืออะไร
ระบบจัดวางเลเยอร์อัตโนมัติ — แนวคิดเดียวกับ flexbox / gap ใน CSS
คุณสมบัติที่ช่วยจัดวางองค์ประกอบภายใน Frame ให้เป็นระเบียบโดยอัตโนมัติ ตามทิศทางและระยะที่กำหนด
↕️ ทิศทาง (Direction)
เรียงแนวตั้ง / แนวนอน / ตัดบรรทัด (Wrap)
↔️ ระยะห่าง (Gap)
ช่องว่างระหว่างชิ้น — เท่ากันทุกชิ้นอัตโนมัติ
⬜ ระยะขอบใน (Padding)
ที่ว่างรอบเนื้อหาภายใน Frame
📊 การจัดแนว (Align)
ตำแหน่ง + การกระจายตัว (Distribution)
🪄 Key Benefit · Shift +A
ลดงานจัดระเบียบ · รองรับเนื้อหาแปรผันได้เอง
Resizing: Hug / Fixed / Fill
3 โหมดปรับขนาดของ Element — หัวใจของงาน Responsive
🤗 Hug Contents
กล่องโอบอุ้ม เนื้อหา ยืด/หดตามของข้างใน คงระยะ Padding เสมอ
Button · Tag · Chip 🔒 Fixed
ขนาดคงที่ ตามตัวเลข (เช่น 240px) ไม่เปลี่ยนตามเนื้อหา
Avatar · Icon · Sidebar ↔️ Fill Container
ลูกยืดเต็ม พื้นที่ที่เหลือใน Parent Frame อัตโนมัติ
Grid · Input · Card
💡 Fill ต้องใช้คู่กับ Auto Layout ของพ่อ — ขนาดจริง = (กว้างพ่อ − Padding − Gap) ÷ จำนวนลูก
Components คืออะไร
องค์ประกอบ UI ที่ใช้ซ้ำได้ — รากฐานของ Design System
แม่แบบหลักของ UI ที่นำกลับมาใช้ซ้ำได้ ลดงานซ้ำซ้อนและคุมความสม่ำเสมอ
🗄️ Source of Truth
แก้ที่ตัวแม่ (Main) ที่เดียว → ตัวที่ก๊อปไป (Instance) เปลี่ยนตามทั้งหมด
💠 Consistency
ดีไซน์สม่ำเสมอทั้งงาน ปุ่มหน้าตาเดียวกันทุกหน้า
♻️ Reusability
ดึงไปใช้ซ้ำได้ตลอด ไม่ต้องวาดใหม่
🗂️ Organization
จัดการ Assets เป็นระบบ หาง่าย แชร์ทีมได้
🧩 Common Examples → ต่อยอดเป็น Design System ใน Day 2
Buttons · Forms · Cards · Navbars
Lo-fi vs Hi-fi
"พิมพ์เขียว" ของหน้าจอ — วางโครงก่อนลงรายละเอียด
✏️
Low Fidelity
Rough · ขาว-ดำ
รวดเร็ว เรียบง่าย เน้นโครงร่าง
โฟกัสโครงสร้าง & Flow การใช้งาน
เหมาะช่วงเริ่มต้น / brainstorm
แก้ไขง่าย ไม่เสียดายของ
VS
🎨
High Fidelity
Polished · สมจริง
สวย สมจริง มีสี/ฟอนต์/รูปจริง
ระบุขนาด ระยะ Interaction ชัดเจน
เหมาะส่งเดฟ / ทำ Prototype
ใกล้เคียงของจริงมากที่สุด
🛠️ Mission
สร้าง Wireframe หน้าแรกของระบบกลุ่ม
เอา product ที่กลุ่มคิดใน FigJam มาวางเป็น wireframe ใน Figma — ใช้ AI ช่วยร่าง flow และ content ก่อนได้ แล้วจัด layout ด้วย Frame + Shape + Text
📱 Mobile + 💻 Desktop
⬜ Basic Shapes + Text
📊 เน้น Hierarchy & Flow
🤖 ใช้ AI ช่วยคิด content
สรุปวันแรก
👁️ ตาดีไซน์ + Bad UX
มองงานออก วิเคราะห์ได้ว่าพังตรงไหน
🧠 UX/UI & MoSCoW
เข้าใจบทบาท + จัดลำดับฟีเจอร์เป็น
🎨 Figma & FigJam
ใช้เครื่องมือพื้นฐาน + ทำ wireframe
🚀 พรุ่งนี้: AI → HTML
เปลี่ยนดีไซน์เป็นของจริงส่งเดฟ!
Day 2 · The Main Event 🎬
AI → HTML
เปลี่ยนไอเดียในหัว เป็น Interactive HTML ที่กดได้จริง
AI เข้ามาช่วยทุกขั้นแล้ว
💡 ไอเดีย
→
🧠 Research / Content
→
🎨 Generate UI
→
💻 HTML / Code
→
🤝 ส่งเดฟ
หน้าที่ของเราเปลี่ยนจาก "คนปั้น" → "ผู้กำกับ" ที่สั่งงานและตัดสินว่าอันไหนใช้ได้
เครื่องมือ AI ที่จะได้เล่น
🎨 Figma Make
prompt / เฟรม → prototype กดได้จริงพร้อมโค้ด ต่อยอดจากงาน Figma
Figma ในตัว 🧵 Google Stitch
พิมพ์ข้อความ/รูป → ได้ UI + โค้ด frontend วางกลับเข้า Figma ได้
ฟรี ✨ Claude (Artifacts)
prompt → interactive HTML ในหน้าเดียว — ตรงเป้า "ส่งเดฟ" สุด
พระเอก ⚡ v0 / Lovable
prompt → เว็บ/แอปที่รันได้ (React) สำหรับคนอยากไปไกลกว่า mockup
เสริม
Pipeline ของเรา
💭 คิดโจทย์ + flow
→
🤖 AI generate
→
👁️ วิจารณ์ + สั่งแก้
🪄 refine
→
💻 Interactive HTML
→
🤝 ส่งเดฟ
หัวใจอยู่ที่ขั้น "วิจารณ์ + สั่งแก้" — ใช้ตาดีไซน์จาก Day 1 ตรงนี้แหละ
🧵 ลองเล่นตัวแรก
Google Stitch — พิมพ์ → ได้ UI
ลองพิมพ์ prompt อธิบายหน้าจอที่อยากได้ (เช่น "หน้า landing ของแอปจองร้านอาหาร") แล้วดูว่า Stitch generate ออกมายังไง — ลองปรับ prompt ดูความต่าง
✍️ ฝึกเขียน prompt
🔄 ลองหลายเวอร์ชัน
📋 export ไป Figma/โค้ด
เปิด Google Stitch →
📋 ก๊อป Prompt ตัวอย่าง (เว็บจองโรงแรม) →
🎨 generate → prototype
Figma Make — จาก prompt สู่ของกดได้
ใช้ Figma Make สร้าง prototype ที่คลิกได้จริง แล้วฝึกสำคัญที่สุด: "อ่านงาน AI ออก" — งานที่ออกมาดีตรงไหน พังตรงไหน ควรสั่งแก้อะไร
🖱️ Prototype คลิกได้
👁️ ใช้ตาดีไซน์ตรวจ
💬 สั่งแก้เป็นภาษาคน
เปิด Figma Make →
📋 ก๊อป Prompt ตัวอย่าง (แอปดูดวง) →
✳️ สั่งเป็นภาษาคน → ได้ HTML ทั้งไฟล์
Claude — สร้าง Interactive HTML
บอก Claude ว่าอยากได้หน้าอะไร + แนบรูป/ดีไซน์ reference แล้วขอเป็น ไฟล์ HTML เดียวจบ (รวม CSS/JS ในไฟล์เดียว) เปิดดูได้ทันทีไม่ต้องติดตั้งอะไร จากนั้นสั่งแก้ทีละจุดจนเป๊ะ
📎 แนบรูป/บรีฟให้ครบ
📄 ขอ "ไฟล์เดียวจบ"
🪜 สั่งแก้ทีละสเต็ป
👁️ ใช้ตาดีไซน์ตรวจ
เปิด Claude →
Design System คืออะไร
ชุด "กติกาดีไซน์" ที่ใช้ซ้ำทั้งงาน — ยุค AI มันคือ ภาษากลางที่เราใช้สั่ง Claude
Claude สร้างหน้าสวยได้ใน 1 prompt... แต่ถ้าไม่มี Design System มันจะสร้างปุ่ม 10 แบบใน 10 หน้า "เป็นระบบเดียวกัน"
🧩 ชุดที่ใช้ซ้ำได้
สี · ตัวอักษร · ระยะ · ปุ่ม · การ์ด — กำหนดครั้งเดียว หยิบไปใช้ได้ทั้งงาน
🎯 แก้ที่เดียว เปลี่ยนทั้งระบบ
เปลี่ยนสีหลักจุดเดียว → ปุ่ม/การ์ด/ราคา เปลี่ยนตามทันทีทั้งเว็บ
🤝 ภาษากลางกับ AI & เดฟ
ส่ง "token" ให้ Claude/เดฟ → ได้งานที่กลมกลืน ไม่ต้องอธิบายสีทีละชิ้น
จาก Token สู่ทั้งเว็บ
เล็ก → ใหญ่ ประกอบกันเป็นชั้น ๆ
🎨 Tokens
→
🧩 Components
→
🧱 Patterns
→
📄 Pages
🎨 Tokens — DNA
ค่าพื้นฐานที่ใช้ซ้ำ เช่น --primary #2E42C9 · --r 18px ของ SUMDAY
ตัวแปร CSS 🧩 Components
ปุ่ม · การ์ดเมนู · badge — ประกอบขึ้นจาก token ชุดเดียวกัน
ใช้ซ้ำ 🧱 Patterns & Pages
เอา component มาเรียงเป็นหน้า เช่น หน้าเมนู SUMDAY ทั้งหน้า
ทั้งระบบ
🎛️ ลองของจริง
Live Token Playground — SUMDAY
ลากสไลเดอร์/เลือกสี แล้วดูปุ่ม การ์ด badge ของ SUMDAY เปลี่ยนพร้อมกันทั้งหน้า — นี่คือพลังของ Design System: แก้ token ที่เดียว เปลี่ยนทั้งระบบ แล้วคัดลอก tokens + prompt ส่งต่อให้เดฟ/AI ได้เลย
🎨 ลากเปลี่ยน token
🔁 สลับธีมทั้งแบรนด์
🤝 export ส่งเดฟ/AI
เปิด Token Playground →
"อ่านงาน AI ออก"
AI generate เร็ว แต่คนที่เก่งคือคนที่ วิจารณ์เป็น
1️⃣ Generate
ให้ AI ร่างมาก่อน อย่าเพิ่งคาดหวังเพอร์เฟกต์
2️⃣ Critique
เช็กด้วยตาดีไซน์: hierarchy? spacing? อ่านง่าย? flow ครบ?
3️⃣ Refine
สั่งแก้เจาะจง เช่น "เพิ่มระยะห่าง", "ปุ่มหลักเด่นกว่านี้"
🔁 วนซ้ำจนกว่าจะดี — นี่คือทักษะที่ AI แทนไม่ได้
Prompt ให้ได้ HTML ที่ดี
ใส่ให้ครบ ✅
หน้าจอ/หน้าที่ ชัด (เช่น dashboard)องค์ประกอบ ที่ต้องมีโทน/สไตล์ (modern, minimal)responsive + interactive
เทคนิคเสริม ⚡
ตัวอย่างจริง: Prompt → Output
พิมพ์บอก Claude แบบนี้ → ได้ไฟล์ HTML ที่เปิดดูได้เลยแบบนี้
✍️ สิ่งที่เราพิมพ์ (Prompt)
สร้าง เว็บไซต์ร้านกาแฟ เป็น ไฟล์ HTML เดียวจบ (รวม CSS + JS):
💬 "ทำให้สีสันสดใส มีคาแรกเตอร์น่ารักๆ หน่อย"
💬 "เพิ่มแถบเมนูด้านบน + ปุ่มตะกร้า 🛒"
💬 "ใส่โซน Best Sellers โชว์เมนูพร้อมป้าย 'ขายดี'"
📋 ดูตัวอย่าง Prompt เต็มๆ
✳️ Output จาก Claude
🛒 หน้าร้าน
coffee-landing.html
↗ คลิกเปิดจริง
🧾 หลังร้าน
sumday-backoffice/
↗ คลิกเปิดจริง
👉 ได้ไฟล์ .html เปิดดู/กดได้ทันที — ไม่ถูกใจตรงไหน สั่งแก้ต่อเป็นภาษาคน ได้เลย (เช่น "ทำปุ่มให้เด่นกว่านี้")
ส่งมอบให้เดฟยังไงดี
📄 ไฟล์ HTML
interactive mockup ที่เปิดดู/กดเล่นได้จริงในเบราว์เซอร์
🗺️ อธิบายโครงสร้าง
หน้าไหนทำอะไร, flow เชื่อมกันยังไง
🎯 จุดที่ต้องระวัง
state ต่างๆ, responsive, ปุ่มไหนทำอะไร
💜 mockup ที่กดได้จริง สื่อสารกับเดฟดีกว่าภาพนิ่ง 10 เท่า — เดฟเห็นปุ๊บเข้าใจปั๊บ
🏁 โปรเจกต์จบคอร์ส
ทำ Interactive HTML Mockup ของระบบตัวเอง
เอา product ที่กลุ่มคิดไว้ มาทำให้ครบ loop: idea → ใช้ AI generate → วิจารณ์ + refine → ได้ interactive HTML ที่พร้อมส่งเดฟจริง แล้วนำเสนอ!
💡 idea ของกลุ่ม
🤖 AI generate
🪄 refine ด้วยตาดีไซน์
💻 ส่งเป็น HTML
🎤 present
เรียนต่อได้ที่ไหน
📘 Figma Learn
help.figma.com — คอร์ส official ฟรี ครบทุกฟีเจอร์
🤖 ลองเล่น AI ทุกตัว
Figma Make · Stitch · Claude · v0 — ฝึก prompt บ่อยๆ
👁️ ฝึกตาดีไซน์
ดูงานดีๆ ทุกวัน (Mobbin, Dribbble) แล้วถามว่า "ทำไมมันดี"
🛠️ ลงมือทำโปรเจกต์จริง
วิธีเก่งเร็วสุดคือทำของจริงส่งทีม
Now Go Build! 🚀
น้องมีทั้งตาดีไซน์ Figma และ AI ครบมือแล้ว
✨
⭐ ขาประจำตัวจริง
