7 Design System nội địa Trung Quốc đáng học hỏi: Từ Ant Design đến Semi Design

1. Ant Design — Design System Enterprise Hàng Đầu Từ Alibaba

Ant Design là design system nổi tiếng nhất và có ảnh hưởng lớn nhất từ Trung Quốc, được phát triển bởi đội ngũ Ant User-Experience Design Team thuộc Alibaba. Đây là một hệ sinh thái thiết kế toàn diện cho các sản phẩm enterprise-level, với hơn 90+ component React chuyên nghiệp và được tin dùng bởi hàng triệu developer trên toàn cầu, bao gồm Alibaba, Tencent, Baidu, Xiaomi, Meituan, Didi và hàng nghìn công ty Fortune 500.

Điểm đặc biệt của Ant Design nằm ở bốn giá trị thiết kế cốt lõi: Natural (Tự nhiên), Certain (Chắc chắn), Meaningful (Ý nghĩa), và Growing (Phát triển). Philosophy này giúp Ant Design không chỉ là một bộ component mà còn là một ngôn ngữ thiết kế nhất quán, giảm thiểu sự dư thừa và chi phí sản xuất quá mức, đồng thời giúp designer tập trung vào trải nghiệm người dùng tốt hơn. Ant Design cung cấp đầy đủ các tài nguyên thiết kế từ design patterns, visualization guidelines, illustration style, đến Sketch toolbox và các bài viết chuyên sâu.

Về mặt kỹ thuật, Ant Design sử dụng React làm framework chính, nhưng cộng đồng đã phát triển các phiên bản cho Angular (NG-ZORRO), Vue (Ant Design Vue), Blazor (AtomUI) và nhiều framework khác. Năm 2025, Ant Design đã ra mắt Ant Design X — bộ component thế hệ mới dành cho các ứng dụng AI-powered, đánh dấu bước chuyển mình quan trọng trong kỷ nguyên AI. Website chính thức cũng tích hợp tính năng AI Generate Theme, cho phép tạo theme tùy chỉnh chỉ bằng mô tả ngôn ngữ tự nhiên.

2. TDesign — Hệ Sinh Thái Thiết Kế Toàn Diện Từ Tencent

TDesign là design system enterprise toàn diện được Tencent xây dựng thông qua sự hợp tác nội bộ mã nguồn mở. Trước năm 2019, Tencent vận hành nhiều design system và component library nội bộ riêng lẻ, dẫn đến sự phân mảnh. Năm 2019, Tencent thành lập Ủy ban Hợp tác Mã nguồn Mở, tổ chức các team làm việc trên các sản phẩm công nghệ tương tự cùng hợp tác. TDesign chính là kết quả của sự hợp tác này giữa frontend và design team.

TDesign nổi bật với khả năng đa nền tảng và đa tech stack. Hiện tại, TDesign hỗ trợ đầy đủ các framework phổ biến: Vue 2, Vue 3, React cho desktop; Vue 3, WeChat Mini Program, React, Flutter và UniApp cho mobile. Điều này giúp các team xây dựng ứng dụng đồng nhất trên nhiều nền tảng với cùng một ngôn ngữ thiết kế. TDesign cũng cung cấp 1,580+ sản phẩm từ nhiều ngành khác nhau đang sử dụng, từ sản phẩm tiêu dùng đến dịch vụ tài chính, từ B2B đến B2C.

Về tài nguyên thiết kế, TDesign cung cấp file Figma, Sketch, Adobe XD và hỗ trợ sử dụng trên CoDesign, Pixso, 即时设计, 墨刀. Hệ thống Design Token của TDesign cho phép mở rộng style dễ dàng, đáp ứng nhu cầu brand customization. Đặc biệt, TDesign có TDesign Starter Kit giúp developer nhanh chóng bắt đầu dự án mới với các template sẵn có. Với hơn 1,000+ issues đã được đóng và 5,000+ code reviews trong năm qua, TDesign duy trì chu kỳ release hàng tuần, đảm bảo chất lượng và tính ổn định cao.

3. Semi Design — Design System Của Douyin/TikTok Từ ByteDance

Semi Design là design system hiện đại được phát triển bởi Douyin front-end và UED team thuộc ByteDance — công ty mẹ của TikTok. Đây là một trong những design system tiên phong trong việc tích hợp AI-friendly ngay từ đầu, với hơn 80+ component chất lượng cao và hơn 3,000+ Design Tokens.

Điểm độc đáo nhất của Semi Design là khả năng Design to Code (D2C) và Code to Design (C2D). Với D2C, designer có thể chuyển đổi Figma design draft thành code thực tế chỉ trong vài giây. Với C2D, hệ thống tự động tạo Figma UI Kit dựa trên các theme khác nhau, đảm bảo tính đồng nhất giữa design và code. Điều này giúp thu hẹp khoảng cách giữa DesignOps và DevOps một cách hiệu quả.

