Giảng viên Khuê Đinh
Khóa 02 · Chuỗi AI-Driven Product DesignerKhai giảng 08/12

UI Foundation for AI-Driven Design

Nền tảng thẩm mỹ dành cho AI-Driven Product Designer

AI có thể dựng hàng loạt giao diện. Học nền tảng thiết kế UI để biết cách chọn màu, dùng chữ, xây bố cục và tạo nên thiết kế mang dấu ấn riêng.

8 buổiOnline · Google Meet
19:00 – 21:00thứ 3, thứ 5
3Visual Direction cho mỗi học viên
1UI library theo visual direction
Khuê ĐinhGiảng viên UI Design Foundation tại TELOS
Khuê ĐinhGiảng viên UI Foundation
Vì sao nên học khoá này

Giao diện nhìn ổn nhưng vẫn thiếu tính độc bản? Cái thiếu là gu, không phải tool

01

Chọn màu, chọn font theo cảm tính

Thấy đẹp thì dùng, nhưng chưa biết vì sao phù hợp với sản phẩm hay giải thích thế nào với đội ngũ.

02

AI làm nhanh, nhưng giao diện giống nhau

Thử nhiều prompt, ra nhiều phương án. Nhưng vẫn thiếu một thiết kế độc bản và đúng tinh thần thương hiệu.

03

Mỗi màn hình một kiểu

Màu sắc, khoảng cách, component thiếu nhất quán. Từng màn hình có thể đẹp, nhưng ghép lại chưa thành một sản phẩm đồng bộ.

79%

trang chủ trong top 1 triệu website có chữ tương phản thấp. Màu và chữ đúng nguyên lý vẫn là chuyện hiếm.

WebAIM Million 2025
Sau 8 buổi

Không chỉ thấy đẹp mà hiểu cách thiết kế đủ đẹp

Visual direction và UI library

Tự định hướng phong cách thiết kế và xây dựng bộ UI nhất quán cho portfolio cá nhân

Typography có hệ thống

Biết chọn font, phối chữ và tạo hệ thống typography dễ đọc, rõ ràng trên từng màn hình.

Màu sắc có chủ đích

Tạo bảng màu Light & Dark, dùng semantic color và kiểm tra độ tương phản.

Cách sử dụng AI mở rộng ý tưởng

Dùng AI khám phá moodboard, thử nhiều hướng thiết kế và chọn phương án phù hợp nhất.

Layout & Component nhất quán

Làm chủ grid, spacing và component để xây giao diện gọn gàng, có hệ thống trong Figma.

Lộ trình 8 buổi

Luyện mắt trước, mở rộng bằng AI sau

Giai đoạn 1 · Nguyên lý thị giác
01

Phương pháp luyện mắt

Đánh giá design, copywork, tìm cảm hứng, kiến thức nền về màn hình

02

Typography

Font size, line height, chọn và kết hợp font, chữ trong bảng

03

Color

RGB / HSB, contrast, tạo palette, semantic color, dark mode

04

Nguyên tắc layout

Box model, grid, alignment, space system, làm việc với hình ảnh

Giai đoạn 2 · Khám phá cùng AI
05

AI Explore Idea 1

Từ brief ra moodboard và 3–5 hướng visual. Thoát khỏi giao diện "trung bình"

06

Component & UI Library

Button, form, card, modal, menu. Cấu trúc library và document

Giai đoạn 3 · Từ style đến giao diện
07

AI Explore Idea 2

AI dựng 3 phương án màn hình, so sánh và chỉnh tay. Kiểm tra bằng DevTools

08

Trình bày cuối khóa

Trình bày sản phẩm và quá trình khám phá cùng AI

Buổi nguyên lýBuổi khám phá cùng AITrình bày cuối khóa
Xem chi tiết nội dung từng buổi
Chi tiết nội dung giáo trình

Bạn sẽ được học những gì

Kiến thức ngập ngụa trong các buổi học và vô vàn các thông tin đính kèm, thật ra chúng mình lo là các bạn không có thời gian học nhiều hơn là học không đủ.

8 buổi48 nội dung chính6 bài tập1 buổi cột mốc
01
Buổi 01 · Giai đoạn 1 · Nguyên lý thị giác

Phương pháp luyện mắt

Bạn sẽ học

  • Phương pháp tự học để có thể tiếp tục phát triển trong ngành UI design
  • Đánh giá một design
  • Copy work như một phương pháp để luyện tập về design
  • Các nguồn tìm cảm hứng thiết kế
  • Phương pháp ghi chú, lưu trữ thông tin khoa học để không bị bí ý tưởng khi bắt đầu một dự án mới
  • Giới thiệu sách, tài liệu và một số khóa học khác dùng để tham khảo
  • Bắt đầu khóa học với một số thông tin cơ bản cần nắm khi design trên môi trường digital
