Meta mã nguồn mở Astryx: Hệ thống thiết kế React hỗ trợ AI với hơn 150 thành phần

Meta vừa ra mắt Astryx, một hệ thống thiết kế mã nguồn mở có khả năng tùy biến hoàn toàn, được xây dựng để phục vụ cả con người lẫn các AI agent làm việc cùng họ. Hệ thống hiện đã có sẵn bản Beta. Astryx không phải là một thử nghiệm mới. Nó đã được phát triển nội bộ tại Meta trong suốt tám năm qua, nơi công ty cho biết đây là hệ thống thiết kế lớn nhất và được sử dụng nhiều nhất, được định hình bởi các kỹ sư, nhà thiết kế và đội ngũ sản phẩm dựa vào nó hàng ngày.

Hệ thống cung cấp hơn 150 thành phần (components) có khả năng truy cập (accessible) (trang tài liệu hiện liệt kê hơn 160), các chủ đề (theming) cấp thương hiệu, chế độ tối (dark mode), các mẫu (templates) sẵn sàng sử dụng và một CLI trong một gói thống nhất. Nó được xây dựng trên React và StyleX. Bạn chỉ cần import CSS đã được xây dựng sẵn và sử dụng các React component có định kiểu (typed). Không cần cấu hình plugin build hay phải áp dụng thêm thư viện tạo kiểu nào khác.

Sự đánh đổi mà Astryx đang cố gắng loại bỏ

Hầu hết các hệ thống thiết kế đều buộc người dùng phải lựa chọn. Nếu áp dụng hệ thống của một công ty lớn, ứng dụng của bạn thường trông giống sản phẩm của người khác. Nếu chọn cách copy-paste các thành phần, mỗi dự án sẽ tự phân nhánh (fork) các đoạn mã riêng, dẫn đến thiếu sự đồng nhất, không có các bản sửa lỗi từ nguồn gốc và vấn đề về khả năng truy cập (accessibility) sẽ âm thầm trở thành gánh nặng của riêng bạn.

Astryx tách biệt hai mối quan tâm này. Hệ thống kiểm soát hành vi, khả năng truy cập và chất lượng. Các chủ đề (themes) kiểm soát giao diện. Bạn tùy chỉnh ở cấp độ token (màu sắc, kiểu chữ, độ bo góc, chuyển động) để ứng dụng mang đậm dấu ấn riêng mà không cần viết lại mã. Một chủ đề đơn giản là tập hợp các CSS custom property ghi đè, vì vậy nhà thiết kế có thể thay đổi giao diện Astryx mà không cần fork hay bao bọc (wrap) mã nguồn của component.

Các nguyên tắc thiết kế được công bố của hệ thống là: hướng dẫn thay vì ép buộc, các quy ước được tài liệu hóa chặt chẽ, một hệ thống duy nhất cho cả con người và AI, và được chứng minh bằng đo lường — các quy ước được kiểm thử chứ không chỉ là khẳng định.

Kiến trúc: nền tảng, thành phần, mẫu thiết kế

Astryx được tổ chức thành ba lớp. Foundations (Nền tảng) là các yếu tố cơ bản cho các giao diện đồng nhất và dễ truy cập: kiểu chữ, màu sắc, bố cục và khả năng truy cập. Components (Thành phần) là hơn 150 khối xây dựng có thể tái sử dụng, tất cả đều hỗ trợ đầy đủ TypeScript. Patterns (Mẫu thiết kế) là các giải pháp đã được kiểm chứng cho các quy trình công việc phổ biến: trang bảng biểu, bố cục chi tiết, trình hướng dẫn biểu mẫu (form wizards), điều hướng và luồng nhập liệu.

Hai quyết định thiết kế giúp hệ thống này trở nên cởi mở một cách khác biệt. Các thành phần có thể được kết hợp ở bất kỳ cấp độ nào thay vì bị khóa sau một API cấp cao đóng kín, và tính năng "swizzle" cho phép bạn trích xuất toàn bộ mã nguồn của một thành phần vào dự án khi bạn muốn làm chủ nó. Việc tạo kiểu được thực hiện bằng StyleX nhưng vẫn ẩn đối với người dùng cuối, vì vậy bạn có thể ghi đè bằng className sử dụng Tailwind, CSS modules hoặc CSS thuần — bất cứ thứ gì dự án của bạn đang sử dụng. Phần giải thích bên dưới cho thấy cách một bộ thành phần thay đổi giao diện trên bảy chủ đề của Astryx chỉ bằng cách thay đổi các token.

