I used AI to create the UI & Design System in a few minutes.
🔥 example in this picture, I used AI to create it in a few minutes.
.
Whether it's Design System, Design Tokens, Variables, Text Styles, Components, Variants, Auto Layout, as well as UI Screens.
.
Many people ask,
Does the Unlock Skill UXUI teach you to use AI?
.
✅ The answer is teach.
.
But we don't just teach you how to use AI.
.
♥️ We teach you to understand the UX / UI Foundation first.
To use AI faster, cheaper, and know what to do or not to do.
.
Because if you don't understand the basics,
Don't understand Design Tokens
Don't understand Variables.
Don't understand Component Structure.
Don't understand Auto Layout
.
We may create jobs quickly.
🚨 but won't know if the job is "right or wrong."
Don't know how to fix it
And don't know how to build it.
.
The scariest thing is not AI.
But it is the use of AI to create jobs.
Without understanding what they are creating.
.
🚨. It's like building a beautiful house.
But the structure is not strong, waiting for the day to collapse.
.
AI helps us work faster.
But the Foundation actually made us design
.
.
.
👉 Who wants to learn UX / UI Insight Foundation, from UX Research, UX Design, UI Design, Design System, Design Tokens, Figma to Portfolio?
.
👉 Reserve your seat and ask for more information on the IB page.
.
# uxuistudio # uxdesign # uidesign # Graphicdesign # uxui# uxuiworkshop # uxworkshop # uiworkshop
# designsystem # designtokens # <--plhd--19/> entdesign # productdesign # figma # aiuxui
# vibedesign # vibecode # aitools # productdesign
# Because we understand what newbies want
# 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 ที่เหมาะที่สุดได้ครับ
