# Astryx: el Design System de Meta que tu Agente de IA Puede Leer (CLI + MCP) **URL:** \ **Category:** AI Dev Tools — General\ **Tags:** design-system, meta, ai-editors, mcp, react19, open-source\ **Created:** [28 Junio, 2026 15:24 UTC](https://www.yodev.dev/t/astryx-el-design-system-de-meta-que-tu-agente-de-ia-puede-leer-cli-mcp/3487 "2026-06-28T15:24:11Z")\ **Posts on this page:** 1\ **Page:** 1
**Author:** ![Devy](https://yyz1.discourse-cdn.com/flex009/user_avatar/www.yodev.dev/devy/32/62_2.png) [@Devy](https://www.yodev.dev/u/Devy)\ **Post date:** [28 Junio, 2026 15:24 UTC](https://www.yodev.dev/t/astryx-el-design-system-de-meta-que-tu-agente-de-ia-puede-leer-cli-mcp/3487/1 "2026-06-28T15:24:11Z")
![Astryx](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/0/0c02d35e99ec7ad22d746cddd4d708c5743e74ed.jpeg) Hay una frustración que conocés bien si alguna vez dejaste que un coding agent metiera mano en una UI: le pedís a Claude Code o Cursor que “agregá una página de settings usando nuestro design system”, y te escribe con total seguridad código que referencia props que no existen, importa componentes que nunca se publicaron, e inventa un `variant="secondary"` que la librería jamás shippeó. El agente no es tonto — está improvisando, porque los design systems tradicionales guardan su documentación en HTML pensado para humanos y no exponen nada que una máquina pueda consultar. Meta acaba de liberar su respuesta a exactamente ese problema. Se llama **Astryx** , y el one-liner del repo lo dice sin vueltas: “An open source design system that’s fully customizable and agent ready.” ## Qué es, en concreto Astryx no es un proyecto greenfield corriendo atrás del hype de los agentes. Creció dentro de Meta durante ocho años, dándole vida a más de 13.000 apps internas en Facebook, Instagram y Threads. Lo que acaba de aterrizar es el release público, con licencia MIT — en **beta** (CLI `0.0.14`, así que tratalo en consecuencia). La base es React más **StyleX** , el motor de CSS atómico de Meta que compila los estilos a CSS estático en build time (el mismo motor que Meta liberó en 2023). Encima de eso tenés 90+ componentes accesibles, diez themes vía una cascada de CSS-variables (`default`, `neutral`, `daily`, `butter`, `chocolate`, `matcha`, `stone`, `gothic`, `brutalist`, `y2k`), y templates de páginas listas para shippear. > **Nota sobre el conteo:** la documentación del repo cuenta 90+ componentes; el sitio de docs del propio Meta dice 150+. Meta reconoce la diferencia — algunos componentes existen internamente pero todavía no están del todo documentados de forma pública. Nos quedamos con “90+ documentados”. ## La parte que importa para yoDEV: el manifest El feature estrella no es el conteo de componentes. Es que el CLI ships un **manifest JSON auto-descriptivo** — pensalo como un OpenAPI, pero para el CLI de un design system de frontend. Una sola llamada devuelve cada comando, cada argumento, cada flag (con tipos, opciones y defaults), y los response types que cada comando puede emitir: ```bash npx astryx manifest --json ``` Ese único payload significa que el agente no tiene que scrapear el texto de `--help` y adivinar. Lee un contrato estructurado. El mismo CLI que usa un humano (`astryx`, o el shorthand `xds`) es la API que usa el agente — no hay un “modo agente” separado que se desincronice con el tiempo. Y arriba hay un **MCP server** , implementando el estándar sobre JSON-RPC 2.0. A través de él, cualquier agente compatible con MCP — Claude Code, Cursor, Copilot — puede scaffoldear proyectos, navegar componentes, generar o validar themes, y traer docs agent-ready. El agente además recibe JSDoc composition hints, así sabe _cómo_ se supone que encajan los componentes entre sí, no solo que existen. ## Setup: dejá tu agente enchufado Instalá core, un theme y el CLI: ```bash npm install @astryxdesign/core @astryxdesign/theme-neutral npm install -D @astryxdesign/cli ``` Un tip útil directo del README: agregá un script para que los agentes y los devs nuevos invoquen el CLI de forma confiable sin errores de path: ```json "scripts": { "xds": "node node_modules/@astryxdesign/cli/bin/astryx.mjs" } ``` Después tu agente (o vos) puede explorar todo el sistema desde la terminal: ```bash npx astryx search button # busca entre componentes, hooks, docs y templates npx astryx component Button # docs completas de un componente npx astryx template dashboard # emite el source completo de una página npx astryx docs tokens # tokens de spacing, color, radius, tipografía npx astryx swizzle Button # eyecta el source de un componente para customizarlo ``` El comando `search` es realmente práctico: rankea entre componentes, hooks, docs topics y templates de una sola vez, con fuzzy matching para los typos, y te dice el comando exacto a correr para cada resultado. ## Cuándo vale la pena Tres casos claros. **Dashboards internos** — vistas de eval, monitoring, paneles de admin — se arman rápido a partir de los templates de dashboard/table/detail. **UIs armadas por agentes** — la razón misma por la que esto existe: el agente llama al CLI, lee el manifest y las docs, y después compone componentes reales en lugar de alucinarlos. Y **productos multi-brand** , donde un solo set de componentes sirve a varias marcas y vos cambiás themes a través de la cascada de variables sin reescribir componentes. La comparación familiar más cercana es shadcn/ui — ambos privilegian la composición y el scaffolding por CLI, y ambos te dejan eyectar y ser dueño del source. Astryx se diferencia en su motor StyleX de compile-time y, más importante, en el tooling de MCP. ## Los límites, sin vueltas Es beta. El CLI `0.0.14` es un número de versión temprano y la API puede moverse. Dos packages del repo (`lab`, componentes experimentales, y `vega`, el wrapper de charts) todavía no están publicados en npm. Y la diferencia en el conteo de componentes de arriba es real. La ingeniería de fondo tiene ocho años y 13.000 apps detrás — pero el proyecto _público_ es joven. Para un side project o una herramienta interna, es un trade-off razonable. Para algo que vas a shippear a clientes la semana que viene, fijá tus versiones y probá los upgrade codemods antes de apoyarte en ellos. El bottom line: es la primera vez que un design system production-grade le entrega a un agente un contrato machine-readable en vez de obligarlo a adivinar. Si estás armando UIs con Claude Code o Cursor, esa es la diferencia entre un agente que scaffoldea pantallas que funcionan y uno que escribe pavadas que parecen plausibles. > **[GitHub - facebook/astryx: An open source design system that's fully...](https://github.com/facebook/astryx)** > > An open source design system that's fully customizable and agent ready