02
Buổi 02 · Giai đoạn 1 · Nguyên lý thị giác

Typography

Bạn sẽ học

  • Tầm quan trọng của typography đối với UI Design
  • Các yếu tố setting căn bản đối với typography: Font size, Line height, Line length, Text Align
  • Cách chọn font và kết hợp font để phù hợp với từng thiết kế
  • Typography sử dụng trong design table
  • Typography sử dụng như một yếu tố tăng tính thẩm mỹ cho UI design: Smallcap, Dropcap, Ruler
  • Các nguồn tư liệu để nâng cao khả năng về typesetting
  • Dùng AI gợi ý cặp font và type scale, rồi tự kiểm tra lại bằng mắt và nguyên tắc vừa học AI

Bài tập & thực hành

  • Thực hành design một screen thiên về nội dung (blog page, content page...) sử dụng những kiến thức đã học trong buổi 2
03
Buổi 03 · Giai đoạn 1 · Nguyên lý thị giác

Color

Bạn sẽ học

  • 3 hệ màu sử dụng trong UI design
  • Contrast trong UI design
  • Các cách để tạo nên một palette màu sử dụng trong UI design: Modify thủ công, Sử dụng tool
  • Semantic color system trong Figma
  • Gradient: Easing Gradient, Modify gradient
  • Tìm hiểu về Darkmode
  • Dùng AI gợi ý palette từ một từ khóa thương hiệu, sau đó kiểm tra contrast và chỉnh tay AI

Bài tập & thực hành

  • Thực hành Design palette màu sử dụng cho một UI design tự chọn, cho 2 phiên bản: light mode và dark mode
04
Buổi 04 · Giai đoạn 1 · Nguyên lý thị giác

Nguyên tắc layout

Bạn sẽ học

  • Qui trình design
  • Box model
  • Grid trong UI
  • Alignment trong UI
  • Space system
  • Làm việc với hình ảnh: Thay đổi màu ảnh, Cắt ảnh, Cách chọn ảnh

Bài tập & thực hành

  • Thực hành Phân tích layout một website dựa theo các kiến thức đã học
05
Buổi 05 · Giai đoạn 2 · Khám phá cùng AI

AI Explore Idea 1

Có AI

Dùng AI để mở rộng không gian ý tưởng, không để AI quyết định thay mình.

Bạn sẽ học

  • Viết brief thiết kế đủ rõ để AI hiểu: mục tiêu, người dùng, cảm xúc thương hiệu, ràng buộc
  • Dùng AI tạo moodboard và 3–5 hướng visual (visual direction) khác nhau từ cùng một brief
  • Nhận diện giao diện "trung bình" do AI tạo ra và cách đẩy kết quả ra khỏi lối mòn
  • Đánh giá từng hướng visual bằng các nguyên lý typography, màu và layout đã học
  • Chọn 1 hướng visual và lý giải được vì sao chọn

Bài tập & thực hành

  • Từ một brief, tạo moodboard và 3 hướng visual, trình bày lý do chọn 1 hướng
06
Buổi 06 · Giai đoạn 2 · Khám phá cùng AI

Component & UI Library

Bạn sẽ học

  • Các component thường gặp trong UI: Button, Form, Card, Modal, Menu
  • Slot technique ứng dụng trong design table
  • Giới thiệu cấu trúc một UI Library
  • Cách tạo document cho một UI Library trong Figma
  • Giới thiệu một số plugin, tips trick phụ trợ cho việc design một UI Library
  • Dùng AI rà soát cách đặt tên và độ đầy đủ các state của component trong library AI

Bài tập & thực hành

  • Thực hành Research các component thường gặp trong một UI design và design các component đó
  • Thực hành hoàn thiện hệ thống UI Library với các component đã research ở phần trước
07
Buổi 07 · Giai đoạn 3 · Từ style đến giao diện

AI Explore Idea 2

Có AI

AI dựng nhanh nhiều phương án, designer so sánh, chọn lọc và chỉnh tay đến khi đúng ý.

Bạn sẽ học

  • Tại sao công việc của designer không chỉ là design
  • Những kiến thức và kỹ năng cần có để làm việc tốt với developer
  • Sử dụng Chrome Developer Tool + Visbug để kiểm tra layout website
  • Sử dụng Chrome Developer Tool hoặc Visbug để so sánh giữa design đã làm ở buổi 1 với trang web thực tế
  • Dùng AI dựng 3 phương án màn hình dựa trên visual direction và UI library đã có
  • So sánh các phương án theo tiêu chí rõ ràng, chọn lọc và chỉnh tay phần AI làm chưa tới