Trình giải thích tương tác

Một hệ thống, nhiều giao diện: cách Astryx tách biệt hành vi khỏi thương hiệu

Các thành phần bên dưới không bao giờ thay đổi. Chỉ có các token là thay đổi. Hãy chọn một chủ đề, kéo các thanh trượt và quan sát cùng một giao diện React có khả năng truy cập thay đổi diện mạo mà không cần viết lại mã.

8 năm trong sản xuất

13.000+ ứng dụng tại Meta

150+ thành phần

7 chủ đề

Giấy phép MIT

React 19+ StyleX

1 · Chọn một chủ đề

2 · Tinh chỉnh các token

Độ bo góc 10px

Mật độ (padding) 14px

chủ đề: trung tính

Mới

Đồng hồ tối giản

Thiết kế tinh tế, bền bỉ hàng ngày.

$248 Còn hàng

Cùng mã đánh dấu (markup), cùng hành vi — chỉ thay đổi giao diện thông qua các CSS custom property.

Trình giải thích tương tác · các bảng màu hiển thị chỉ mang tính đại diện · Marktechpost

Được xây dựng cho AI agent, không phải là chắp vá

Meta coi Astryx là lời giải cho cách phần mềm được viết hiện nay. Khi ngày càng nhiều mã được tạo ra bởi các AI agent, hệ thống thiết kế cần phải được tư duy lại thay vì chỉ chắp vá. API, quy ước, tài liệu và CLI được thiết kế đồng bộ, giúp con người và trợ lý AI cùng xây dựng theo một cách từ cùng một tài liệu tham khảo. Đội ngũ phát triển lưu ý rằng, mọi thay đổi giúp Astryx trở nên dễ dàng hơn cho AI cũng đồng thời giúp nó dễ dàng hơn cho con người.

Điều đó thể hiện rõ trong bộ công cụ. CLI (@astryxdesign/cli) có thể liệt kê và tạo khung các mẫu, in tài liệu đầy đủ của thành phần, tạo và xây dựng các chủ đề, chạy codemods để di chuyển phiên bản, và hiển thị tài liệu có thể đọc được bằng máy từ dòng lệnh hoặc qua MCP. Các thành phần đi kèm với quy tắc đặt tên, thuộc tính (prop) và cấu trúc nhất quán, vì vậy khi đã nắm vững một vài thành phần, cả con người và các mô hình AI đều có thể dự đoán hành vi của những thành phần lạ.

Yêu cầu và cách triển khai

Vì Astryx là một thư viện front-end, "triển khai" có nghĩa là thêm nó vào một ứng dụng React. Gói (@astryxdesign/core, được gọi nội bộ là XDS) liệt kê React và react-dom ≥ 19.0.0 là các peer dependencies, cùng với StyleX. Nó cung cấp sẵn CSS đã build, vì vậy không cần thêm cấu hình PostCSS hay Babel. Các thiết lập được hỗ trợ bao gồm Next.js với Tailwind, Next.js với StyleX, Vite và đường dẫn CDN không cần build thông qua gói UMD trên unpkg hoặc jsDelivr. Trình kiểm tra tương tác bên dưới sẽ tạo ra các bước cài đặt và thiết lập chính xác cho stack của bạn và gắn cờ bất kỳ thứ gì cần thay đổi trước.

Có thể triển khai được không?

Đưa Astryx vào stack của bạn: yêu cầu, thiết lập và kết quả đánh giá go / no-go

Astryx là một hệ thống thiết kế front-end, vì vậy "triển khai" có nghĩa là đưa nó vào một ứng dụng React. Hãy trả lời ba câu hỏi để nhận lộ trình cài đặt chính xác, kiểm tra yêu cầu và xem liệu bạn đã sẵn sàng để xuất bản hay chưa.

Sẵn sàng xuất bản

CSS đã build sẵn, không cần PostCSS / Babel