Примечание автора: Astryx — React-дизайн-система с открытым исходным кодом от Meta, которая всё ещё находится в бета-версии. В ней собраны компоненты, темы и документация, рассчитанная на чтение агентами. Это не модель, и собственного API для больших языковых моделей у неё нет.
Когда агенты вроде Claude Code, Cursor или Codex меняют интерфейс на React, часто получается так: на одной странице кнопки со скруглёнными углами, на другой — без; одни диалоговые окна закрываются по клику на затемнение, другие — нет; отступы то 12px, то 14px. Дело не в возможностях модели, а в том, что у агента нет дизайн-системы, к которой можно обратиться. Ему приходится по памяти угадывать названия компонентов и их props. Astryx предлагает людям и агентам обращаться к одному и тому же справочнику компонентов: люди читают документацию на сайте, а агенты получают тот же контент через CLI, AGENTS.md или MCP.
Эта статья — не пересказ команд установки. Ниже разберём, какие сведения Meta приводит официально, какие результаты основаны на единичном эксперименте стороннего автора, а какие цифры можно проверить по состоянию на 2026-11-10, хотя со временем они изменятся. Отдельно перечислим проекты, которые сейчас не стоит переводить на Astryx.
Главное: прочитав статью, вы сможете понять, подходит ли Astryx вашему React-проекту, и подключить её за 4 шага так, чтобы люди и агенты работали с одним и тем же источником.
Выше — баннер, опубликованный Astryx. Посмотреть на реальный интерфейс можно в трёх официальных источниках — скриншоты в статье не приводятся:
- Сайт документации:
astryx.atmeta.com - Просмотр компонентов (Storybook):
astryx.atmeta.com/storybook/ - Онлайн-песочница (Sandbox):
astryx.atmeta.com/sandbox/
Ключевые моменты об Astryx: что это и чем не является
Сразу обозначим границы. В официальном репозитории Astryx описан как открытая дизайн-система с полностью настраиваемым внешним видом, созданная для совместной работы людей и агентов. Лицензия — MIT, основной язык — TypeScript. В README указано, что проект пока находится в бета-версии и ещё не достиг версии 1.0.
| Ключевой момент | Описание | Что это значит для вас |
|---|---|---|
| Технологическая основа | По официальной информации, система построена на React 19+ и StyleX | Проекты на React 18 не входят в список поддерживаемых |
| Количество компонентов | По официальным данным, доступно более 150 доступных компонентов с типами TypeScript | Основные элементы для типовых страниц уже есть |
| Настройка внешнего вида | Семь готовых тем; цвета, шрифты, скругления и анимации настраиваются на уровне токенов | Чтобы сменить стиль, достаточно изменить тему, а не каждый компонент по отдельности |
| Инструменты для агентов | CLI, автоматически созданный AGENTS.md и удалённый MCP |
Агент ищет информацию в документации, а не полагается на память |
| Интерфейс для моделей | Не предоставляется: подключить модель нужно самостоятельно с помощью инструмента разработки, например через APIYI apiyi.com | Для самого рендеринга компонентов модель не нужна |
История Astryx: что известно только со слов команды
Все перечисленные ниже сведения взяты из README и официальной статьи от 2026-06-18, автором которой указана команда Astryx. Это заявления самой компании, не прошедшие независимую проверку. По словам команды, Astryx восемь лет развивалась внутри Meta и стала самой широко используемой и крупной дизайн-системой компании, на которой работают более 13 000 приложений. В статье также приводится такой тезис: раньше дизайн-системы создавали для людей, а теперь всё больше кода пишут агенты. Поэтому Astryx изначально проектировали так, чтобы с ней мог работать ИИ, а не стали добавлять поддержку агентов постфактум.
В хронологии есть две даты — их важно не путать. Официальная статья вышла 2026-06-18, а пакет @astryxdesign/core впервые появился в npm 2026-06-24. Репозиторий GitHub был создан 2026-01-09: это дата создания репозитория, а не публичного запуска.
Чем Astryx отличается от полной замены дизайна и копирования компонентов
В официальной статье сравниваются два распространённых подхода. В таблице ниже передана только официальная позиция — без результатов сравнительных тестов:
| Подход | В чём, по описанию команды, проблема | Как распределены задачи в Astryx |
|---|---|---|
| Полная замена дизайна: взять целиком дизайн-систему крупной компании | Приложение перенимает фирменный стиль этой компании | Система отвечает за поведение, доступность и качество |
| Копирование: форкнуть код компонентов для каждого проекта | Нет единых обновлений, а за доступность отвечает сам пользователь | За внешний вид отвечает тема, её можно менять на уровне токенов |
| Astryx: установить пакет и изменить внешний вид с помощью темы | Система всё ещё в бета-версии и имеет номер версии 0.x | При необходимости можно извлечь исходный код отдельного компонента с помощью swizzle |
В README также перечислены четыре отличия. Во-первых, система открыта для глубокой настройки: компоненты можно комбинировать на любом уровне, часто используемые элементы экспортируются напрямую, а swizzle позволяет перенести полный исходный код компонента в ваш проект, после чего вы сами его поддерживаете. Во-вторых, стили не привязаны к системе: их можно переопределять с помощью className и использовать вместе с Tailwind, CSS modules или обычным CSS. В-третьих, для настройки не нужно создавать обёртку: тема — это, по сути, набор переопределений CSS-переменных. В-четвёртых, API, документацию и CLI проектировали вместе, поэтому и люди, и ИИ-ассистенты используют одну и ту же справочную информацию.
Сторонний пример: эксперимент одного автора со сменой темы
13 августа 2026 года LogRocket опубликовал статью, в которой автор Chizaram Ken подключил Claude Code к Astryx и создал три интерфейса, а затем сделал те же три интерфейса с помощью shadcn/ui. По словам автора, при смене темы с neutral на gothic ему понадобилось изменить два файла и четыре строки кода — файлы компонентов он не трогал.
Это личный эксперимент автора, а не бенчмарк и не результат тестирования, проведённого в этой статье. Эксперимент состоялся до выхода текущей версии 0.7.11, поэтому тогда использовалась другая версия. Его можно рассматривать как пример подхода, при котором темы отделены от компонентов, но не как доказательство производительности.
Быстрый старт с Astryx: 4 шага, чтобы подключить человека и агента к одному рабочему процессу
Эти 4 шага основаны на двух официальных документах: Getting Started и Working with AI. Для каждого шага указано, что нужно сделать в терминале или файле и какой результат будет означать, что всё готово. Ниже приведены шаги, составленные по официальной документации; в этой статье установка не запускалась.
Шаг 1. Установите четыре пакета Astryx
- Выполните в терминале:
npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex - Затем выполните:
npm install -D @astryxdesign/cli - Для pnpm и yarn команды будут другими, но названия пакетов останутся теми же.
- Критерий готовности: в
package.jsonуказаны все четыре пакета, а версииreactиreact-dom— 19 или выше.
StyleX нужно установить, потому что это peer-зависимость core. При этом, как отмечают разработчики, использование StyleX для стилей в Astryx остаётся незаметным для пользователей — менять настройки проекта не нужно. Компоненты принимают стили через xstyle, только если вы сами решите использовать StyleX.
Шаг 2. Сгенерируйте документацию для агента с помощью init
- Выполните в терминале:
npx @astryxdesign/cli init - Команда не требует взаимодействия с пользователем: её можно запускать вручную, в CI, скриптах и агенте.
- Критерий готовности: в корне проекта появился файл
AGENTS.md. Если в проекте уже естьCLAUDE.md, те же инструкции добавятся и в него.
Инструкции добавляются в CLAUDE.md, потому что, согласно документации, Claude Code пропускает AGENTS.md, если в проекте есть CLAUDE.md. Чтобы указать конкретный инструмент, можно добавить параметр, например --agent claude, --agent cursor, --agent codex или --agent all. Gemini CLI читает только GEMINI.md, поэтому команда init добавит туда строку со ссылкой на AGENTS.md.
Блок Astryx между маркерами в файле поддерживается самой Astryx. Команды init и upgrade меняют только этот блок и не затрагивают остальное содержимое, которое вы добавили самостоятельно. Разработчики также отмечают, что агенты часто ошибаются в пути к CLI, и рекомендуют добавить в package.json псевдоним скрипта:
- Имя скрипта:
astryx - Значение скрипта:
node node_modules/@astryxdesign/cli/clients/cli/bin/astryx.mjs - Запуск:
npm run astryx -- component --list
Шаг 3. Подключите CSS и оберните приложение в тему neutral
- Подключите
@astryxdesign/core/reset.cssв глобальном CSS. - Затем подключите
@astryxdesign/core/astryx.css. - Выполните в терминале команду
npx @astryxdesign/cli theme add neutral, чтобы создать модуль темы для приложения. - Импортируйте
Themeиз@astryxdesign/core/themeи оберните в него всё приложение, передавthemes[defaultThemeSlug]. - Импортируйте Button из
@astryxdesign/core/Button. В официальном примере используются два пропса:labelиonClick. - Критерий готовности: на странице отображается кнопка в стиле Astryx, а не стандартная кнопка браузера.
Для этого способа не нужны плагины сборки, настройка PostCSS или Babel. Но учтите: reset помещается в @layer reset, а стили компонентов — в @layer astryx-base. Если в проекте уже есть глобальный CSS, старый reset или Tailwind, порядок слоёв нужно задать вручную: стили без слоя переопределяют astryx-base независимо от специфичности селекторов. Перед началом работы над страницами разработчики Astryx рекомендуют прочитать два раздела из документации: npx @astryxdesign/cli docs migration/migration-setup.
Вот официальные описания семи готовых тем. Если у вас нет особых предпочтений, разработчики рекомендуют начать с neutral:
| Пакет темы | Официальное описание | Для чего подходит |
|---|---|---|
theme-neutral |
Приглушённые цвета, минимализм | Базовый вариант |
theme-butter |
Тёплый золотистый цвет с синими акцентами | Продуктам с тёплой палитрой |
theme-chocolate |
Шоколадные и карамельные оттенки | Стилю с нотками ретро |
theme-gothic |
Только тёмная тема, чернильная палитра в стиле нуар | Полностью тёмным интерфейсам |
theme-matcha |
Травянисто-зелёные оттенки | Стилю с природными мотивами |
theme-stone |
Тёплые нейтральные оттенки, напоминающие песчаник | Сдержанным панелям управления |
theme-y2k |
Яркий стиль начала 2000-х | Промостраницам и необычным продуктам |
Шаг 4. Попросите Agent писать UI по официальной инструкции из трёх шагов и при необходимости подключите MCP
Правила, созданные командой init, требуют, чтобы перед написанием UI Agent действовал в таком порядке:
npx @astryxdesign/cli build "<想法>": возвращает наиболее подходящий шаблон страницы (в нём будет как минимум каркас приложения), два альтернативных шаблона, а также список недостающих блоков и компонентов.npx @astryxdesign/cli template <名字> <路径>: добавляет шаблон в проект. При этом нужно сохранить исходный каркас и отступы, заменив только содержимое.npx @astryxdesign/cli component <组件名>: показывает props и примеры для каждого нужного компонента.- В правилах также перечислены запреты: каждую страницу нужно начинать с шаблона; не использовать голые
div; не писатьstyle={{}}; использовать токены, а не магические числа. - Критерий готовности: названия компонентов и props, на которые ссылается Agent, взяты из вывода CLI, а не придуманы им.
Проверить Agent можно с помощью трёх вопросов, рекомендованных разработчиками: каков правильный путь импорта Button; как настроить Dialog, чтобы его нельзя было случайно закрыть; какой prop использовать, чтобы передать items в Selector. Если Agent не может ответить, сначала выполните init. Правильные ответы зависят от вывода CLI на вашей машине.
Если нужно искать информацию удалённо, можно подключить официальный MCP по адресу https://astryx.atmeta.com/mcp. Он предоставляет два инструмента: search(query) для поиска компонентов, документации и шаблонов и get(name) для получения полной документации. Настройки различаются в разных клиентах:
| Клиент | Способ настройки | Примечания |
|---|---|---|
| Claude Code | Выполните в терминале claude mcp add --transport http astryx https://astryx.atmeta.com/mcp |
Имя сервиса — astryx |
| Cursor | В .cursor/mcp.json укажите только url |
Для удалённого сервиса не указывайте type |
| Cline | Для transport укажите streamableHttp |
Не http |
| Claude Desktop | В настройках выберите Connectors → Add custom connector и вставьте URL | В конфигурационном файле указывайте только локальный stdio |
| Другие универсальные клиенты | Укажите type со значением http и добавьте url |
Если клиент не распознаёт transport, он пропустит его. Подключение при этом будет отображаться как активное, но инструменты не появятся |
В официальной документации не указаны SLA для этого удалённого адреса и порядок действий при недоступности сервиса. CLI предоставляет локальный доступ к той же документации, поэтому, если MCP не подключается, можно продолжать пользоваться CLI.
Откуда берётся модель для кодирующего агента
Система дизайна отвечает за компоненты и документацию, но для генерации кода кодирующему агенту нужна отдельная модель. Если команда хочет сама подключить модель к таким инструментам, как Claude Code и Cursor, можно воспользоваться OpenAI-совместимым интерфейсом APIYI apiyi.com. Укажите https://api.apiyi.com/v1 в base_url, а в качестве имени модели задайте название из актуального списка моделей. Ориентируйтесь на список моделей и цены на платформе APIYI: сервис предоставляет доступные модели в соответствии с ним.
Важно: компоненты отображаются в браузере, поэтому им не нужен интерфейс модели. Использование APIYI никак не влияет на установку и работу Astryx.
🚀 Совет для быстрого старта: выполните описанные выше 4 шага в новой ветке и создайте страницу-шаблон. Затем попросите агента написать её дважды с использованием одной и той же модели: сначала с
AGENTS.md, затем без него. Сравните названия компонентов и props в обоих вариантах. Новые пользователи могут получить бесплатный тестовый лимит на APIYI apiyi.com, чтобы провести такое сравнение.
Риски Astryx и случаи, когда переходить на него не стоит
Риски, связанные с самим продуктом Astryx
Astryx всё ещё находится в статусе Beta, а его версия — 0.x. По состоянию на 2026-11-10 последняя версия в npm (latest) — 0.7.11 (выпущена 2026-11-07), а предыдущая стабильная версия 0.7.10 вышла 2026-11-06. Стабильные версии обновляются почти каждый день. При обновлении все используемые в проекте пакеты @astryxdesign/* нужно привести к одной версии, а затем выполнить команду npx @astryxdesign/cli upgrade --from <旧的 core 版本> --apply. Для каждой темы указана соответствующая версия core. Если забыть обновить тему, она окажется несовместима с core. Если пакетный менеджер откладывает установку новых версий в соответствии с датой выпуска, исключите весь диапазон @astryxdesign/*. В pnpm для этого нужно добавить @astryxdesign/* в minimumReleaseAgeExclude.
Пакеты для графиков @astryxdesign/vega и @astryxdesign/charts публикуются только под тегом canary в npm — стабильных версий у них нет. По состоянию на 2026-11-10 версия canary — 0.7.12-canary.dfd75a6. Хотя её номер выше, чем у latest, использовать её в продакшене не стоит.
Риски при подключении моделей через APIYI
Этот раздел касается только вызова моделей кодирующим агентом. Запросы проходят через шлюз APIYI, а API-ключом и расходами управляете вы сами. Фактические результаты зависят от выбранной модели и ответов шлюза. Это не вход в аккаунт Meta и не пул аккаунтов.
Для каких проектов пока не стоит переходить
- Проект всё ещё использует React 18: peer-зависимости core требуют
reactиreact-domверсии не ниже 19.0.0. - Стабильность уровня 1.0 нужна уже сейчас: официально Astryx пока обозначен как Beta, и такой гарантии нет.
- Стабильная версия библиотеки графиков нужна уже сейчас: для пакетов с графиками доступны только версии canary.
- Важно с самого начала хранить исходный код каждого компонента в собственном репозитории: такой подход предполагает копирование кода. По умолчанию Astryx устанавливается как пакет, а swizzle позволяет при необходимости извлечь исходный код отдельного компонента.
Популярность Astryx и версии: данные на 2026-11-10
Приведённые ниже цифры актуальны на 2026-11-10 и со временем изменятся. Не воспринимайте их как постоянные значения:
| Показатель | Значение | Источник |
|---|---|---|
| Звёзды GitHub | 20,217 | GitHub API meta/astryx |
| Forks | 1,536 | GitHub API |
| Незакрытые issue / PR | 297 / 373 | GitHub Search API (в сумме 670 — это не означает 670 ошибок) |
| Загрузки core за неделю | 661,968 раз (2026-11-02 по 11-08) | API загрузок npm: учитывает число загрузок, а не пользователей |
| Загрузки core за последние 30 дней | 1,725,492 раза (2026-10-10 по 11-08) | API загрузок npm |
Часто задаваемые вопросы
Вопрос 1. Astryx — это библиотека компонентов для Tailwind?
Нет. Согласно официальной документации, Astryx основан на React 19+ и StyleX и поставляется с предварительно скомпилированным CSS. Его можно использовать вместе с Tailwind: внешний вид компонентов можно переопределять с помощью `className`, а в каталоге `apps/` репозитория есть два примера — example-vite-tailwind и example-nextjs-tailwind. При совместном использовании учитывайте порядок CSS-слоёв, о котором говорилось выше.
Вопрос 2. Можно ли использовать Astryx в проекте на React 18?
Нет. Пакет `core` версии 0.7.11 требует, чтобы версии `react` и `react-dom` были не ниже 19.0.0. React 18 этому требованию не соответствует. Сначала проект нужно обновить до React 19.
Вопрос 3. Может ли Agent использовать документацию Astryx без MCP?
Да. Файл `AGENTS.md`, созданный командой init, и локальный CLI позволяют выполнить все три шага: build, template и component. MCP — это просто ещё один способ удалённого поиска. Если нужно вставить результат в веб-чат, используйте `—detail brief`, `—detail compact` или `—dense`, чтобы сократить вывод.
Вопрос 4. facebook/astryx и meta/astryx — это два разных репозитория?
Нет, это один и тот же репозиторий. По состоянию на 2026-11-10 адрес `github.com/facebook/astryx` возвращает ответ 301 и перенаправляет на `github.com/meta/astryx` — официальный адрес репозитория. В старых статьях под facebook/astryx имеется в виду именно он.
Вопрос 5. Можно ли использовать компоненты диаграмм Astryx в продакшене?
Пока не рекомендуем. `@astryxdesign/vega` и `@astryxdesign/charts` публикуются только под тегом canary, а в README прямо указано, что стабильной версии нет. Для продакшен-проектов пока лучше оставить существующее решение для диаграмм.
Вопрос 6. При обновлении достаточно обновить только core?
Нет. Согласно официальным рекомендациям, все пакеты `@astryxdesign/*`, используемые в проекте, нужно обновить до одной и той же версии, иначе тема не будет соответствовать core. После обновления выполните `upgrade —from <旧版本> —apply`: команда также обновит устаревший раздел Astryx в `AGENTS.md`.
Вопрос 7. Нужен ли для Astryx API моделей? Как он связан с APIYI?
Для рендеринга компонентов API моделей не нужен. Он требуется только тогда, когда вы поручаете кодинг-агенту писать код; за подключение модели отвечают такие инструменты, как Claude Code и Cursor. Если команда хочет самостоятельно предоставлять модели, через APIYI apiyi.com можно вызывать разные популярные модели с одним ключом. APIYI не сотрудничает ни с Meta, ни с Astryx.
Вопрос 8. Можно ли скопировать исходный код компонента в свой репозиторий и изменить его?
Да, но это не вариант по умолчанию. Swizzle добавляет полный исходный код отдельного компонента в ваш проект. Дальше его поддерживаете вы, и обновлять его тоже придётся самостоятельно. В официальной документации также рекомендуется использовать `theme eject` только в том случае, если вам действительно нужна отдельная ветка исходного кода.
Astryx: ключевые выводы
- Назначение: открытая дизайн-система Meta для React под лицензией MIT. Пока находится в бета-версии и на этапе 0.x.
- Разделение ответственности: система отвечает за поведение и доступность, а тема — за внешний вид. Для смены темы не нужно менять файлы компонентов.
- Обязательные требования: нужен React 19 или новее, а StyleX необходимо установить как peer-зависимость.
- Работа с агентом: сначала запустите
init, чтобы создатьAGENTS.md, а затем пишите страницу в порядке build → template → component. - MCP — по желанию: удалённый адрес —
https://astryx.atmeta.com/mcp, а локальный CLI служит точкой входа к той же документации. - Правила обновления: обновляйте все пакеты
@astryxdesign/*до одной версии. Пакет графиков доступен только в canary-версии. - Модель подключается отдельно: необходимую кодовому агенту модель можно подключить централизованно через APIYI (apiyi.com).
Итог: поможет ли Astryx агенту создавать единообразные интерфейсы
Интерфейсы, написанные агентом, часто выглядят по-разному, потому что ему приходится угадывать названия компонентов и их props. Astryx объединяет компоненты, темы и документацию для агента в одной системе:
- Подключение за 4 шага: установите четыре пакета, запустите init, подключите CSS и оберните приложение в Theme. Затем пусть агент изучит документацию в три этапа и приступает к работе.
- Разделяйте источники фактов: сведения о более чем 13 000 приложений и восьми годах внутреннего использования приводит сама компания. Утверждение, что для смены темы достаточно изменить четыре строки, основано на эксперименте стороннего автора. Число звёзд и загрузок указано по состоянию на 2026-11-10.
- Сначала убедитесь, что система вам подходит: если проект ещё работает на React 18, нужна стабильная версия пакета графиков или гарантии выпуска 1.0, миграцию можно отложить.
Если ваш проект уже использует React 19 и вы хотите, чтобы агент реже придумывал несуществующие props, попробуйте создать страницу на основе одного шаблона в отдельной ветке. Необходимую кодовому агенту модель можно подключить через APIYI (apiyi.com), а бесплатный тестовый лимит использовать, чтобы сравнить, как разные модели генерируют код на основе одного и того же AGENTS.md.
📚 Источники
- Репозиторий Astryx на GitHub: README, список пакетов, перечень тем и описание принципов
- Ссылка:
github.com/meta/astryx -
Примечание: основной источник официальной информации; ссылка facebook/astryx перенаправляет сюда
-
Официальная статья о Astryx: описание принципов дизайна, опубликованное 2026-06-18
- Ссылка:
astryx.atmeta.com/blog/introducing-astryx -
Примечание: сравнение с полной заменой оформления пакета и копированием с вставкой взято из этой статьи
-
Документация Getting Started и Working with AI: установка, темы, настройка init и MCP
- Ссылки:
astryx.atmeta.com/docs/getting-started,astryx.atmeta.com/docs/working-with-ai -
Примечание: официальные источники для четырёх шагов, описанных в статье
-
Примечания к выпуску Astryx v0.7.11: текущая стабильная версия и способ обновления
- Ссылка:
github.com/meta/astryx/releases/tag/v0.7.11 -
Примечание: источник требования использовать одну версию для всех пакетов
-
Статья LogRocket со сравнением: опубликована 2026-08-13, автор — Chizaram Ken
- Ссылка:
blog.logrocket.com/astryx-vs-shadcn-meta-ai-react-claude - Примечание: сторонний разовый эксперимент, проведённый на версии старше 0.7.11
Автор: техническая команда APIYI
Технические вопросы: если у вас возникли вопросы по подключению моделей к кодовым агентам, свяжитесь с нами через главную страницу официального сайта APIYI.
