Meta lanzó Astryx esta semana. Es un sistema de diseño de código abierto, actualmente en Beta. El proyecto creció dentro del monorepo de Meta durante ocho años. Astryx se basa en React y StyleX. StyleX es el motor CSS en tiempo de compilación de Meta.
TL;DR
Astryx es el sistema de diseño React de código abierto y listo para agentes de Meta, ahora en Beta. Combina el estilo StyleX con una cascada de temas variables CSS y diez temas. Un servidor CLI y MCP permite a los agentes de IA estructurar y documentar las IU. Está probado en producción dentro de Meta, pero es joven como proyecto público.
¿Qué es Astryx?
Astryx es una biblioteca de componentes y un sistema a su alrededor. Proporciona bases, componentes, plantillas y temas. Los fundamentos cubren la tipografía, el color, el diseño y la accesibilidad. El repositorio oficial documenta más de 90 componentes de React. El sitio de documentos de Meta cuenta con más de 150. Los componentes se entregan con espaciado incorporado, modo oscuro y estilo flexible. Las plantillas componen páginas completas como paneles, configuraciones y formularios. La licencia es MIT. TypeScript constituye aproximadamente las tres cuartas partes del código base.
Vale la pena entender la capa de estilo. StyleX compila estilos en CSS atómico y estático en el momento de la compilación. Meta StyleX de código abierto a finales de 2023. Impulsa Facebook, Instagram, WhatsApp y Threads. Empresas externas como Figma y Snowflake también lo utilizan.
Destacan dos opciones de diseño. Primero, las partes internas están abiertas. Todas las primitivas se exportan y se pueden componer, no se ocultan. Puedes componer a cualquier nivel. En segundo lugar, el espaciado es automático. Astryx llama a esto compensación de espacio consciente del contexto. Elimina los problemas de “doble relleno” sin reparaciones manuales.
La parte del ‘agente listo’
Ésta es la principal diferencia con otros sistemas de diseño. Astryx envía documentos y herramientas que los agentes de IA pueden leer. Los componentes llevan anotaciones JSDoc con sugerencias de composición. Una CLI expone la misma API que utiliza un desarrollador. También hay un servidor MCP. MCP es el protocolo de contexto modelo. Los agentes lo utilizan para estructurar, explorar y documentar.
La CLI se llama a través de astryx o la abreviatura xds. Una característica es realmente importante para la automatización. La CLI devuelve un manifiesto autodescriptivo como JSON. Enumera todos los comandos, argumentos, indicadores y tipos de respuesta. Comparándolo con una especificación OpenAPI para la CLI. Por lo tanto, un agente no necesita raspar el texto de ayuda. En su lugar, lee una carga útil estructurada.
Temas y cascada de variables CSS
Astryx incluye diez temas ya preparados. Se denominan predeterminado, neutral, diario, mantequilla, chocolate, matcha, piedra, gótico, brutalista y y2k. Todos son totalmente personalizables. La tematización utiliza una cascada de variables CSS. Cambias las variables y cada componente cambia de estilo. El código del componente permanece intacto.
La demostración interactiva a continuación muestra esto directamente. Elija un tema y observe cómo se actualizan los tokens en vivo.
Astríx · explicador interactivo
01 · RESUMEN
¿Qué es Astryx?
Un sistema de diseño React de código abierto de Meta: fundamentos, componentes, plantillas y temas. Construido sobre React y StyleX, el motor CSS en tiempo de compilación de Meta. Incluye CSS prediseñado, por lo que no se requiere ningún complemento de compilación. Actualmente en Beta.
8 añosconstruido dentro de Meta
13.000+aplicaciones que potencia
150+componentes (sitio de documentos)
10temas listos para usar
NotaEl repositorio de GitHub indica “más de 90 componentes”; El sitio de documentos de Meta cuenta con más de 150. Ambos provienen de fuentes oficiales de Astryx.
02 · TEMÁTICA
La cascada de variables CSS
Los temas son una cascada de variables CSS (tokens). Cambie las variables y cambie el estilo de cada componente: el código del componente nunca cambia. Elige un tema:
Primaria Secundaria
Insignia
A
Tarjeta Astryx
Los tokens impulsan todos los estilos.
–escala de espaciado 12px
IlustrativoEl mecanismo en cascada es exactamente como funcionan los temas de Astryx; Los valores de token por tema son representativos.
03 · DISEÑO
Espaciado automático: la solución del “doble relleno”
Coloque una caja acolchada en otra y los huecos se apilan; normalmente se quita el acolchado a mano. La compensación de espaciado según el contexto de Astryx mantiene constante la separación de los bordes. Alternelo: la brecha se mide desde el DOM renderizado.
IlustrativoLa brecha se lee desde el DOM real. La regla aquí sustituye a la lógica interna de Astryx.
04 · ARQUITECTURA
Partes internas abiertas que puedes componer y expulsar
Astryx exporta sus primitivos en lugar de ocultarlos, para que puedas componer en cualquier nivel. Cuando un componente está cerca pero no es exacto, expulse su fuente con la CLI y edítelo directamente.
Utilice un componente Expulsar para personalizar
importar {Insignia} de ‘@astryxdesign/core/Insignia’;
función predeterminada de exportación Barra de herramientas() {
devolver (
<Botón etiqueta =“Ahorrar” variante =“primario” /> <Insignia>BetaInsignia>
); }
Ahorrar
Beta
← renderizado a partir del código anterior
Botón $ npx astryx swizzle
# luego importe su copia local en lugar del paquete
importar {Botón} de ‘./componentes/Botón’;
La fuente expulsada es tuya para cambiarla. Astryx sigue siendo el predeterminado; solo posees lo que personalizas.
05 · AGENTE LISTO
Los agentes del servidor CLI y MCP pueden leer
La CLI expone la misma API que usa un desarrollador, además de un servidor MCP. Una llamada devuelve un manifiesto JSON autodescriptivo, por lo que un agente lee comandos estructurados en lugar de obtener ayuda. Haga clic en un comando:
astryx · CLI (alias: xds)
RepresentanteLos nombres de los comandos y la forma del manifiesto coinciden con el archivo README de la CLI de Astryx (v0.0.14). La salida se acorta para su visualización.
06 · CONFIGURACIÓN
Instalar y enviar
Ruta más sencilla: Next.js + Tailwind. Astryx incluye CSS prediseñado, por lo que no se necesita ningún complemento de compilación.
# instalar el núcleo, un tema y la CLI
instalación de npm @astryxdesign/core @astryxdesign/theme-neutral instalación de npm -D @astryxdesign/cli
// proveedores.tsx: empaqueta tu aplicación una vez
‘usar cliente’;
tipo de importación {ReaccionarNodo} de ‘reaccionar’;
importar {Tema} de ‘@astryxdesign/núcleo/tema’;
importar {tema neutral} de ‘@astryxdesign/tema-neutral/construido’;
función de exportación Proveedores({niños}: {niños: ReactNode}) {
devolver <Tema tema={temaneutral}>{niños}Tema>; }
MITSiguiente · Vite + Viento de colaCLI + MCPBeta: prueba antes de producir
‹ ›
01 / 06 · Descripción general
Marktechpost
Primeros pasos: un ejemplo de código
El camino más sencillo es Next.js con Tailwind. Astryx incluye CSS prediseñado, por lo que no se necesitan complementos de compilación. Instale el paquete principal y un tema.
Envuelva su aplicación en el proveedor de temas.
Envuelva su aplicación en el proveedor de temas. ‘usar cliente’; tipo de importación {ReactNode} desde ‘react’; importar {Tema} desde ‘@astryxdesign/core/theme’; importar {neutralTheme} desde ‘@astryxdesign/theme-neutral/built’; función de exportación Proveedores({niños}: {niños: ReactNode}) { return {niños}; }
Luego use los componentes directamente.
Un puente Tailwind asigna tokens a servicios públicos. Entonces bg-surface se resuelve en un token del sistema. Esto evita clases detalladas var(–…). También se documentan una ruta Vite y una ruta solo StyleX.
Casos de uso con ejemplos
Los paneles internos encajan claramente. Puede crear vistas de evaluación o monitoreo rápidamente. Astryx proporciona plantillas de paneles, tablas y detalles. Un contenedor de gráficos Vega/Vega-Lite maneja los gráficos.
Las UI creadas por agentes son el segundo caso. Un agente de codificación de IA puede estructurar una página de configuración. Llama a la CLI, lee los documentos listos para el agente y luego compone los componentes. El servidor MCP hace que este sea un flujo de trabajo estructurado, no conjeturas.
Los productos multimarca son el tercer caso. Un conjunto de componentes puede servir para varias marcas. Intercambias temas a través de la cascada de variables. No se requieren reescrituras de componentes.
Cómo se compara Astryx
shadcn/ui es la comparación familiar más cercana. Ambos favorecen la composición y el andamiaje CLI. Astryx se diferencia en su motor StyleX y sus herramientas MCP. Estos detalles de la competencia se resumen y evolucionarán.
Fortalezas y debilidades
Fortalezas:
Estilo StyleX en tiempo de compilación, probado en metaescala Primitivos abiertos y componibles en todos los niveles Diez temas personalizables a través de una cascada de variables CSS Un servidor CLI y MCP brindan a los agentes una API real El espaciado automático elimina errores de diseño comunes Licencia MIT con soporte para Next.js, Vite y Tailwind
Debilidades:
Estado beta, por lo que las API y las versiones pueden cambiar La CLI es temprana, en la versión 0.0.14 actualmente StyleX tiene una curva de aprendizaje más pronunciada que Tailwind Los recuentos de componentes difieren entre el repositorio y el sitio de documentos La adopción fuera de Meta aún no está probada
Consulte la página de repositorio y proyecto. Además, no dude en seguirnos en Twitter y no olvide unirse a nuestro SubReddit de más de 150.000 ml y suscribirse a nuestro boletín. ¡Esperar! estas en telegrama? Ahora también puedes unirte a nosotros en Telegram.
¿Necesita asociarse con nosotros para promocionar su repositorio de GitHub O su página principal de Hugging O su lanzamiento de producto O seminario web, etc.? Conéctate con nosotros