Semi Design cũng rất chú trọng đến Accessibility (A11y), tuân thủ đầy đủ các tiêu chuẩn W3C về keyboard interaction, focus management và ARIA cho tất cả component. Hệ thống hỗ trợ đầy đủ internationalization với hàng chục ngôn ngữ, timezone và RTL (Right-to-Left). Về kiến trúc, Semi Design sử dụng Foundation/Adapter architecture, giúp code dễ đọc và dễ contribute. Các theme sẵn có bao gồm Semi Design Default, Feishu Universe Design Theme, Douyin Creator Theme, CapCut Theme và Volce Engine Theme, cho thấy tính linh hoạt trong việc áp dụng cho nhiều sản phẩm khác nhau trong hệ sinh thái ByteDance.

4. Arco Design — Design System Từ ByteDance GIP UED Team

Arco Design là design system enterprise-level khác từ ByteDance, được phát triển bởi GIP UED team và Infrastructure FrontEnd team. Arco Design được thiết kế với philosophy dựa trên bốn giá trị: Consistent (Nhất quán), Rhythm (Nhịp điệu), Clear (Rõ ràng), và Open (Mở). Với hơn 70+ component React và hỗ trợ cả Vue 3, Arco Design tập trung vào việc cung cấp giải pháp thiết kế và phát triển toàn diện cho sản phẩm enterprise.

Arco Design nổi bật với hệ sinh thái công cụ phong phú bao gồm: Arco Design Lab — nền tảng cấu hình style đa chiều; ArcoPro — giải pháp UI out-of-the-box cho ứng dụng enterprise; Palette — công cụ cấu hình màu sắc; IconBox — nền tảng icon; và Material Market — thị trường vật liệu. Hệ thống Design Token của Arco lưu trữ các “design decisions” dưới dạng JSON files, bao gồm text color, background color, border color, font size, spacing, border radius, v.v.

Arco Design cũng có hệ thống Material độc đáo, chia tài nguyên thành ba cấp độ: Components (component cơ bản), Blocks (tập hợp nhiều component, phức tạp hơn) và Pages (trang hoàn chỉnh). Điều này giúp team tái sử dụng các module business logic phức tạp một cách hiệu quả. Arco CLI hỗ trợ developer nhanh chóng tạo material project, publish và quản lý materials. Hiện tại, Arco Design đã phục vụ 4,000+ dự án với tổng lượt tải vượt 210 triệu.

5. NutUI — Component Library Phong Cách JD Cho Mobile

NutUI là component library mobile phong cách JD (Jingdong) — một trong những nền tảng thương mại điện tử lớn nhất Trung Quốc. Với hơn 80+ component chất lượng cao, NutUI được thiết kế dựa trên JD APP 11.0 Visual Specifications và hỗ trợ đa nền tảng: H5, WeChat Mini Program, Alipay Mini Program, JD Mini Program và Taro-H5.

Điểm mạnh của NutUI là khả năng viết một lần, chạy đa nền tảng. Developer có thể sử dụng cùng một codebase Vue 3 để phát triển ứng dụng chạy trên cả H5 và nhiều loại mini program, giúp giảm đáng kể chi phí phát triển đa nền tảng. NutUI cũng hỗ trợ TypeScript, Server-Side Rendering (SSR) ở giai đoạn thử nghiệm, và custom theme với hơn 700+ biến style có sẵn.

Về chất lượng, NutUI đạt tỷ lệ coverage unit test trên 80%, đảm bảo độ ổn định cao. Ngoài component cơ bản, NutUI còn cung cấp các business component chuyên biệt như NutUI-Cat (component cho mùa sale lớn) và NutUI-Bingo (component cho các chương trình rút thăm may mắn), phản ánh sự am hiểu sâu sắc về nhu cầu thương mại điện tử. NutUI cũng có phiên bản React với 70+ component, mở rộng đối tượng sử dụng. Tên “Nut” được lấy cảm hứng từ con sóc Scrat trong phim Ice Age — biểu tượng của sự kiên trì theo đuổi mục tiêu.

6. Naive UI — Component Library Vue 3 Từ TuSimple

Naive UI là component library được phát triển bởi TuSimple — công ty chuyên về xe tự hành. Đây là một trong những thư viện component Vue 3 phổ biến nhất với hơn 90+ component, được viết hoàn toàn bằng TypeScript và tối ưu cho hiệu suất cao.

