Astryx – Meta mở mã nguồn Design System với hơn 150 components, sẵn sàng cho AI Agent

Nếu từng xây dựng một sản phẩm bằng React, chắc hẳn bạn đã không ít lần phải đau đầu với chuyện chọn thư viện UI, thiết lập màu sắc, typography, spacing hay làm sao để các components hoạt động nhất quán với nhau. Chưa kể khi bắt đầu sử dụng AI để viết code, việc giữ cho giao diện đồng bộ lại càng trở nên khó khăn.

Đó cũng là lý do Astryx trở thành một dự án khá đáng chú ý. Meta vừa đưa hệ thống thiết kế này ra cộng đồng dưới dạng mã nguồn mở, mang theo kinh nghiệm phát triển và sử dụng nội bộ trong suốt 8 năm.

Không đơn thuần là một thư viện giao diện, Astryx được xây dựng để cả designer, developer và AI Agent có thể cùng tạo ra sản phẩm dựa trên một hệ thống thống nhất.

Astryx là gì?

Astryx là Design System mã nguồn mở do Meta phát triển, được xây dựng trên React 19 và StyleX. Theo giới thiệu từ dự án, hệ thống này đã được sử dụng trong hơn 13.000 ứng dụng nội bộ và trở thành Design System lớn nhất, được sử dụng rộng rãi nhất tại Meta.

Điểm thú vị là thay vì chỉ cung cấp những thành phần UI có sẵn, Astryx còn kết hợp hệ thống design tokens, themes, layout patterns, templates và công cụ dòng lệnh CLI. Nhờ vậy, việc xây dựng giao diện không còn phải bắt đầu từ những thành phần rời rạc.

Với hơn 150 components hỗ trợ accessibility, Astryx có thể đáp ứng nhiều nhu cầu từ những form đơn giản cho đến dashboard, trang quản trị hay các ứng dụng có quy trình phức tạp.

Đặc biệt, Meta định hướng Astryx theo cách phát triển phần mềm hiện nay, nơi con người và AI Agent cùng tham gia vào quá trình xây dựng sản phẩm.

Astryx có gì nổi bật?

Điều mình thấy thú vị nhất ở Astryx không hẳn là số lượng components, mà là cách hệ thống này cân bằng giữa tính nhất quán và khả năng tùy biến.

Thông thường, khi sử dụng một UI library, chúng ta phải lựa chọn giữa việc chấp nhận thiết kế mặc định hoặc dành khá nhiều công sức để tùy chỉnh. Astryx cố gắng giải quyết điều đó bằng một kiến trúc mở, cho phép thay đổi giao diện mà không cần can thiệp quá sâu vào mã nguồn.

Hơn 150 components có thể tái sử dụng

Astryx cung cấp những thành phần giao diện phổ biến như Button, Card, các thành phần form, điều hướng, bố cục và nhiều thành phần phức tạp hơn. Tất cả được xây dựng với TypeScript, có quy ước API tương đối nhất quán và tài liệu hướng dẫn đi kèm.

Điều này giúp developer dễ dàng kết hợp components thành những giao diện hoàn chỉnh, đồng thời giảm thời gian xử lý những chi tiết UI lặp đi lặp lại.

Tùy chỉnh giao diện bằng Design Tokens và Themes

Astryx sử dụng CSS Custom Properties để quản lý hệ thống thiết kế. Thay vì chỉnh sửa từng component, bạn có thể thay đổi màu sắc, typography, border radius và những giá trị nền tảng ngay từ theme.

Dự án hiện cung cấp 7 themes có sẵn gồm Neutral, Butter, Chocolate, Matcha, Stone, Gothic và Y2K. Bạn có thể sử dụng trực tiếp hoặc phát triển một theme riêng phù hợp với thương hiệu.

Đặc biệt, Astryx hỗ trợ dark mode và không bắt buộc developer phải sử dụng StyleX để tùy chỉnh giao diện. Bạn vẫn có thể kết hợp với Tailwind CSS, CSS Modules hoặc CSS thông thường.

Có sẵn templates và UI patterns

Không chỉ dừng ở những components riêng lẻ, Astryx còn cung cấp templates cho dashboard, settings, forms và detail pages.

Ví dụ, khi cần xây dựng một dashboard quản trị, thay vì tự thiết kế mọi thứ từ đầu, bạn có thể sử dụng template có sẵn rồi điều chỉnh cấu trúc và nội dung theo nhu cầu.

Đây là một hướng tiếp cận khá thực tế, bởi trong phần lớn dự án, thứ chúng ta cần không chỉ là một Button đẹp mà còn là cách tổ chức toàn bộ giao diện sao cho hợp lý.

Được thiết kế để làm việc cùng AI Agent

Đây có lẽ là điểm đáng chú ý nhất của Astryx.

Meta không chỉ cung cấp tài liệu để developer đọc mà còn xây dựng CLI giúp AI Agent truy cập thông tin về components, design tokens, templates và các quy tắc sử dụng.

Khi được thiết lập đúng cách, AI có thể tìm hiểu một component hỗ trợ những thuộc tính nào, lựa chọn template phù hợp và sử dụng các design tokens có sẵn thay vì tự đoán.

Nhờ vậy, những công cụ AI Coding có thể tạo giao diện bám sát Design System hơn, giảm tình trạng mỗi màn hình lại sử dụng một kiểu spacing, màu sắc hoặc component khác nhau.

Astryx cũng hỗ trợ xuất mã nguồn của một component về dự án thông qua tính năng swizzle, giúp developer tùy chỉnh sâu hơn khi thư viện mặc định chưa đáp ứng được nhu cầu.

Cách cài đặt Astryx

Astryx yêu cầu React 19 trở lên. Bạn có thể sử dụng với Next.js, Vite hoặc những dự án React tương thích.

Trước tiên, mở Terminal trong thư mục dự án và cài đặt các package cần thiết:

npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex

Sau đó cài thêm CLI để có thể tra cứu components, templates và làm việc với AI Agent:

npm install -D @astryxdesign/cli

Tiếp theo, thêm ba stylesheet vào file CSS chính của dự án theo đúng thứ tự:

@import '@astryxdesign/core/reset.css';
@import '@astryxdesign/core/astryx.css';
@import '@astryxdesign/theme-neutral/theme.css';

Astryx đã cung cấp CSS được build sẵn nên không cần thiết lập thêm Babel, PostCSS hay StyleX build plugin chỉ để sử dụng thư viện.

Với ứng dụng React, bạn cần bọc phần giao diện trong Theme để sử dụng theme đã cài đặt. Ví dụ:

import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';
import {Button} from '@astryxdesign/core/Button';

export default function App() {
  return (
    <Theme theme={neutralTheme}>
      <Button label="Hello Astryx" variant="primary" />
    </Theme>
  );
}

Như vậy là bạn đã có thể bắt đầu sử dụng components của Astryx. Nếu dùng Next.js, bạn nên đặt Theme trong một Client Component và sử dụng nó ở phần layout chung của ứng dụng.

Hướng dẫn sử dụng Astryx cùng AI Agent

Nếu đang sử dụng Claude Code hoặc những AI Coding Agent khác, bạn có thể tận dụng CLI của Astryx để giúp AI hiểu rõ Design System trước khi bắt đầu viết giao diện.

Đầu tiên, chạy lệnh:

npx @astryxdesign/cli init

Lệnh này thiết lập hướng dẫn Astryx trong dự án, bao gồm thông tin giúp AI Agent tìm kiếm components, templates và design tokens thông qua các file hướng dẫn như AGENTS.md hoặc CLAUDE.md.

Sau đó, bạn có thể sử dụng CLI để tra cứu toàn bộ components:

npx @astryxdesign/cli component --list

Muốn tìm hiểu cách sử dụng một Button cụ thể, chỉ cần chạy:

npx @astryxdesign/cli component Button

Hoặc nếu muốn tìm các templates có sẵn:

npx @astryxdesign/cli template --list

Giả sử bạn đang làm một trang dashboard quản lý khách hàng bằng AI, thay vì yêu cầu chung chung như “Hãy tạo dashboard thật đẹp”, bạn có thể đưa ra yêu cầu cụ thể hơn:

Hãy tạo một dashboard quản lý khách hàng bằng React, sử dụng Astryx Design System. Ưu tiên các components và templates có sẵn, tuân thủ design tokens của theme Neutral, hỗ trợ responsive và dark mode. Hãy tra cứu tài liệu Astryx CLI trước khi triển khai.

Khi đó, AI có cơ sở rõ ràng hơn để chọn components, tổ chức layout và sử dụng các quy tắc thiết kế phù hợp.

Tất nhiên, chất lượng giao diện vẫn phụ thuộc vào yêu cầu đầu vào và khả năng của AI Agent. Astryx cung cấp nền tảng và tài liệu để AI làm việc chính xác hơn, chứ không tự động bảo đảm mọi giao diện được tạo ra đều tốt.

Một vài điểm cần lưu ý

Mặc dù có nền tảng phát triển khá lớn từ Meta, Astryx hiện vẫn đang trong giai đoạn Beta. Điều đó có nghĩa là API, components hoặc công cụ đi kèm vẫn có thể thay đổi trong những bản cập nhật tiếp theo.

Nếu muốn áp dụng vào dự án production, bạn nên thử nghiệm trước, kiểm tra khả năng tương thích với hệ thống hiện có và cố định phiên bản package để hạn chế những thay đổi ngoài ý muốn.

Một điểm nữa là Astryx được xây dựng chủ yếu cho hệ sinh thái React. Nếu đang sử dụng Vue, Angular hoặc những framework khác, bạn sẽ không thể áp dụng trực tiếp toàn bộ thư viện như với React.

Riêng với các dự án đã dùng Tailwind CSS, cần chú ý thứ tự CSS layers để tránh xung đột style. Astryx có tài liệu hướng dẫn riêng cho trường hợp này.

Ngoài ra, khi chạy CLI thông qua npx, hãy sử dụng đúng tên package @astryxdesign/cli. Tên astryx không có scope có thể trỏ đến một package npm khác nếu CLI chưa được cài đặt trong dự án.

Cuối cùng, Astryx là một Design System mã nguồn mở theo giấy phép MIT. Bạn có thể sử dụng, chỉnh sửa và phát triển thêm cho các dự án cá nhân hoặc thương mại theo các điều kiện của giấy phép.

Có nên thử Astryx?

Nếu đang phát triển sản phẩm bằng React, đặc biệt là những ứng dụng có nhiều màn hình hoặc cần duy trì tính nhất quán giữa các nhóm thiết kế và lập trình, Astryx là một lựa chọn đáng để khám phá.

Với mình, giá trị lớn nhất của dự án nằm ở cách Meta đưa Design System tiến thêm một bước: không chỉ phục vụ designer và developer, mà còn trở thành nguồn tham chiếu chung cho AI Agent.

Khi AI ngày càng tham gia nhiều hơn vào quá trình xây dựng sản phẩm, một Design System có cấu trúc rõ ràng, API nhất quán và tài liệu có thể truy cập bằng máy sẽ ngày càng hữu ích.

Astryx chưa chắc đã phù hợp để thay thế ngay thư viện UI mà bạn đang sử dụng, nhưng đây là một dự án rất đáng tham khảo nếu muốn tìm hiểu cách xây dựng Design System trong thời đại AI Coding.

Tham khảo dự án: