Meta открыла Astryx: дизайн-систему на React 19 и StyleX для людей и ИИ-агентов

Любой, кто просил кодинг-агента собрать экран, знает результат. Работает, выглядит прилично, но кнопки чуть другого радиуса, отступы взяты с потолка, а цвета не из вашей палитры. Через неделю в репозитории три варианта одной и той же карточки. Meta попробовала решить это на уровне инструментов и открыла Astryx — дизайн-систему, рассчитанную и на людей, и на ИИ-агентов, которые с ними работают.

Какую проблему решает Astryx

Когда у агента нет готовых строительных блоков, он выдумывает их на лету. Модель видела тысячи интерфейсов, поэтому результат обычно правдоподобный, но не ваш. Ревьюеру приходится вручную выправлять стили, а дизайнеру — объяснять, почему в продукте появился ещё один оттенок серого.

Классическая дизайн-система писалась для людей. Её читают глазами, по картинкам в Figma и страницам в Confluence. Агенту нужно другое: чёткий список компонентов, понятные имена, примеры использования и ограничения, которые он не сможет обойти. Идея Astryx в том, чтобы дать агенту реальную систему вместо свободы творчества. Один и тот же набор компонентов используют и разработчик, и его ассистент.

Что известно на сегодня

Из анонса следуют такие факты:

• система полностью кастомизируемая;
• построена на React 19 и StyleX;
• есть документация, Storybook и живая песочница;
• лицензия MIT;
• проект в стадии беты.

StyleX — это CSS-in-JS-библиотека самой Meta, которая на этапе сборки превращает стили в статичные атомарные классы. Для агента это удобно: стили описываются предсказуемо и типизированно, а не россыпью произвольных строк. Лицензия MIT означает, что систему можно брать в коммерческий продукт и форкать без юридической возни.

Как именно устроена работа с агентами, из поста не ясно. Неизвестно, есть ли отдельные инструкции для агентов, готовые правила или интеграция с протоколами вроде MCP. Это нужно проверять в документации, а не додумывать по заголовку.

Как это выглядит на практике

Представьте задачу «собери страницу настроек профиля». Без дизайн-системы агент пишет свои инпуты, свои переключатели и свою сетку. С Astryx он импортирует готовые компоненты и собирает из них страницу. Если компонент нужно подправить, правка делается один раз в системе и сразу попадает во все экраны.

Песочница и Storybook здесь не мелочь. Первое позволяет за пять минут понять, подходит ли система вашему стилю. Второе даёт и людям, и агентам каталог состояний каждого компонента: загрузка, ошибка, отключённое состояние. Именно на этих состояниях сгенерированный интерфейс обычно и разваливается.

Ограничения и что делать

Главное ограничение — бета. API могут поменяться, а часть компонентов может быть сырой. Тащить Astryx в боевой продукт с миллионом пользователей сегодня рискованно. Второе ограничение — стек. Если вы на Vue, Svelte или на React со своим Tailwind, миграция на StyleX может стоить больше, чем выигрыш.

Практический вывод для команд, которые уже работают с агентами:

1. Откройте песочницу и прогоните один реальный экран через своего агента, дав ему доступ к документации Astryx.
2. Сравните результат с тем, что агент выдаёт без системы: сколько правок потребовалось ревьюеру.
3. Даже если Astryx не подойдёт, возьмите принцип. Агенту нужна не картинка в Figma, а машиночитаемый каталог компонентов с примерами и ограничениями.

Главная мысль не про Meta, а про сдвиг: дизайн-системы начинают проектировать с расчётом на то, что одним из пользователей будет модель. Команды, которые это поймут раньше, получат более предсказуемый код от агентов и меньше споров на ревью.