Dùng nền có sẵn hay tự xây design system?

Hầu hết cuộc tranh luận "dùng nền có sẵn hay tự xây" đều bắt đầu sai chỗ. Đội kỹ thuật muốn tự xây vì thích kiểm soát. Đội thiết kế muốn tự xây vì không thích dáng dấp Material. Lãnh đạo muốn dùng nền có sẵn vì nghe nói rẻ hơn. Cả ba lý do đó đều chưa đủ để ra quyết định. Câu hỏi đúng cần hỏi là: bài toán thương hiệu và kỹ thuật của Anh Chị cụ thể trông như thế nào?

Hai hướng khác nhau ở điểm nào

Các yếu tố cần cân nhắc thật

• Mức độ cá tính thương hiệu cần thể hiện ở UI: Sản phẩm B2B tool-focused thường ưu tiên chức năng và sự quen thuộc. Người dùng không muốn học lại cách dùng nút bấm. Ngược lại, sản phẩm lifestyle B2C hoặc thương hiệu cao cấp cần giao diện phân biệt rõ ràng, và lúc đó dáng dấp Material hay Carbon là điểm trừ cạnh tranh thực sự.
• Stack kỹ thuật hiện tại: Material UI phù hợp React. Carbon hỗ trợ cả React và Web Components. Nếu đội đang dùng Vue hay Angular, lựa chọn nền sẽ hẹp lại và cần đánh giá kỹ hơn.
• Khả năng token hóa của nền: MUI từ phiên bản 5 trở lên và Carbon đã hỗ trợ token hóa tốt, cho phép tùy biến sâu mà không cần fork code component. Nếu nền Anh Chị chọn không hỗ trợ token đầy đủ, chi phí ghi đè CSS trực tiếp sẽ tích lũy thành nợ kỹ thuật.
• Roadmap dài hạn của nền: Khi nền release phiên bản lớn, toàn bộ customization (tùy biến) xây trên phiên bản cũ có thể vỡ. Anh Chị cần có người theo dõi và cập nhật liên tục, đây không phải chi phí một lần.
• Quy mô component thực tế cần: Nếu sản phẩm chỉ cần 40 đến 50 component tiêu chuẩn, fork từ nền có sẵn nhanh hơn nhiều so với tự xây. Nếu cần hàng trăm component đặc thù, khoảng cách đó thu hẹp lại.

Khi nào chọn hướng nào

• Dùng nền có sẵn khi sản phẩm B2B, ưu tiên chức năng, người dùng quen với pattern tương tác chuẩn ngành.
• Dùng nền có sẵn khi cần WCAG compliance nhanh vì nền đã xây sẵn baseline, tiết kiệm đáng kể thời gian kiểm thử.
• Tùy biến sâu trên nền có sẵn khi thương hiệu cần màu sắc, typography và spacing riêng nhưng kiểu tương tác vẫn nằm trong chuẩn thông thường.
• Tự xây khi sản phẩm có interaction pattern (kiểu tương tác) đặc thù không có trong nền nào: data visualization phức tạp, game UI, sản phẩm AR hoặc thiết bị chuyên dụng.
• Tự xây khi thương hiệu cao cấp đến mức giao diện trông giống Material hoặc Carbon là điểm trừ, không phải điểm cộng.
• Xem xét fork và tự maintain khi license của nền không tương thích với mô hình kinh doanh của Anh Chị.

Lỗi thường gặp nhất

• Chọn nền theo trend: "Nhiều người đang dùng MUI" không phải lý do đủ mạnh nếu stack kỹ thuật và nhu cầu token hóa không khớp.
• Ghi đè CSS trực tiếp: Đây là con đường nhanh nhất để tạo ra nợ kỹ thuật. Mọi customization nên đi qua token trước.
• Không đọc roadmap của nền: Major version release của nền có thể phá vỡ toàn bộ tùy biến mà không có cảnh báo đủ sớm.
• Tự xây rồi thiếu accessibility: Đây là lỗi cực kỳ tốn kém để sửa sau khi đã ra sản phẩm. WCAG không phải tính năng có thể bổ sung cuối cùng.
• Bẫy Not-Invented-Here: Xu hướng tự xây vì muốn kiểm soát toàn bộ, dù chi phí thực tế cao hơn nhiều so với tùy biến từ nền có sẵn. Đội kỹ thuật mạnh thường dễ rơi vào bẫy này nhất.

Dù chọn nền có sẵn hay tự xây, lớp design token phải là nền chung. Khi token đã chuẩn hóa, đội kỹ thuật có thể thay nền bên dưới mà không cần viết lại toàn bộ style.

Nguyên tắc Token-First, Design Tokens Community Group (DTCG), W3C

Góc nhìn của Sinh Vũ

Sinh Vũ chuẩn hóa lớp token theo DTCG format, tương thích với cả Figma Variables lẫn Style Dictionary để đổ ra CSS, Sass và JSON. Điều này có nghĩa là dù Anh Chị chọn MUI, Carbon hay tự xây từ đầu, lớp token vẫn là điểm neo chung cho cả đội thiết kế và đội kỹ thuật.

Cách tiếp cận này cũng áp dụng nguyên tắc Atomic Design của Brad Frost: xây từ nguyên tử (màu sắc, typography, spacing) lên tổ hợp nhỏ hơn trước khi lắp vào component lớn. Dù xuất phát điểm là nền có sẵn hay tự xây, tư duy này giúp giảm số component cần làm mới và duy trì sự nhất quán khi sản phẩm scale.

Quyết định cuối cùng phụ thuộc vào ba thứ Anh Chị cần trả lời thành thật: cá tính thương hiệu cần thể hiện ở UI mạnh đến đâu, đội kỹ thuật có khả năng maintain nền tự xây lâu dài không, và sản phẩm có kiểu tương tác đặc thù nào mà nền có sẵn không hỗ trợ không. Nếu cả ba câu trả lời đều không rõ, bắt đầu từ nền có sẵn với lớp token riêng là lựa chọn an toàn và có thể điều chỉnh sau.

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

Tùy biến trên Material UI có bị lộ 'mùi Google' không?

Nếu chỉ thay màu sắc và font thì vẫn còn nhận ra dáng dấp Material, vì các pattern tương tác như ripple effect hay elevation shadow vẫn giữ nguyên. Tùy biến sâu qua token kết hợp ghi đè component có chọn lọc sẽ giảm đáng kể cảm giác đó. Tuy nhiên, nếu thương hiệu của Anh Chị cần giao diện hoàn toàn độc lập về phong cách, tự xây mới là lựa chọn đúng.

Tự xây design system mất bao lâu so với dùng nền có sẵn?

Sinh Vũ không đưa con số cụ thể vì phụ thuộc vào quy mô component, số nền tảng cần hỗ trợ và kinh nghiệm của đội. Định tính mà nói, nền có sẵn giúp Anh Chị có bộ component dùng được ngay từ ngày đầu, trong khi tự xây cần thời gian xây dựng cả accessibility, dark mode và responsive từ gốc. Khoảng cách đó không nhỏ.

Nếu dùng nền có sẵn bây giờ, sau này có chuyển sang tự xây được không?

Được, miễn là Anh Chị thiết lập lớp design token riêng ngay từ đầu thay vì ghi đè CSS trực tiếp vào nền. Khi token đã chuẩn hóa theo DTCG format, đội kỹ thuật có thể thay nền bên dưới mà không cần viết lại toàn bộ style. Đây chính là lý do Sinh Vũ luôn xây lớp token trước, bất kể khách chọn hướng nào.