Когда у команды уже есть UI, а дальше начинается обычная боль — «почему это опять чуть-чуть не так выглядит», «почему агент сгенерировал форму, но она развалилась», «почему один компонент живёт в трёх разных вариантах» — вот тут Astryx и пытается закрыть дыру. Не красивой витриной, а рабочим набором: компоненты, темы, CLI, шаблоны.

Ссылка на репозиторий: https://github.com/facebook/astryx. Кому читать: если вы делаете интерфейсы на React и вам нужна дизайн-система, которую можно не только подключить, но и нормально расширять. Кому можно пропустить: если у вас уже всё собрано на своём UI-kit и вы не планируете трогать структуру компонентов или подключать AI-ассистентов к сборке интерфейсов.

Если просто

Astryx — это open source design system от Meta, и меня тут сразу зацепило не слово «open source», а фраза про agents. Потому что обычно дизайн-системы делают вид, что они только для людей, а потом выясняется, что ИИ-ассистенту в этой куче названий, пропсов и исключений просто нечем дышать.

Здесь идея другая: один и тот же набор правил должен быть понятен и разработчику, и агенту. Я погуглила бы это так: не «магия для ИИ», а аккуратно оформленная среда, где у компонентов предсказуемые имена, одинаковые паттерны и нормальная документация.

И вот это, честно, уже полезнее любого маркетингового «AI-ready». Потому что агентам обычно не хватает не интеллекта, а рельс. Astryx как раз пытается дать рельсы.

Что это решает

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

Astryx обещает другое: 150+ доступных компонентов, темы, шаблоны, CLI и единые принципы сборки. Если верить README, это не просто набор кнопок и инпутов, а система, где можно брать готовые блоки, доезжать глубже в источник и не упираться в закрытый верхний API. Это важно. Потому что «красивый компонент» без возможности нормально его раскопать — это часто декоративная ловушка.

Мне особенно понравилось, что тут не заставляют переезжать в новую вселенную стилей. StyleX используется внутри, но для потребителя это скрыто. А снаружи можно жить с Tailwind, CSS Modules или обычным CSS. Вот это уже похоже на здравый смысл, а не на религиозный культ очередного фреймворка.

Как попробовать

Путь входа довольно приземлённый. Устанавливаете core, тему и CLI:

npm install @astryxdesign/core @astryxdesign/theme-neutral
npm install -D @astryxdesign/cli

Или через pnpm/yarn, если у вас там уже дом и тапочки. Для contributors в репозитории отдельно отмечают pnpm 10 через Corepack:

corepack enable
pnpm install

Дальше нужен базовый старт: несколько CSS-импортов и Theme Provider. README прямо говорит, что отдельный build plugin не нужен, как и PostCSS/Babel-конфиг. И вот тут я, если честно, выдохнула: меньше инфраструктурной возни — меньше шансов, что инструмент закончится на этапе «а почему у нас не поднялся билд».

Ещё есть CLI. В README предлагают добавить скрипт в package.json, чтобы не ловить путаницу с путями, особенно когда команду дергают агенты или новички:

"scripts": {
  "astryx": "node node_modules/@astryxdesign/cli/bin/astryx.mjs"
}

Потом можно запускать что-то вроде npm run astryx -- component --list. Это уже похоже на нормальный рабочий вход, а не на «ну дальше как-нибудь разберётесь».

3 сценария с примерами

Первый сценарий — вы делаете новый продукт и не хотите собирать UI по кускам. Задача: быстро поднять интерфейс с уже знакомыми паттернами. Как применить: берёте @astryxdesign/core, подключаете тему, используете готовые компоненты и шаблоны. Что получится: не голая страница, а система, где кнопки, формы и layout не спорят между собой.

Второй сценарий — у вас уже есть дизайн-система, но агентам сложно в ней ориентироваться. Задача: сделать так, чтобы ИИ-ассистент генерировал интерфейсы по вашим же правилам. Как применить: используете Astryx как общую «словарную базу» — одинаковые имена, предсказуемые props, CLI и документацию. Что получится: меньше ручной правки после автогенерации, потому что агенту есть на что опереться.

Третий сценарий — вам нужно быстро кастомизировать внешний вид без форка и переписывания половины UI. Задача: поменять бренд, тему, тон интерфейса. Как применить: тема здесь — это CSS custom properties, то есть набор переменных стилей. Проще говоря, вы переопределяете значения, а не вскрываете компоненты скальпелем. Что получится: свой визуальный стиль без тяжёлого перепиливания.

Где можно застрять

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

Ещё есть 138 open issues. Для живого проекта это не приговор, но и не знак «всё уже отполировано до стеклянного блеска». README очень уверенно говорит про “built for people and agents”, но такие фразы я всегда читаю с лёгким прищуром: идея хорошая, а вот насколько она реально экономит время именно у вас — надо проверять руками.

И ещё момент: если вы не живёте в React-экосистеме, или у вас уже крепко сидит свой UI-kit, или вы вообще не планируете использовать CLI и шаблоны, то половина ценности Astryx просто не раскроется. Тогда это будет красивый, но довольно тяжёлый чемодан.

Кому это нужно

Тем, кто строит интерфейсы на React и хочет не просто библиотеку компонентов, а систему с правилами. Тем, кто устал чинить визуальные расхождения между экранами. Тем, кто хочет, чтобы AI-ассистент не придумывал дизайн с потолка, а работал по тем же рельсам, что и команда.

Ещё это может быть полезно продуктовым командам, где уже есть зрелый дизайн-процесс, но не хватает общей технической сборки: темы, шаблоны, CLI, документация, единые паттерны.

Кому это не нужно

Если вам нужен маленький UI-kit на десять компонентов — Astryx, скорее всего, избыточен. Если вы не используете React — тоже мимо. Если вы не хотите разбираться в дизайн-системе как в системе, а хотите просто «вставить кнопку и поехать дальше», то тут будет многовато организационного веса.

И ещё: если у вас нет времени на beta-инструмент и вам нужна максимально спокойная, давно обкатанная библиотека, лучше не очаровываться красивой формулировкой про agents. Красивые слова интерфейс не собирают.

Вердикт Веры

Astryx мне кажется полезной не потому, что она модно говорит про ИИ, а потому что пытается навести порядок в самой скучной, но важной части разработки: в повторяемости. И вот это, по-моему, честная сила.

Но я бы не покупалась на весь блеск README сразу. Реальная ценность тут не в лозунге “AI-ready”, а в том, что компоненты, темы и CLI собраны в один предсказуемый путь. Если вам нужна шпаргалка для живой работы с UI, Astryx стоит посмотреть. Если нет — пусть полежит до того дня, когда интерфейс начнёт расползаться по швам.

Что читать дальше

Материалы