✅ Устали от сложного React‑дизайна? Astryx + CLI решит

Что такое Astryx и зачем он нужен?

Astryx – это открытая дизайн‑система от Meta, построенная на React и собственном CSS‑движке StyleX. Проект созревал внутри монорепозитория Meta целых восемь лет, а сейчас находится в открытом бета‑режиме. По сути, Astryx представляет собой набор фундаментальных стилей, готовых React‑компонентов, шаблонов страниц и десяти предустановленных тем, всё под лицензией MIT.

Ключевые элементы Astryx

Foundations – типография, цветовая палитра, сетка, доступность.
Components – более 90 компонентов в репозитории (на сайте документации их уже 150+), каждый из которых поддерживает автоматический отступ, тёмный режим и кастомные стили.
Templates – готовые макеты для дашбордов, форм, страниц настроек.
Themes – 10 тем (default, neutral, daily, butter, chocolate, matcha, stone, gothic, brutalist, y2k) реализованы через каскад CSS‑переменных, что позволяет менять внешний вид без правки кода компонентов.
Tooling – CLI (команда astryx или сокращение xds) и MCP‑сервер (Model Context Protocol) для автоматизированного сканирования и генерации UI.

StyleX: почему стоит обратить внимание

StyleX компилирует стили в статический атомарный CSS во время сборки. Это значит, что в продакшн‑билде уже лежит полностью готовый набор классов – никаких дополнительных плагинов для Webpack или Vite не требуется. Технология уже проверена в работе Facebook, Instagram, WhatsApp и Threads, а также используется внешними компаниями (Figma, Snowflake).

Автоматический отступ – спасение от «двойного padding»

В Astryx реализована «контекст‑aware spacing compensation». Компоненты сами «чувствуют», находятся ли они внутри другого отступа, и корректируют внутренние отступы, избавляя от ручных правок и спасая часы отладки.

«Agent‑Ready»: как система взаимодействует с ИИ‑агентами

Все компоненты снабжены JSDoc‑аннотациями, содержащими подсказки по композиции.
CLI возвращает машинно‑читаемый JSON‑манифест (astryx manifest --json), который описывает каждую команду, её параметры и типы возвращаемых данных – аналог OpenAPI, но для CLI.
MCP‑сервер позволяет агенту получать полные шаблоны страниц и их исходный код без парсинга вывода консоли.

Пример запросов:

npx astryx component Button        # подробная документация компонента
npx astryx template dashboard      # генерирует исходный код дашборда
npx astryx manifest --json         # возвращает JSON‑спецификацию CLI

Тематизация через каскад CSS‑переменных

Темы в Astryx построены на переменных, например --color-primary. Изменив значение переменной в теме, вы мгновенно меняете внешний вид всех компонентов, использующих эту переменную. Это упрощает работу с мульти‑брендовыми продуктами: достаточно переключить тему, а не править каждый компонент.

Быстрый старт: минимальная конфигурация

# Устанавливаем ядро и выбранную тему
npm install @astryxdesign/core @astryxdesign/theme-neutral
# Устанавливаем CLI как dev‑зависимость
npm install -D @astryxdesign/cli

Оборачиваем приложение в провайдер темы (пример для Next.js):

'use client';
import type {ReactNode} from 'react';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';

export function Providers({children}: {children: ReactNode}) {
  return <Theme theme={neutralTheme}>{children}</Theme>;
}

И используем компоненты как обычные React‑элементы:

import {Button} from '@astryxdesign/core/Button';

export default function Page() {
  return <Button label="Сохранить" variant="primary" />;
}

Когда Astryx действительно shines?

Внутренние дашборды и админ‑панели. Быстрая сборка сложных UI с готовыми шаблонами и таблицами.
AI‑генерируемый UI. Агент может вызвать CLI, получить JSON‑манифест и сгенерировать страницу настроек без человеческого вмешательства.
Мульти‑брендовые продукты. Переключение тем позволяет обслуживать несколько брендов одной кодовой базой.

Сравнительная таблица: Astryx vs. популярные альтернативы

Shadcn/ui – похожа в подходе к композиции и CLI, но использует Tailwind + Radix primitives вместо StyleX.
MUI (Material‑UI) – зрелая платформа с огромным набором компонентов, но без автоматического отступа и «agent‑ready» инструментария.
StyleX в Astryx дает атомарный CSS на этапе сборки, тогда как у конкурентов зачастую работает runtime‑инжекция стилей.

Сильные и слабые стороны Astryx

Плюсы:

Compile‑time стилизация от Meta, проверенная в продакшене.
Полностью открытые примитивы – можно «вытащить» любой уровень и переиспользовать.
10 настраиваемых тем без изменения кода компонентов.
CLI + MCP делают систему готовой к автоматизации via AI.
Автоматический отступ избавляет от частого UI‑багa.
MIT‑лицензия, поддержка Next.js, Vite, Tailwind.

Минусы: