Астрикс: Open Source дизайн-система Meta с более чем 150 компонентами, настраиваемая и готовая для AI-агентов

Meta открыла исходный код Astryx — дизайн-системы на основе React и StyleX, включающей более 150 компонентов. Сейчас она находится в бета-версии, но уже используется в более чем 13 000 внутренних приложений Meta и создавалась на протяжении восьми лет инженерами, дизайнерами и продуктовыми командами.

Ключевые возможности из источника

• Количество компонентов: более 150 доступных и настраиваемых компонентов React со встроенными отступами, тёмной темой и гибкими стилями.
• Поддержка CLI и MCP: создание проектов, просмотр шаблонов, генерация тем и получение документации, готовой для агентов, из командной строки или через протокол Model Context Protocol (MCP).
• Настраиваемая темизация: начните с готовых тем и адаптируйте их без необходимости начинать с нуля.
• Готовые к использованию шаблоны: шаблоны для типовых страниц — просто добавьте свой контент.
• Создано на StyleX: собственном CSS-in-JS решении Meta, также с открытым исходным кодом, обеспечивающем стилизацию без затрат во время выполнения.

Практические детали с сайта

На главной странице демонстрируется полноценный интерфейс электронной коммерции: управление запасами с фильтрами (категории, местоположения, теги), живой чат-агент для отслеживания заказов и возвратов, корзина покупок со способами доставки и панель доходов. Дизайн-система включает такие компоненты, как Badge, Checkbox, Switch, Buttons, Cards и другие — все они доступны в проводнике компонентов.

CLI можно использовать для генерации тем и создания проектов. Для интеграции агентов Astryx поддерживает MCP-сервер, позволяя AI-агентам просматривать компоненты, генерировать темы и получать документацию прямо из командной строки.

Astryx распространяется с открытым исходным кодом по разрешительной лицензии (MIT или аналогичной, уточните в репозитории). Проект доступен по адресу astryx.atmeta.com. Для начала работы установите пакет и запустите CLI:

npm install astryx
npx astryx init --template default
npx astryx theme generate --brand-color #3355FF
npx astryx agent setup --mcp

Эти команды взяты из описания сайта; точный синтаксис может отличаться.

Для кого предназначено

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