Design System for AI-Driven Design

Bạn sẽ học

• Design System là gì? Tại sao cần Design System?
• Phân biệt UI, UI Kit, Style Guide và Design System
• Cấu trúc cơ bản của một Design System
• Design System giải quyết những vấn đề gì trong quá trình thiết kế và phát triển sản phẩm?
• Giới thiệu tư duy system thinking trong design
• AI cũng là một "người dùng" của Design System: vì sao cấu trúc rõ ràng giúp AI tạo UI đúng chuẩn

Hiểu cách biến một bảng màu nói chung thành một color system có cấu trúc và khả năng mở rộng.

Bạn sẽ học

• Foundation là gì? Vai trò của Foundation trong Design System
• Phân biệt color palette và color system
• Xây dựng color scale và color hierarchy
• Các loại màu: Brand, Neutral & Semantic colors
• Cách đặt tên và tổ chức color token
• Nguyên tắc cơ bản về contrast và accessibility
• Thiết lập color system cho cả light mode và dark mode
• Dùng AI hỗ trợ sinh color scale và gợi ý cách đặt tên token, sau đó kiểm tra contrast

Xây dựng hệ thống typography và spacing tạo nên hierarchy, rhythm và tính nhất quán cho giao diện.

Bạn sẽ học

• Vai trò của typography trong việc xây dựng hierarchy và visual consistency
• Xây dựng type scale và hệ thống typography
• Nguyên tắc xây dựng spacing system và visual rhythm
• Phân biệt các hệ thống lưới khác nhau, tính ứng dụng và cách xây dựng hệ thống layout cho sản phẩm
• Cách tổ chức token cho typography, spacing và layout
• Radius và sizing: đặt quy tắc thay vì chọn số theo cảm giác
• Dùng AI kiểm tra tính nhất quán của type scale và spacing scale trên các màn hình mẫu

Hoàn thiện các thành tố cơ bản khác tạo nên visual language của sản phẩm.

Bạn sẽ học

• Các thành tố Foundation khác: Iconography, border, radius, elevation, illustration và motion
• Cách xây dựng một visual language nhất quán cho sản phẩm
• Nguyên tắc xác định scale, rules và cách sử dụng cho foundation
• Phân biệt foundation dùng chung và các rule đặc thù của product
• Phân tầng token: Global token, Alias token và Component token
• Variables và Modes trong Figma để quản lý token theo theme
• Token đặt tên có cấu trúc giúp AI đọc và áp dụng đúng giá trị khi tạo giao diện

Học cách tổ chức các thành phần thành một hệ thống thay vì một file UI rời rạc.

Bạn sẽ học

• Review mối quan hệ: Foundation -> Token -> Component -> Pattern -> Template
• Cách tổ chức Design system library trên Figma
• Cấu trúc page, section và component library
• Naming convention cho component, property, variant và variable
• Nguyên tắc xây dựng một hệ thống dễ tìm, dễ hiểu và dễ mở rộng
• Một số vấn đề thường gặp khi design system bắt đầu scale
• Versioning và quản lý thay đổi của library
• Dùng AI rà naming convention của toàn bộ library để phát hiện tên không nhất quán

Hiểu cách xây dựng UI có khả năng tái sử dụng và kết hợp trong toàn bộ sản phẩm.

Bạn sẽ học

• Component-based design là gì?
• Nguyên lý atomic design và cách ứng dụng linh hoạt
• Khi nào một UI element nên trở thành component
• Component anatomy và component hierarchy
• Từ component UI đến component behavior
• Các nhóm component: atoms, inputs, navigation, feedback, overlays
• Viết mô tả component (anatomy, khi nào dùng) theo cách AI có thể hiểu và tái sử dụng

Tạo các component nền tảng một cách linh hoạt trong Figma.

Bạn sẽ học

• Cách tạo component cơ bản một cách linh hoạt trong Figma
• Button, input, checkbox, radio, switch và đầy đủ các state (default, hover, focus, disabled, error)
• Property, variant và cách giữ số lượng variant ở mức dễ quản lý
• Dùng AI liệt kê các state và edge case còn thiếu cho từng component

Học cách xử lý các UI phức tạp bằng tư duy composition thay vì tạo một component khổng lồ.

Bạn sẽ học

• Component composition là gì?
• Các nhóm complex components phổ biến
• Cách xác định component boundary trong UI phức tạp
• Tách structure, content và behavior
• Slots và các vùng có khả năng tùy biến
• Cân bằng giữa reusability và flexibility
• Dropdown, modal, tabs, card, sidebar
• Dùng AI phân tích một UI phức tạp để gợi ý cách chia component boundary, designer quyết định cuối

Chuyển từ tư duy giải quyết từng UI riêng lẻ sang giải quyết các vấn đề UX lặp lại.

Bạn sẽ học

• Design pattern là gì?
• Phân biệt component, component composition, pattern và template
• Mental model và mối liên hệ với design pattern
• User expectation và behavioral consistency
• Các nhóm pattern phổ biến
• Cách nhận diện một recurring UX problem
• Cách xây dựng một pattern từ nhiều component và UX rules
• Decision logic là gì?
• Cách xác định các điều kiện và nhánh xử lý trong một pattern
• Cách xử lý edge cases và exception
• Phân biệt generic pattern và product -specific pattern
• Phân biệt business rules và UX rules
• Các trạng thái Empty, Error, Loading và Feedback trong pattern
• Dùng AI rà các edge case và exception mà pattern cần xử lý

Học cách biến một Design System thành tài sản chung mà nhiều người có thể sử dụng và phát triển.

Bạn sẽ học

• Tại sao Design System cần documentation?
• Cách viết guideline cho foundation, token, component và pattern
• Cấu trúc documentation: what, why, when, when not, anatomy, behavior, rules, do/don't, examples
• Đồng bộ design với code để tài liệu không bị lệch so với sản phẩm thật
• Viết documentation dạng AI đọc được: cấu trúc rõ, quy tắc tường minh, có ví dụ đúng/sai

Nếu AI trở thành một người cùng làm việc với designer và developer, Design System cần được xây như thế nào để AI có thể đọc, hiểu và sử dụng nó?

Bạn sẽ học

• AI-native Design System là gì? AI cần gì để hiểu một Design System?
• Phân biệt AI-assisted và AI-native
• Từ UI assets -> Structured knowledge
• Làm sao để build Design System AI-readable?
• AI có thể làm gì với một Design System có cấu trúc tốt?
• Cách làm việc giữa Designer và Developer
• Quản lý thay đổi, versioning và maintenance cơ bản
• Figma MCP và Code Connect: nối Design System trong Figma với code để AI dùng đúng component