Как Facebook годами строил интерфейсы внутри компании и что из этого получилось
Внутренние инструменты крупных компаний часто остаются за закрытыми дверями, обрастая костылями и специфичными решениями. Но иногда случается обратное: инструмент шлифуют годами, проверяют на тысячах приложений и в итоге отдают в open source. Именно так произошло с Astryx — дизайн-системой от Meta, которая восемь лет жила внутри их монорепозитория, а теперь стала доступна всем.
Что это за проект
Astryx — это не просто очередной набор кнопок и инпутов. Это фундамент, на котором в Meta построили больше 13 тысяч приложений. В основе лежат React и StyleX, а главная фишка в том, что система изначально проектировалась для работы в огромных масштабах.
Интересно, что разработчики называют её «agent ready». Это значит, что дизайн-система подготовлена не только для людей, но и для ИИ-агентов. В комплекте идет MCP-сервер (Model Context Protocol), который помогает нейросетям понимать структуру компонентов, генерировать код и документацию, опираясь на те же API, что использует живой программист.
Чем Astryx отличается от привычных библиотек
Если вы хоть раз пытались кастомизировать сложную дизайн-систему, то знаете, как часто авторы прячут внутренности компонентов «под капот». В Astryx выбрали другой путь.
Открытые внутренние механизмы
Все примитивы здесь экспортируются напрямую. Вам не нужно воевать с библиотекой, если стандартный компонент не подходит — вы можете собрать свой из тех же запчастей, которые использовали авторы. Это дает гибкость, которой часто не хватает в Material UI или Ant Design.
Умные отступы
Одна из самых раздражающих проблем в верстке — «двойные отступы», когда вложенные компоненты складывают свои padding и margin, ломая сетку. В Astryx реализована компенсация отступов с учетом контекста. Система понимает, где находится элемент, и сама корректирует пустые пространства, чтобы макет оставался чистым без ручных правок в CSS.
Темы на любой вкус
В репозитории сразу доступно десять тем: от нейтральной и строгой до радикальных вроде «gothic», «brutalist» или «y2k». Все они построены на каскаде CSS-переменных, так что перекрасить проект под свой бренд можно довольно быстро.
Что под капотом
Архитектура проекта разделена на несколько логических слоев.
- Foundations. Базовые вещи: типографика, цветовые палитры и сетки.
- Components. Больше 90 готовых блоков на TypeScript.
- Patterns. Это уже готовые рецепты для типовых страниц: таблицы, формы регистрации, визарды и дашборды.
Для управления всем этим добром есть CLI. С его помощью можно разворачивать шаблоны, генерировать темы или запускать кодмоды для обновления старого кода.
# Быстрый старт
pnpm add @astryxdesign/core @astryxdesign/theme-neutral
pnpm add -D @astryxdesign/cli
После установки разработчики рекомендуют прописать скрипт в package.json, чтобы не мучиться с путями, когда CLI вызывают ИИ-помощники или новые участники команды:
"scripts": {
"xds": "node node_modules/@astryxdesign/cli/bin/astryx.mjs"
}
Практическая польза
Astryx пригодится тем, кто строит сложные интерфейсы с большим количеством данных и состояний. Если вам нужно быстро собрать админку, внутренний портал или сложный SaaS-продукт, этот инструмент сэкономит недели на проектировании базовых взаимодействий.
Особенно проект зацепит тех, кто экспериментирует с автогенерацией кода через LLM. Благодаря JSDoc-аннотациям и специальным подсказкам для композиции, нейросети реже ошибаются при сборке интерфейсов из компонентов Astryx.
Стоит ли пробовать
Проект сейчас в бете, и это чувствуется. Документация местами лаконична, а некоторые пакеты вроде @astryxdesign/lab пока живут только внутри репозитория и не опубликованы в npm.
Кому стоит присмотреться:
- Командам, которые ищут гибкую замену тяжеловесным UI-китам.
- Разработчикам, использующим StyleX и ищущим нативный способ работы со стилями.
- Тем, кто строит инструменты, которыми в будущем будут управлять ИИ-агенты.
Если вы привыкли к Tailwind, подход StyleX может показаться непривычным, но опыт Meta подсказывает, что на больших дистанциях такая архитектура оправдывает себя. По крайней мере, 13 тысяч приложений внутри одной компании — это аргумент, который сложно игнорировать.
