Astryx - Hệ thống thiết kế mã nguồn mở do Meta công bố

• Nổi bật với khả năng tùy biến hoàn toàn và hỗ trợ agent dựa trên React và StyleX
• Sở hữu hơn 160 component React có thể áp dụng accessibility và chủ đề thương hiệu, đồng thời cung cấp dark mode, template có thể triển khai ngay và CLI trong một hệ thống tích hợp
• Là hệ thống thiết kế lớn nhất và được sử dụng nhiều nhất, đã phát triển trong 8 năm qua bên trong Meta, vận hành hơn 13.000 ứng dụng và được tinh chỉnh bởi các nhóm kỹ sư/thiết kế/sản phẩm
• Hỗ trợ nhiều theme, cung cấp mọi design token như màu sắc/khoảng cách/radius/typography dưới dạng CSS custom properties
• Có thể kết hợp với công cụ lập trình AI thông qua dòng lệnh hoặc MCP, cho phép scaffold dự án, duyệt template, tạo theme và lấy tài liệu cho agent
  • Chỉ cần dán hướng dẫn cài đặt ban đầu vào công cụ lập trình AI, chạy npx astryx init để tự động thiết lập tài liệu cho agent
• Cấu trúc nội bộ mở (Open internals): component không bị nhốt trong API cấp cao đóng kín mà có thể được kết hợp ở bất kỳ mức nào, đồng thời export trực tiếp các building block cần thiết
  • Với tính năng swizzle, có thể trích xuất toàn bộ mã nguồn component vào project để tự sở hữu và chỉnh sửa
• Không khóa vào hệ thống styling: bên trong dùng StyleX để viết style nhưng không lộ ra với người dùng; có thể override qua className bằng Tailwind/CSS modules/plain CSS
• Nguyên tắc hướng dẫn hơn là cưỡng ép (Guidance over enforcement), cung cấp năng lực mà không áp đặt - khi truyền giá trị vào thì component sẽ render đúng như vậy, còn quan điểm thiết kế được đưa vào tài liệu và ví dụ
  • Mọi component đều tuân theo cùng một quy tắc đặt tên/prop/kết hợp và được tài liệu hóa, giúp cả con người lẫn AI có thể dự đoán hành vi của component lạ
• CLI đóng vai trò tham chiếu cho component/token/template/tài liệu
  • npx astryx component (danh sách component), npx astryx docs (chủ đề tài liệu), npx astryx template --list (template trang), npx astryx docs tokens (tham chiếu khoảng cách/màu sắc/radius)
• Kiến trúc: cấu trúc 3 lớp
  • Foundations: các building block cho tính nhất quán thị giác như typography, màu sắc, layout, accessibility
  • Components: hơn 150 UI building block tái sử dụng với hỗ trợ TypeScript đầy đủ
  • Patterns: các giải pháp thiết kế đã được kiểm chứng như trang bảng, layout trang chi tiết, form wizard, navigation, luồng nhập dữ liệu
• Cung cấp template sẵn sàng cho production chỉ cần đưa nội dung vào, cùng các ứng dụng ví dụ hoàn chỉnh đã kết nối routing/theme/component
• Giấy phép MIT