Meta ha publicado como código abierto Astryx, el sistema de diseño que ha desarrollado internamente durante ocho años y que, según la compañía, es el más usado de la empresa, con más de 13.000 aplicaciones. Reúne más de 150 componentes accesibles para React, temas, modo oscuro, plantillas y una herramienta de línea de comandos, y está diseñado expresamente para que personas y asistentes de IA construyan interfaces de la misma forma. Se distribuye con licencia MIT y está en fase beta.
Las claves de Astryx en 20 segundos
- Es el sistema de diseño interno de Meta, ahora abierto con licencia MIT.
- Incluye más de 150 componentes React, siete temas y una CLI.
- Su API y su documentación están pensadas para que los agentes de IA las usen igual que una persona.
El repositorio, meta/astryx en GitHub, supera las 23.500 estrellas, y la documentación, el Storybook y un entorno de pruebas están en astryx.atmeta.com. Astryx necesita React 19 o superior y está construido sobre StyleX, la biblioteca de estilos de Meta, aunque eso es invisible para quien lo usa: se importa CSS ya compilado y componentes React tipados, sin plugins de compilación ni configuración de PostCSS o Babel.
Un sistema de diseño «listo para agentes»
Lo que distingue a Astryx de otras bibliotecas de componentes es su planteamiento hacia la IA. Meta asegura que la API, las convenciones, la documentación y la CLI se han diseñado juntas para que un desarrollador y un asistente de programación trabajen desde la misma referencia, y que cada cambio que lo hizo más fácil para la IA lo hizo también para las personas. Todos los componentes siguen las mismas reglas de nombres, propiedades y composición, de modo que un modelo puede predecir cómo se comporta uno que no conoce.
La CLI, @astryxdesign/cli, sirve para consultar la documentación de componentes, generar plantillas y temas o aplicar codemods, y puede instalarse de forma global para que cualquier agente de programación del equipo «conozca» Astryx en cualquier carpeta. El propio README recomienda añadir un script en package.json para evitar errores de ruta cuando un asistente de IA invoca la herramienta. Es una señal de hacia dónde va el desarrollo de interfaces: buena parte del código ya lo escriben herramientas como Claude Code, Cursor o Codex, y los sistemas de diseño empiezan a documentarse pensando en ellas.
Abierto por dentro y sin imponer estilos
Meta destaca tres decisiones de diseño. Los componentes exponen sus piezas internas para poder componerlos a cualquier nivel, y una función llamada swizzle copia el código fuente completo de un componente al proyecto para modificarlo. No obliga a usar una biblioteca de estilos concreta: se puede sobrescribir con className usando Tailwind, módulos CSS o CSS normal. Y un tema es un conjunto de variables CSS, así que un diseñador puede cambiar la identidad visual sin bifurcar los componentes. Hay siete temas listos: neutral, butter, chocolate, matcha, stone, gothic y y2k.
Además de componentes, Astryx incluye patrones probados para páginas de tablas, vistas de detalle, asistentes de formularios y navegación. Los componentes de gráficos y el envoltorio de Vega todavía solo se publican como versiones canary, sin versión estable. Al estar en beta, conviene esperar cambios en la API antes de adoptarlo en un producto grande.
Preguntas frecuentes
¿Qué es Astryx?
El sistema de diseño interno de Meta, publicado como código abierto con licencia MIT, con más de 150 componentes para React.
¿Qué tiene que ver con la IA?
Su API, documentación y CLI están pensadas para que los asistentes de programación con IA lo usen igual que un desarrollador.
¿Qué necesito para usarlo?
React 19 o superior. Se instala con npm, pnpm o yarn y no requiere plugins de compilación.
Fuentes:
