Astryx: sistema de diseño open source presentado por Meta

• Basado en React y StyleX, se destaca por su personalización completa y su compatibilidad con agentes
• Cuenta con más de 160 componentes React con accesibilidad y aplicación de temas de marca, y ofrece modo oscuro, plantillas listas para desplegar y una CLI en un único sistema integrado
• Creció dentro de Meta durante los últimos 8 años hasta convertirse en su sistema de diseño más usado y de mayor escala; impulsa más de 13,000 apps y fue refinado por equipos de ingeniería, diseño y producto
• Soporta múltiples temas que exponen todos los tokens de diseño —como color, espaciado, radius y tipografía— como propiedades personalizadas de CSS
• Permite scaffolding de proyectos, exploración de plantillas, creación de temas y obtención de documentación para agentes desde la línea de comandos o mediante MCP, integrándose con herramientas de codificación con IA
  • Al pegar las instrucciones iniciales de instalación en una herramienta de codificación con IA, la ejecución de npx astryx init configura automáticamente la documentación del agente
• Estructura interna abierta (Open internals): los componentes no quedan atrapados en una API superior cerrada, pueden componerse a cualquier nivel y exportan directamente los bloques de construcción necesarios
  • Con la función swizzle, es posible extraer el código fuente completo de un componente al proyecto y pasar a poseerlo directamente
• Sin dependencia de estilado (lock-in): internamente los estilos están escritos con StyleX, pero eso no se expone al usuario; se pueden sobrescribir mediante className con Tailwind/CSS modules/CSS plano
• Principio de guía antes que imposición (Guidance over enforcement): ofrece capacidades sin imponer énfasis; si se pasa un valor, el componente lo renderiza tal cual, y las opiniones de diseño se incluyen en la documentación y los ejemplos
  • Todos los componentes siguen y documentan las mismas reglas de nombres, props y composición, lo que permite que tanto personas como IA puedan predecir el comportamiento de componentes desconocidos
• La CLI funciona como referencia de componentes, tokens, plantillas y documentación
  • npx astryx component (lista de componentes), npx astryx docs (temas de documentación), npx astryx template --list (plantillas de páginas), npx astryx docs tokens (referencia de espaciado, colores y radius)
• Arquitectura: compuesta por 3 capas
  • Foundations: bloques de construcción para la consistencia visual, como tipografía, color, layout y accesibilidad
  • Components: más de 150 bloques de construcción de UI reutilizables con soporte completo para TypeScript
  • Patterns: soluciones de diseño validadas, como páginas de tablas, layouts de páginas de detalle, asistentes de formularios, navegación y flujos de entrada de datos
• Ofrece plantillas listas para producción en las que solo hay que agregar contenido, además de apps de ejemplo completas con routing, temas y componentes conectados
• Licencia MIT