Astryx: Sistema de diseño de código abierto de Meta con más de 150 componentes, personalizable y listo para agentes de IA

Meta ha abierto el código fuente de Astryx, un sistema de diseño basado en React y StyleX con más de 150 componentes. Actualmente en beta, ya impulsa más de 13.000 aplicaciones internas en Meta, desarrollado durante ocho años por ingenieros, diseñadores y equipos de producto.

Características principales

• Cantidad de componentes: Más de 150 componentes React accesibles y tematizables con espaciado integrado, modo oscuro y estilos flexibles.
• Soporte CLI y MCP: Crea proyectos, explora plantillas, genera temas y obtén documentación lista para agentes desde la línea de comandos o mediante el Protocolo de Contexto de Modelo (MCP).
• Tematización personalizable: Comienza con temas listos para usar y adáptalos sin empezar de cero.
• Plantillas listas para producción: Plantillas para páginas comunes: solo tienes que añadir tu contenido.
• Creado con StyleX: La solución CSS-in-JS de Meta, ahora también de código abierto, que proporciona estilos sin tiempo de ejecución.

Detalles prácticos del sitio

La página de inicio muestra una interfaz de comercio electrónico completa: gestión de inventario con filtros (categorías, ubicaciones, etiquetas), un agente de chat en vivo que gestiona pedidos y devoluciones, un carrito de compra con métodos de envío y un panel de ingresos. El sistema incluye componentes como Badge, Checkbox, Switch, Buttons, Cards y muchos más, visibles en el explorador de componentes.

El CLI se puede usar para generar temas y crear proyectos. Para la integración con agentes, Astryx ofrece soporte de servidor MCP, lo que permite a los agentes de codificación de IA explorar componentes, generar temas y obtener documentación directamente desde la línea de comandos.

Astryx es de código abierto bajo una licencia permisiva (MIT o similar, consulta el repositorio). El proyecto está disponible en astryx.atmeta.com. Puedes empezar ejecutando el CLI tras instalar el paquete:

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

Estos comandos se deducen de la descripción del sitio; la sintaxis exacta puede variar.

Para quién es

Desarrolladores que crean aplicaciones React y necesitan un sistema de diseño probado en batalla con integración de agentes de IA para prototipado rápido y uso en producción.