Meta открыла Astryx: дизайн-система с 160+ компонентами, семью темами и CLI — для людей и ИИ-агентов

Meta выпустила Astryx — open-source дизайн-систему, которая росла внутри компании последние восемь лет и стала её самой используемой. Система доступна в бета-версии и включает 160+ компонентов с полной поддержкой TypeScript, семь готовых тем, тёмный режим, шаблоны и CLI. Всё работает на React и StyleX: импортируешь CSS и типизированные компоненты — никаких дополнительных плагинов или стилевых библиотек.

Ключевая идея Astryx — разделить поведение и внешний вид. Большинство дизайн-систем заставляют выбирать: либо берёшь чужую систему и получаешь чужой стиль, либо копипастишь компоненты и теряешь единообразие и поддержку. Astryx решает это через токены: тема — это просто набор CSS-переменных (цвет, типографика, радиусы, анимация), которые дизайнер может менять без форка исходников. Принципы системы: направление вместо принуждения, сильные документированные конвенции, одна система для людей и ИИ, и проверка метриками.

Архитектура состоит из трёх уровней: Foundations (типографика, цвет, доступность), Components (160+ переиспользуемых блоков) и Patterns (проверенные решения для таблиц, форм, навигации). Два решения делают систему особенно гибкой: компоненты можно составлять на любом уровне, а swizzle позволяет извлечь полный исходник компонента в проект, когда нужен полный контроль. Стилизация на StyleX остаётся невидимой для пользователя — можно переопределять через className с Tailwind, CSS-модулями или обычным CSS.