Astryx - Meta’nın yayımladığı açık kaynak tasarım sistemi

• Tam özelleştirme ve ajan uyumluluğu ile öne çıkan, React ve StyleX tabanlı bir sistem
• Erişilebilirlik ve marka teması uygulama desteği sunan 160’tan fazla React bileşeni içerir; koyu mod, hemen dağıtıma hazır şablonlar ve CLI’ı tek bir entegre sistemde sağlar
• Meta içinde son 8 yılda büyüyerek en çok kullanılan ve en büyük ölçekli tasarım sistemi hâline geldi; 13.000’den fazla uygulamayı çalıştırıyor ve mühendisler, tasarımcılar ile ürün ekipleri tarafından olgunlaştırıldı
• Renk, aralık, radius, tipografi gibi tüm tasarım token’larını CSS özel özellikleri olarak sunan çoklu tema desteği
• Komut satırı veya MCP üzerinden proje iskeleti oluşturma, şablon keşfi, tema üretimi ve ajanlara yönelik dokümantasyon sağlama imkânı sunarak yapay zeka kodlama araçlarıyla birleşir
  • Yapay zeka kodlama aracına ilk kurulum yönergesini yapıştırdığınızda npx astryx init çalıştırılarak ajan dokümantasyonu otomatik ayarlanır
• Açık iç yapı (Open internals): Bileşenler kapalı bir üst seviye API’ye hapsedilmez; her seviyede birleştirilebilir ve gerekli yapı taşları doğrudan export edilir
  • swizzle özelliğiyle bir bileşenin tüm kaynak kodunu projeye çıkarıp doğrudan sahiplenebilirsiniz
• Stil bağımlılığı (lock-in) yok: İçeride stiller StyleX ile yazılır ancak kullanıcıya görünmez; className üzerinden Tailwind/CSS modules/plain CSS ile override edilebilir
• Zorlamadan yetenek sağlayan rehberlik öncelikli (Guidance over enforcement) ilke: değerleri ilettiğinizde bileşen olduğu gibi render edilir; tasarım görüşleri dokümantasyon ve örneklere dahildir
  • Tüm bileşenler aynı adlandırma/prop/bileşim kurallarını izler ve dokümante edilmiştir; böylece hem insanlar hem de yapay zeka, aşina olmadığı bileşenlerin davranışını öngörebilir
• CLI, bileşen/token/şablon/dokümantasyon referansı rolü görür
  • npx astryx component (bileşen listesi), npx astryx docs (dokümantasyon konuları), npx astryx template --list (sayfa şablonları), npx astryx docs tokens (aralık/renk/radius referansı)
• Mimari: 3 katmanlı yapı
  • Foundations: Tipografi, renk, yerleşim, erişilebilirlik gibi görsel tutarlılığın yapı taşları
  • Components: Tam TypeScript destekli, yeniden kullanılabilir 150’den fazla UI yapı taşı
  • Patterns: Tablo sayfaları, detay sayfası yerleşimleri, form sihirbazları, navigasyon, veri giriş akışları gibi doğrulanmış tasarım çözümleri
• Yalnızca içerik eklemeniz gereken production-ready şablonlar ve routing/tema/bileşenleri bağlanmış eksiksiz örnek uygulamalar sunar
• MIT lisansı