Meta открыла Astryx - дизайн-систему, которую читают ИИ-агенты
Meta открыла Astryx - дизайн-систему для React на базе StyleX, которая росла внутри монорепозитория Meta восемь лет. К ней идут CLI и MCP-сервер, так что и разработчики, и ИИ-агенты собирают интерфейсы через один API. В системе 90+ компонентов и 10 тем на каскаде CSS-переменных. Проект в бете, лицензия MIT.
Meta выложила в открытый доступ Astryx - дизайн-систему для React, которая росла внутри монорепозитория компании восемь лет. Проект пока в бете, но уже обкатан в проде Meta.
Что это
Astryx - это и библиотека компонентов, и система вокруг неё: основы, компоненты, шаблоны и темы. В официальном репозитории документировано больше 90 React-компонентов, на сайте документации - больше 150. Шаблоны собирают целые страницы: дашборды, настройки, формы. Лицензия MIT, около трёх четвертей кодовой базы написано на TypeScript.
Слой стилей на StyleX
Astryx построена на StyleX - движке Meta, который компилирует стили в статический атомарный CSS на этапе сборки. Meta открыла StyleX в конце 2023 года, на нём работают Facebook, Instagram, WhatsApp и Threads, а из внешних компаний его используют Figma и Snowflake. Astryx поставляет готовый CSS, поэтому плагин сборки не нужен.
Зачем это агентам
Главное отличие от других дизайн-систем - документация и инструменты, которые могут читать ИИ-агенты. Компоненты несут JSDoc-аннотации с подсказками по композиции. Есть CLI (вызывается как astryx или сокращённо xds) и MCP-сервер. CLI возвращает самоописывающийся JSON-манифест: в нём перечислены все команды, аргументы, флаги и типы ответов - что-то вроде OpenAPI-спеки для CLI. Агенту не нужно парсить текст –help, он читает одну структурированную выдачу и через MCP может скаффолдить и документировать интерфейс.
Темы и автоматические отступы
В комплекте 10 готовых тем: default, neutral, daily, butter, chocolate, matcha, stone, gothic, brutalist и y2k. Темизация работает через каскад CSS-переменных: меняешь переменные - и все компоненты перекрашиваются, код компонентов остаётся нетронутым. Отдельная фишка - context-aware spacing compensation: вложенные блоки с отступами не складывают паддинги в «двойной отступ», и чинить это вручную не нужно. Примитивы при этом открыты и компонуются на любом уровне.
Чего стоит ждать и где осторожнее
Простейший путь установки - Next.js плюс Tailwind, документированы также Vite и StyleX-only. Ближайший знакомый аналог - shadcn/ui: обе системы про композицию и CLI-скаффолдинг, но Astryx отличается движком StyleX и MCP-инструментами. Минусы тоже честно отмечены: статус беты, CLI пока на версии 0.0.14, у StyleX более крутая кривая обучения, чем у Tailwind, а число компонентов в репозитории и на сайте документации расходится.
Что это значит
Если ты собираешь UI с помощью ИИ-агента, MCP-сервер из коробки - готовый мост между агентом и реальным кодом интерфейса. Агент собирает страницу не «на глаз», а по той же системе, что и команда. Но проект молодой как публичный, так что API и версии ещё могут меняться - закладывайся на это.