10 tháng 5, 2024 · 7 phút đọc

Xây hệ sinh thái design token cho đội ngũ 8 người

Cách tôi chuẩn hoá typography, màu sắc và spacing để đội dev + designer ship tính năng đều đặn.

Design SystemTailwind CSSTeamwork

“Design token không phải là bảng màu; đó là ngôn ngữ chung giúp đội ngũ đưa quyết định nhanh.”

Sau 6 tháng, dự án bắt đầu có mùi hỗn loạn: mỗi feature sinh ra một biến thể button mới. Tôi dành một tuần audit toàn bộ UI, gom lại thành 32 token chính (màu, typography, radius, shadow).

Tôi dùng config inline của Tailwind 4 để ánh xạ token vào class tiện dụng. Mỗi token đều có tên mô tả nhiệm vụ, ví dụ `--action-soft` hay `--surface-elevated`. Designer chỉ cần nhắc đến token, dev hiểu ngay mình phải dùng class nào.

Kết quả: PR UI giảm 18% comment lặt vặt, thời gian review nhanh hơn 30%. Quan trọng hơn, cả team đồng thuận được tiêu chuẩn chất lượng mà không tốn thêm meeting.

Điểm đúc kết

Audit giao diện thường xuyên để phát hiện sự trùng lắp và chuẩn hoá.
Tailwind 4 cho phép map token sang class rất tự nhiên.
Khi mọi người nói chung một ngôn ngữ thị giác, tốc độ review tăng đáng kể.