Astryx - Meta द्वारा जारी किया गया open-source design system

• React और StyleX पर आधारित, जिसकी खासियत पूरी तरह customization और agent support है
• accessibility और brand themes लागू करने की क्षमता वाले 160 से अधिक React components के साथ, dark mode, तुरंत deploy किए जा सकने वाले templates और CLI को एक unified system में उपलब्ध कराता है
• Meta के अंदर पिछले 8 वर्षों में विकसित होकर सबसे ज्यादा इस्तेमाल होने वाला और सबसे बड़े पैमाने का design system बना; यह 13,000 से अधिक apps चलाता है और engineers/designers/product teams द्वारा लगातार refined किया गया है
• colors/spacing/radius/typography आदि सभी design tokens को CSS custom properties के रूप में उपलब्ध कराने वाले कई themes का support
• command line या MCP के जरिए project scaffolding, templates explore करना, theme generation और agents के लिए docs प्राप्त करना संभव, जिससे यह AI coding tools के साथ जुड़ता है
  • AI coding tool में शुरुआती installation instructions paste करने पर npx astryx init चलाकर agent docs अपने-आप set up हो जाते हैं
• Open internals: components किसी बंद top-level API में सीमित नहीं रहते, बल्कि किसी भी स्तर पर compose किए जा सकते हैं, और जरूरी building blocks सीधे export किए जाते हैं
  • swizzle feature से component का पूरा source project में extract करके उसे खुद own किया जा सकता है
• Styling dependency (lock-in) नहीं: internally styles StyleX में लिखे जाते हैं, लेकिन user को यह दिखाई नहीं देता; className के जरिए Tailwind/CSS modules/plain CSS से override किया जा सकता है
• Guidance over enforcement सिद्धांत — जोर-जबरदस्ती नहीं, capability देना: value pass करने पर component वैसा ही render करता है; design opinions docs और examples में शामिल हैं
  • सभी components समान naming/prop/composition rules का पालन करते हैं और documented हैं, इसलिए humans और AI दोनों unfamiliar component behavior का अनुमान लगा सकते हैं
• CLI components/tokens/templates/docs reference की भूमिका निभाता है
  • npx astryx component (components list), npx astryx docs (docs topics), npx astryx template --list (page templates), npx astryx docs tokens (spacing/colors/radius reference)
• Architecture: 3-layer structure
  • Foundations: typography, colors, layout, accessibility जैसी visual consistency के building blocks
  • Components: पूर्ण TypeScript support वाले 150 से अधिक reusable UI building blocks
  • Patterns: table pages, detail page layouts, form wizards, navigation, data input flows जैसे validated design solutions
• सिर्फ content डालने लायक production-ready templates, और routing/theme/components जुड़े हुए complete example apps उपलब्ध
• MIT license