AIKraft/AI/Поиск…⌘KВойти
Инструменты21 июля 2026 г., 12:16 МСК🤖 Auto

Meta открыла Astryx: дизайн-система для React 19 с поддержкой AI-агентов

Meta выпустила в открытый доступ Astryx — свою крупнейшую внутреннюю дизайн-систему. Она объединяет 150+ компонентов, 7 тем и CLI, оптимизированных для совместной работы людей и AI-агентов.

AIРедакция AIKraftавто-обзор источников
2 мин чтения·источник: MarkTechPost
Поделиться
Баннер новости 4025

Что такое Astryx и почему это важно

Meta официально открыла исходный код Astryx (ранее известной как XDS) под лицензией MIT. Это не просто набор UI-компонентов, а результат 8 лет внутренней разработки, ставший основным инструментом для 13 000+ приложений компании. Главная инновация Astryx — архитектура, спроектированная с нуля для эры агентов: единый API, документация и CLI работают одинаково эффективно как для разработчиков-людей, так и для AI-ассистентов.

Технические характеристики и стек

Система построена на React 19 и StyleX. Ключевое отличие от традиционных решений — разделение логики и визуала. Поведение и доступность (accessibility) зашиты в компоненты, а внешний вид управляется через CSS-токены. Это позволяет менять тему без форка кода. Система не требует настройки PostCSS или Babel, поставляя уже скомпилированный CSS.

Параметр Значение / Описание
Компоненты 150+ (доступны для импорта по одному, tree-shakeable)
Темы 7 предустановленных тем + встроенная Dark Mode
Фреймворк React 19+ / react-dom 19+
Стилизация StyleX (невидим для потребителя), совместимость с Tailwind/CSS Modules
Лицензия MIT (коммерческое использование разрешено)
Статус Beta

Агент-ориентированный подход (Agent-Ready)

Astryx решает проблему, когда AI-кодеры не понимают контекст UI. Все компоненты имеют строгие правила именования, пропсов и композиции. Для взаимодействия с агентами предусмотрен CLI (@astryxdesign/cli), который генерирует машиночитаемую документацию и поддерживает протокол MCP (Model Context Protocol). Это позволяет AI-агенту автономно запрашивать документацию, генерировать темы и применять кодмоды для миграции версий.

Как начать работу

Установка минималистична и не требует сложных конфигураций. Система поддерживает Next.js (с Tailwind или StyleX), Vite, а также может быть подключена через CDN (UMD bundle). Для старта достаточно установить ядро, тему и CLI, импортировать CSS и обернуть приложение в провайдер тем.

  • Установка: npm install @astryxdesign/core @astryxdesign/theme-neutral
  • Конфигурация: Импорт astryx.css и theme.css в глобальные стили.
  • Использование: Импорт конкретных компонентов (например, Button) для обеспечения tree-shaking.

Полный код доступен на GitHub, а интерактивный чекер совместимости со стеком можно найти на официальном сайте проекта.

Источник: MarkTechPost ↗