Meta Astryx de código abierto: un sistema de diseño React listo para agentes con más de 150 componentes accesibles, siete temas y una CLI

Meta ha lanzado Astryx, un sistema de diseño de código abierto que es totalmente personalizable y está diseñado para ser operado tanto por personas como por los agentes de IA que trabajan junto a ellos. Está disponible ahora en Beta. Astryx no es un experimento nuevo. Creció dentro de Meta durante los últimos ocho años, donde, según la compañía, se convirtió en su sistema de diseño más grande y más utilizado, moldeado por los ingenieros, diseñadores y equipos de productos que dependen de él a diario.

El sistema incluye más de 150 componentes accesibles (el sitio de documentos ahora enumera más de 160), temas a nivel de marca, modo oscuro, plantillas listas para enviar y una CLI como un paquete cohesivo. Está construido sobre React y StyleX. Importa CSS prediseñado y utiliza componentes de React escritos. No hay ningún complemento de compilación que conectar ni ninguna biblioteca de estilos que adoptar.

La compensación que Astryx está tratando de eliminar

La mayoría de los sistemas de diseño obligan a tomar una decisión. Adopte el sistema de una gran empresa y su aplicación tenderá a parecerse al producto de otra persona. En su lugar, opte por copiar y pegar componentes y cada proyecto bifurcará sus propios fragmentos, sin coherencia compartida, sin correcciones iniciales y la accesibilidad se convertirá silenciosamente en su problema.

Astryx separa las dos preocupaciones. El sistema controla el comportamiento, la accesibilidad y la calidad. Los temas controlan su apariencia. Puedes personalizar a nivel de token (color, tipo, radio, movimiento) para que la aplicación se vuelva inconfundiblemente tuya sin reescrituras. Un tema es simplemente un conjunto de anulaciones de propiedades personalizadas de CSS, por lo que un diseñador puede cambiar el tema de Astryx sin bifurcar ni ajustar la fuente del componente.

Sus principios de diseño declarados son orientación sobre la aplicación, convenciones sólidas documentadas, un sistema para humanos y IA, y se obtienen mediante mediciones: las convenciones se prueban, no se afirman.

Arquitectura: cimientos, componentes, patrones.

Astryx está organizado en tres capas. Los fundamentos son los primitivos para interfaces cohesivas y accesibles: tipografía, color, diseño y accesibilidad. Los componentes son más de 150 bloques de construcción reutilizables, todos con soporte completo para TypeScript. Los patrones son soluciones probadas en batalla para flujos de trabajo comunes: páginas de tablas, diseños de detalles, asistentes de formularios, navegación y flujos de entrada de datos.

Dos decisiones de diseño lo hacen inusualmente abierto. Los componentes se componen en cualquier nivel en lugar de estar bloqueados detrás de una API cerrada de nivel superior, y swizzle puede expulsar el código fuente completo de un componente a su proyecto cuando necesite poseerlo. El estilo se crea con StyleX pero permanece invisible para los consumidores, por lo que puedes anularlo con className usando Tailwind, módulos CSS o CSS simple, lo que sea que ya use el proyecto. La siguiente explicación muestra cómo un conjunto de componentes cambia de estilo en los siete temas enviados de Astryx cuando solo cambian los tokens.

Explicador de Astryx – Marktechpost

Creado para agentes, no adaptado para ellos

Meta enmarca a Astryx como una respuesta a cómo se escribe ahora el software. A medida que los agentes producen más código, según el argumento, los sistemas de diseño deben repensarse en lugar de parchearse. La API, las convenciones, los documentos y la CLI se diseñaron juntos, por lo que una persona y un asistente de IA construyen de la misma manera a partir de la misma referencia. Cada cambio que hizo que Astryx fuera más fácil para la IA, señala el equipo, también lo hizo más fácil para las personas.

Eso se nota en las herramientas. La CLI (@astryxdesign/cli) puede enumerar y estructurar plantillas, imprimir documentos de componentes completos, generar y crear temas, ejecutar codemods para migrar versiones y mostrar documentos legibles por máquina desde la línea de comandos o a través de MCP. Los componentes se entregan con reglas consistentes de nomenclatura, accesorios y composición, por lo que una vez que aprendes algunas, tanto las personas como los modelos pueden predecir cómo se comporta uno desconocido.

Requisitos y cómo implementarlo.

Debido a que Astryx es una biblioteca front-end, “implementarla” significa agregarla a una aplicación React. El paquete (@astryxdesign/core, denominado internamente XDS) enumera React y react-dom ≥ 19.0.0 como dependencias de pares, junto con StyleX. Incluye CSS prediseñado, por lo que no es necesario agregar ninguna configuración de PostCSS o Babel. Las configuraciones admitidas incluyen Next.js con Tailwind, Next.js con StyleX, Vite y una ruta CDN sin compilación a través del paquete UMD en unpkg o jsDelivr. El verificador interactivo a continuación genera los pasos exactos de instalación y configuración para su pila y marca cualquier cosa que deba cambiar primero.

Comprobador de implementabilidad de Astryx – Marktechpost

Conclusiones clave

Astryx es el sistema de diseño interno más grande de Meta, ahora de código abierto bajo el MIT. Más de 150 componentes de React accesibles, siete temas, modo oscuro, plantillas y una CLI. El comportamiento y la accesibilidad viven en el sistema; Look vive en temas de token CSS. Creado primero para el agente: una API, documentos y CLI (más MCP) para humanos y IA por igual. Requiere reaccionar 19+; Incluye CSS prediseñado sin complemento de compilación y actualmente es Beta.

Fuentes: astryx.atmeta.com y github.com/facebook/astryx