ผมใช้ AI ช่วยสร้าง UI & Design System ภายในไม่กี่นาที
🔥 ตัวอย่างในภาพนี้ ผมใช้ AI ช่วยสร้างภายในไม่กี่นาที
.
ไม่ว่าจะเป็น Design System, Design Tokens, Variables, Text Styles, Components, Variants, Auto Layout รวมถึง UI Screens
.
หลายคนถามว่า
คอร์ส Unlock Skill UXUI สอนใช้ AI ไหม?
.
✅ คำตอบคือ สอนครับ
.
แต่เราไม่ได้สอนแค่ว่า “ใช้ AI ยังไง”
.
♥️ เราสอนให้เข้าใจ Foundation ของ UX/UI ก่อน
เพื่อให้ใช้ AI ได้เร็วขึ้น ถูกขึ้น และรู้ว่าอะไรควรทำหรือไม่ควรทำ
.
เพราะถ้าไม่เข้าใจพื้นฐาน
ไม ่เข้าใจ Design Tokens
ไม่เข้าใจ Variables
ไม่เข้าใจ Component Structure
ไม่เข้าใจ Auto Layout
.
เราอาจสร้างงานได้เร็ว
🚨 แต่จะไม่รู้ว่างานนั้น “ถูกหรือผิด”
ไม่รู้ว่าจะแก้ยังไง
และไม่รู้ว่าจะต่อยอดยังไง
.
สิ่งที่น่ากลัวที่สุดไม่ใช่ AI
แต่คือการใช้ AI สร้างงาน
โดยไม่เข้าใจสิ่งที่ตัวเองกำลังสร้าง
.
🚨 เหมือนสร้างบ้านที่ดูสวย
แต่โครงสร้างไม่แข็งแรง รอวันถล่มลงมา
.
AI ช่วยให้เราทำงานเร็วขึ้น
แต่ Foundation ทำให้เราออกแบบได้จริง
.
.
.
👉 ใครอยากเรียน UX/UI แบบเข้าใจ Foundation ตั้งแต่ UX Research, UX Design, UI Design, Design System, Design Tokens, Figma ไปจนถึง Portfolio
.
👉 สำรองที่นั่ง/สอบถามข้อมูลเพิ่มเติม ทาง IB เพจได้เลย
.
#uxuistudio #uxdesign #uidesign #graphicdesign #uxui #uxuiworkshop #uxworkshop #uiworkshop
#designsystem #designtokens #componentdesign #productdesign #figma #aiuxui
#vibedesign #vibecode #aitools #productdesign
#เพราะเราเข้าใจว่ามือใหม่ต้องการอะไร
#UXUISTUDIO #UXUIDesign #UXUI #UXUIDesigner #Portfolio
คำถาม “ออกแบบ Website UI ด้วย Illustrator ได้ไหม?” ตอบแบบสั้นคือ “ได้” ครับ แต่ต้องรู้ข้อจำกัดและเลือกให้เหมาะกับเป้าหมายงาน ไม่งั้นจะทำงานเร็วช่วงแรก แต่พอแก้/ส่งต่อ/ทำเป็นระบบจะเริ่มเจ็บหนัก ผมเคยใช้ Illustrator ทำ UI ช่วงที่ทีมยังเล็ก และงานเป็นหน้า Landing Page ง่ายๆ ข้อดีคือวาดกราฟิกสวย คุมงานภาพ/ไอคอน/โปสเตอร์ได้ดี เครื่องมือ Pen/Shape/Gradient ทำงานไวสำหรับงานภาพ และถ้าคุณถนัด Illustrator อยู่แล้วก็เริ่มได้ทันที แต่พอเป็น “Website UI จริงจัง” ที่ต้องทำหลายหน้า หลายสถานะ (States) และต้องส่งต่อให้ทีม/Dev ข้อจำกัดจะชัดมาก เช่น - การทำ Components/Variants ไม่ลื่นเท่าเครื่องมือสาย UI โดยตรง ทำให้รักษาความสม่ำเสมอยากขึ้น - การทำ Auto Layout/Responsive thinking ทำได้แต่ไม่เป็นธรรมชาติเท่า Figma (หรือเครื่องมือที่เน้น Layout) - การจัดการ Design System ระดับ Variables/Tokens (เช่น สี neutral/01, brand indigo/600, text styles 2xl/3xl ฯลฯ) ทำได้แบบ “ตั้งชื่อเลเยอร์/สวอตช์” แต่การเชื่อมเป็นระบบเพื่อสเกลทั้งโปรดักต์ค่อนข้างลำบาก - Handoff ให้ Dev (สเปซซิ่ง, ขนาด, สไตล์, สถานะคอมโพเนนต์) มักต้องทำเอกสารเพิ่ม และเสี่ยงคลาดเคลื่อน ถ้าคุณจำเป็นต้องใช้ Illustrator (เช่น โปรเจกต์เน้นภาพหรือแบรนด์อาร์ตหนักๆ) ผมแนะนำแนวทางนี้เพื่อให้ใกล้เคียงงานระบบมากขึ้น: 1) ตั้ง Color Styles ให้เป็นโครงสร้าง: แยกกลุ่ม neutral/brand/status และตั้งชื่อสม่ำเสมอ (เช่น neutral/50, brand/primary) 2) ทำ Text Styles เป็นชุด: heading, body, caption พร้อมกำหนดขนาด/น้ำหนัก/line-height ให้ชัด 3) ทำคอมโพเนนต์แบบ “ต้นแบบ”: ปุ่ม, input, card แยก state (default/hover/disabled) และล็อกกติกา spacing 4) สร้าง DS-Guide หน้าเดียว: รวมสไตล์หลักทั้งหมดไว้เป็น reference กันหลุด อย่างไรก็ตาม ถ้าโจทย์คือ “ทำ Website UI เพื่อพัฒนาและสเกลต่อ” ผมมักเลือก Figma เป็นหลัก เพราะจัดการ Components, Variants, Auto Layout, Variables และ Design Tokens ได้ตรงทางกว่า และทีมทำงานร่วมกันง่ายกว่า ส่วน AI ใช้ช่วยได้มากในขั้น “เร่งสปีด” เช่น ช่วยแตกไอเดียหน้าจอ, ร่างโครง UI, หรือช่วยตั้งต้นชุดสไตล์ แต่สิ่งที่ผมย้ำเสมอคือ ต้องเข้าใจ Foundation ก่อน: โครงสร้างคอมโพเนนต์, ระบบตัวแปร/โทเคน, หลักการจัดเลย์เอาต์และลำดับชั้นตัวอักษร ไม่งั้น AI จะให้ของที่ดูสวยแต่ต่อยอดยาก (เหมือนสร้างบ้านสวยแต่โครงไม่แข็งแรง) สรุปให้เลือกง่ายๆ: - ใช้ Illustrator: เหมาะกับงานหน้าเดียว/กราฟิกหนัก/ทำภาพประกอบประกบ UI - ใช้ Figma: เหมาะกับ Website UI ที่ต้องทำเป็นระบบ มี design system, tokens, components และทำงานกับทีม/Dev - ใช้ AI: เหมาะเป็นตัวช่วย “ทำให้เร็วขึ้น” แต่ต้องมีพื้นฐาน UX/UI และระบบดีไซน์คุมคุณภาพ ถ้าคุณบอกได้ว่าโปรเจกต์เป็นเว็บประเภทไหน (Landing, E-commerce, SaaS) และต้องส่งต่อให้ Dev แบบไหน ผมช่วยแนะนำ workflow ที่เหมาะที่สุดได้ครับ