08
Buổi 08 · Giai đoạn 3 · Từ style đến giao diện

Trình bày cuối khóa

Cột mốc

Bạn sẽ học

  • Bài cuối khóa
  • Trình bày sản phẩm đã chọn ở buổi 1
  • Đánh giá và đề xuất hoàn thiện
  • Trình bày quá trình khám phá cùng AI: AI đã giúp gì, chỗ nào designer phải quyết định AI
Dành cho ai

Biết dùng Figma rồi? Học cách hiểu vì sao thiết kế đẹp.

Đã học Figma cơ bản

Biết dùng công cụ nhưng muốn nâng thẩm mỹ, chọn màu, phối chữ và bố cục có cơ sở hơn.

Graphic designer chuyển sang UI

Có nền tảng thiết kế đồ họa, muốn áp dụng tư duy thị giác vào giao diện web, app và component.

Developer, PO muốn có gu

Làm việc với giao diện mỗi ngày, muốn biết cách đánh giá và góp ý thiết kế rõ ràng hơn.

Người chuyển ngành

Muốn bắt đầu với nền tảng thiết kế UI vững chắc, thay vì chỉ học cách sử dụng Figma.

Chưa phù hợp nếubạn đã tự dựng UI library và visual direction cho một sản phẩm đang chạy. Lúc đó bạn nên học khóa Design System for AI-Driven Design.

Khuê Đinh
Giảng viên

Khuê Đinh

Đinh Đỗ Quang Khuê. Người xây giáo trình UI Design Foundation của TELOS.

8buổi luyện mắt có bài tập
8năm kinh nghiệm
8khóa đã đứng lớp tại TELOS

Làm một giao diện đẹp sẽ là cái phân định một người có chuyên môn với một người chỉ có thể prompt ra sản phẩm đại trà. Đây sẽ làm một điểm giúp bạn cạnh tranh trong thời đại AI này

Đầu ra của học viên

Case study thật ở portfolio cá nhân

Chuỗi AI-Driven Product Designer

Bước thứ hai của 8 bước

01

AI & Tools Foundation

Công cụ
02

UI Foundation

Bạn ở đây
03

UX Foundation

Trải nghiệm
04

Design System

Hệ thống
05

AI Process & Project

Dự án
06

Code 4 Designer

Code
07

Portfolio With AI

Portfolio
08

Product Design & Manage

Chiến lược

Sau công cụ là thẩm mỹ: nền để bạn đánh giá được mọi giao diện, kể cả giao diện AI làm. Học theo lộ trình được giảm 10–30%.

Hiểu ý nghĩa của lộ trình học
Học phí

Xứng đáng cho từng giờ học

Khóa lẻ
4.030.000 VNĐ
  • 8 buổi live qua Google Meet, 19:00–21:00
  • Bài tập sau mỗi buổi, giảng viên góp ý trực tiếp
  • Giấy chứng nhận khi đạt yêu cầu đầu ra
  • Cộng đồng Discord: hỏi đáp, tin tuyển dụng
Đăng ký giữ chỗ

Outline và tài liệu tham khảo

Danh sách nguồn cảm hứng, sách và website để luyện mắt sau khóa

Template UI library trên Figma

Khung library đã dựng sẵn cấu trúc, bạn chỉ việc điền component

Ưu đãi lộ trình

Đăng ký nhiều khóa trong chuỗi được giảm 10–30%

Tool AI bản miễn phí là đủ

Gemini và Figma Make bản miễn phí đủ dùng cho buổi 5 và 7

Học theo lộ trình

Học từ 2 khóa trở lên để được ưu đãi hơn

Khóa này đã được chọn sẵn. Thêm khóa khác trong chuỗi để xem mức giảm, tối đa 30%.

Chọn nhanh:

Câu hỏi thường gặp

01. Tôi chưa biết gì cả liệu có học được không?

02. Có bài làm đầu ra cuối khóa không?

03. Tôi có được hỗ trợ sau khóa học không?

04. Một lớp có tối đa bao nhiêu học viên?

05. Trung tâm có nhận dạy 1 kèm 1 không?

06. Quy trình đăng ký và vào học như thế nào?

07. Có xuất hóa đơn VAT không?

08. Review, Đánh giá khóa học Figma dành cho Designer và Developer tại TELOS Academy

Zalo