Astryx - Sistem desain open-source yang dirilis Meta

• Berbasis React dan StyleX, dengan ciri utama kustomisasi penuh dan dukungan untuk agen
• Memiliki lebih dari 160 komponen React yang mendukung aksesibilitas dan penerapan tema merek, serta menyediakan dark mode, template siap deploy, dan CLI dalam satu sistem terpadu
• Berkembang di internal Meta selama 8 tahun terakhir menjadi sistem desain yang paling banyak dipakai dan berskala paling besar, menjalankan lebih dari 13.000 aplikasi serta disempurnakan oleh tim engineer, desainer, dan produk
• Mendukung banyak tema yang menyediakan semua design token seperti warna, spacing, radius, dan tipografi sebagai CSS custom properties
• Dapat digabungkan dengan AI coding tools melalui command line atau MCP untuk melakukan scaffolding proyek, menjelajahi template, membuat tema, dan menyediakan dokumentasi untuk agen
  • Jika instruksi instalasi awal ditempelkan ke AI coding tool, eksekusi npx astryx init akan otomatis menyiapkan dokumentasi agen
• Open internals: komponen tidak terkurung dalam API tingkat atas yang tertutup, bisa dikomposisikan pada level mana pun, dan building block yang diperlukan diekspor secara langsung
  • Dengan fitur swizzle, seluruh source komponen dapat diekstrak ke proyek sehingga bisa dimiliki dan dikelola sendiri
• Tidak ada styling lock-in: secara internal styling ditulis dengan StyleX, tetapi tidak diekspos ke pengguna; dapat dioverride melalui className memakai Tailwind/CSS modules/plain CSS
• Prinsip Guidance over enforcement: tidak memaksakan, melainkan menyediakan kemampuan—jika nilai diberikan, komponen akan merendernya apa adanya, sementara opini desain dimuat dalam dokumentasi dan contoh
  • Semua komponen mengikuti aturan penamaan/prop/komposisi yang sama dan terdokumentasi, sehingga baik manusia maupun AI dapat memprediksi perilaku komponen yang belum dikenal
• CLI berperan sebagai referensi komponen/token/template/dokumentasi
  • npx astryx component (daftar komponen), npx astryx docs (topik dokumentasi), npx astryx template --list (template halaman), npx astryx docs tokens (referensi spacing/warna/radius)
• Arsitektur: tersusun dalam 3 lapisan
  • Foundations: building block untuk konsistensi visual seperti tipografi, warna, layout, dan aksesibilitas
  • Components: lebih dari 150 building block UI reusable dengan dukungan TypeScript lengkap
  • Patterns: solusi desain yang sudah tervalidasi seperti halaman tabel, layout halaman detail, form wizard, navigasi, dan alur input data
• Menyediakan template production-ready yang hanya perlu diisi konten, serta aplikasi contoh lengkap dengan routing, tema, dan komponen yang sudah terhubung
• Lisensi MIT