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

[andrewchaa]

Con tanta gente, no entiendo por qué Facebook tiene tanto spam, demasiada publicidad y funciones tan limitadas.

[savvykang]

Parece que bloquear el spam no le interesa a la empresa y tampoco ayuda a conseguir un ascenso ni a cambiar de trabajo.

[click]

Eso significa que al menos 13,000 apps de React están funcionando internamente en Meta, y deja entrever la motivación que tiene Meta para no poder soltar React y seguir llevándolo adelante.
Mientras otras bibliotecas están incorporando signals por todos lados, React no puede hacerlo y hasta está creando el compilador de React para aferrarse al rerenderizado.
De repente se me ocurre que quizá alguna biblioteca core interna esté escrita de forma que dependa del rerenderizado del DOM, y por eso no les resulte fácil cambiarlo.

[laeyoung]

"Dentro de Meta (omisión) impulsa más de 13,000 apps.

Impresionante. Como consumidor, salvo por el aumento de los formatos cortos y la frecuencia de los anuncios, no parece haber mucha diferencia respecto de hace 10 años, hace 5 años o ahora.