Naive UI nổi bật với hệ thống theme customization type-safe tiên tiến. Khác với các thư viện khác yêu cầu CSS preprocessors hoặc webpack loaders, Naive UI cho phép developer tùy chỉnh theme chỉ bằng cách cung cấp một theme overrides object trong JavaScript. Tất cả component đều tree-shakable, giúp giảm kích thước bundle. Các component xử lý dữ liệu lớn như Table, List, Select đều tích hợp virtual list mặc định, đảm bảo hiệu suất mượt mà ngay cả với hàng nghìn item.

Naive UI không yêu cầu import CSS — style được quản lý nội bộ thông qua CSS-in-JS, giúp developer tiết kiệm thời gian cấu hình. Cộng đồng Naive UI rất sôi động với nhiều nhóm chat DingTalk đã đầy (từ nhóm 1 đến nhóm 6), cho thấy độ phổ biến cao trong cộng đồng developer Trung Quốc. Naive UI cũng cung cấp file Sketch design resource, giúp designer và developer làm việc đồng bộ. Với triết lý “Fairly Complete, Theme Customizable, Uses TypeScript, Fast”, Naive UI là lựa chọn lý tưởng cho các dự án Vue 3 cần hiệu suất cao và tùy biến linh hoạt.

7. Mand Mobile — UI Toolkit Chuyên Biệt Cho Tài Chính Từ Didi

Mand Mobile là mobile UI toolkit được phát triển bởi Didi Chuxing — “Uber của Trung Quốc” — và được thiết kế chuyên biệt cho các kịch bản tài chính. Dựa trên Vue.js 2, Mand Mobile cung cấp các component phong phú bao phủ hầu hết các tình huống tài chính: thanh toán, chuyển khoản, quản lý tài khoản, đầu tư, bảo hiểm, và các dịch vụ tài chính khác.

Thiết kế của Mand Mobile theo phong cách flat design — gọn gàng, đơn giản, giúp người dùng tập trung vào nội dung tài chính phức tạp. Philosophy của Mand Mobile là “làm đơn giản hóa các kịch bản phức tạp và hỗ trợ người dùng nâng cao nhận thức và hiệu quả”. Đây là điều quan trọng trong lĩnh vực tài chính, nơi người dùng cần hiểu rõ thông tin trước khi đưa ra quyết định.

Mand Mobile cung cấp template project thông qua vue-cli, giúp developer nhanh chóng khởi tạo dự án mới. Component hỗ trợ import theo nhu cầu thông qua babel-plugin-import hoặc ts-import-plugin, giúp tối ưu kích thước bundle. Ngoài component cơ bản, Mand Mobile còn cung cấp các công cụ hỗ trợ phát triển như DoraemonKit — bộ công cụ hỗ trợ phát triển app toàn diện cho iOS và Android, và Chameleon — framework MVVM đa nền tảng (Web/Weex/Mini program). Mand Mobile được cấp phép theo Apache License 2.0, cho phép sử dụng thương mại tự do.

Bảng So Sánh Tổng Quan

Kết Luận

7 design system nội địa Trung Quốc trên đại diện cho ba xu hướng chính trong ngành thiết kế và phát triển sản phẩm tại quốc gia này:

Thứ nhất, sự chuyên môn hóa sâu. Mỗi design system không chỉ là một bộ component generic mà còn được điều chỉnh cho từng lĩnh vực cụ thể: Ant Design cho enterprise, NutUI cho e-commerce mobile, Mand Mobile cho tài chính, Semi Design cho content creation. Điều này phản ánh sự hiểu biết sâu sắc về nhu cầu người dùng trong từng ngành.

Thứ hai, đa nền tảng là bắt buộc. Các design system hàng đầu như TDesign và NutUI đều hỗ trợ đa framework và đa nền tảng (web, mobile, mini program, Flutter), phản ánh thực tế hệ sinh thái ứng dụng phân mảnh tại Trung Quốc với WeChat, Alipay, JD, Douyin và nhiều nền tảng khác cùng tồn tại.

Thứ ba, AI và automation đang định hình tương lai. Semi Design với D2C/C2D, Ant Design với AI Generate Theme, và các design system khác đang tích hợp AI sâu hơn vào workflow thiết kế. Đây là xu hướng mà các design system phương Tây cũng đang theo đuổi, nhưng các đối thủ Trung Quốc đang tiến rất nhanh.

Dù bạn là designer, developer hay product manager, việc nghiên cứu và học hỏi từ các design system này sẽ mang lại góc nhìn mới về cách xây dựng hệ sinh thái thiết kế quy mô lớn, cách cân bằng giữa tính nhất quán và tính linh hoạt, và cách tích hợp công nghệ mới nhất vào quy trình thiết kế. Đây chính là lý do tại sao các design system Trung Quốc đang ngày càng được cộng đồng quốc tế quan tâm và áp dụng.