Astryx: el design system de Meta probado con agentes

Meta ha publicado su sistema de diseño de React y lo ha hecho con una idea que no esconde: lo van a usar personas y agentes a la vez. Se llama Astryx, viene de ocho años de uso interno y trae algo que casi ningún design system tenía hasta ahora, una CLI pensada para que tu agente de código la consulte antes de escribir un solo componente.

Sobre el papel suena genial. Pero un README lo aguanta todo. Así que le pedí a un agente que me hiciera esto:

Galería · 3 imágenes

Lo que construyó el agente con Astryx

Ampliar

1 / 3 · Rejilla en y2k

1Rejilla en y2k 2Ficha en gothic 3Portada en matcha

Es la web del podcast de Web Reactiva hecha con Astro y componentes de Astryx. La montó un Claude Code con Sonnet encerrado en una carpeta vacía, sin mis ajustes ni mis MCP. Primero con episodios inventados y al final con las entregas reales de Web Reactiva, portadas y audio incluidos. Ocho prompts. Ni una línea de código escrita a mano. Aquí tienes los prompts, las capturas de cada vuelta y lo que salió mal.

Esto es lo que vas a encontrar:

• Qué es Astryx y qué lo diferencia de otro catálogo de componentes más
• Cómo se lo enseña Astryx a tu agente: la CLI, el CLAUDE.md generado, el MCP y doctor
• Cómo lanzar un Claude Code aislado con Sonnet desde un script
• Los ocho prompts del proyecto, con las capturas de cada iteración
• Cuánto costó, cuánto tardó y qué tienes que vigilar

🧨 Este post se ha escrito con ayuda de IA y con una prueba real hecha el 9 de noviembre de 2026 sobre Astryx 0.7.11. Astryx está en beta y cambia rápido: revisa siempre el repositorio oficial antes de copiar nada.

¿Qué es Astryx y por qué lo ha liberado Meta? ¶

Astryx es el sistema de diseño de React que Meta usa por dentro, ahora publicado como open source con licencia MIT. Según su README, lleva ocho años creciendo dentro de la empresa, es el design system más usado de Meta y da servicio a más de 13.000 aplicaciones internas.

La versión que he probado (0.7.11) trae 174 componentes, siete temas listos para usar (neutral, butter, chocolate, matcha, stone, gothic y y2k), modo oscuro, plantillas de página y una CLI. Necesita React 19 y por debajo usa StyleX, la librería de CSS atómico de Meta, aunque como consumidor no la tocas: importas un CSS ya compilado y componentes tipados.

No es un proyecto de laboratorio. Solo el paquete @astryxdesign/core sumó 661.968 descargas en npm en la semana del 2 al 8 de noviembre de 2026.

¿Y qué lo hace distinto de shadcn/ui, MUI o Chakra? El README lo resume en cuatro promesas:

1. Internos abiertos. Las piezas pequeñas se exportan y, si necesitas ir más allá, astryx swizzle te copia el código fuente de un componente para que sea tuyo.
2. Sin atarte a una forma de estilar. Puedes sobrescribir con className usando Tailwind, CSS Modules o CSS plano.
3. Personalizar sin envolver. Un tema es un conjunto de variables CSS. No hace falta un fork ni un componente wrapper.
4. Hecho para personas y agentes. La API, la documentación y la CLI se diseñan juntas para que tú y tu asistente construyáis igual, desde la misma referencia.

La cuarta es la que me interesa. Y es la que más fácil es de prometer.

¿Qué significa que un design system esté «hecho para agentes»? ¶

Significa que el agente no tiene que adivinar. No busca en su memoria cómo se llamaba la prop de un Dialog que no se puede cerrar ni inventa un variant="ghost" que nunca existió. Pregunta a la CLI, que le responde con la documentación de la versión instalada en tu proyecto.

Estas son las piezas que pone Astryx sobre la mesa:

Los errores de la CLI también están pensados para máquinas. Cada uno lleva un código estable (ERR_UNKNOWN_COMPONENT, ERR_PROJECT_REQUIRED…) que nunca cambia de significado, y si escribes Buttn te sugiere Button. Un agente puede ramificar con eso sin parsear frases en inglés.

Esta es la respuesta de astryx build cuando le pides una lista de episodios:

Fíjate en dos detalles. El primero, que no se limita a listar componentes: te dice en qué orden pensar (plantilla, luego bloques, luego componentes sueltos). El segundo, el aviso de que esa plantilla usa StyleX y necesita un plugin de compilación. Volveremos a él, porque fue el primer tropiezo del agente.

Y mira cómo lo comprueban. Dentro del repositorio tienen unos vibe tests: una batería de prompts (un selector de método de envío, un panel de datos, un cambio de tema…) que se lanzan contra varios design systems para medir qué tal genera código un LLM con cada uno. No se quedan en decir que su sistema es «AI-friendly»: lo miden.

Curso en vídeo

Las reglas que le das a tu agente, escritas una vez y para todo el proyecto

Astryx te rellena el CLAUDE.md con sus reglas. En la lección 3 escribimos el AGENTS.md de un proyecto real, regla a regla, para que sepas qué añadir tú encima.

Entra en el curso gratis →

¿Cómo se lanza un Claude Code aislado con Sonnet? ¶

Con claude -p y cuatro opciones que le cierran el paso a tu configuración personal. La idea de «aislado» es sencilla: quiero ver qué hace el agente solo con lo que Astryx le da, no con mis skills, mis MCP ni mi CLAUDE.md global de cuarenta reglas.

Todos los prompts del experimento pasan por este script:

#!/usr/bin/env bash# Uso: ./agente.sh <nombre-log> "<prompt>"cd "$(dirname "$0")/podcast-astryx"claude -p "$2" \  --model sonnet \  --setting-sources project \  --strict-mcp-config \  --permission-mode acceptEdits \  --allowedTools "Bash(npm:*) Bash(npx:*) Bash(node:*) Bash(ls:*) Bash(cat:*) Bash(mkdir:*) Read Write Edit Glob Grep Task Agent" \  --no-session-persistence \  --output-format stream-json --verbose \  > "../logs/$1.jsonl"

Qué hace cada pieza:

• -p ejecuta Claude Code sin interfaz: recibe el prompt, trabaja y termina.
• --model sonnet fija el modelo. Para construir interfaces siguiendo instrucciones claras no hace falta sacar a Opus.
• --setting-sources project solo carga los ajustes del proyecto. Nada de tu configuración de usuario.
• --strict-mcp-config sin --mcp-config deja al agente sin servidores MCP.
• --allowedTools es la lista blanca: npm, npx, node y poco más. Nada de curl, nada de git push.
• --output-format stream-json guarda cada paso en un .jsonl. Así puedo revisar después qué comandos lanzó, cuánto costó y qué le denegaron.

Si nunca has trabajado con Claude Code desde scripts, piensa en esto como un becario muy rápido encerrado en una sala con un ordenador sin internet… salvo para npm. Hace lo que le pides, pero solo con las herramientas que le has dejado en la mesa.

⚠️ La lista blanca es estricta de verdad. Un Bash(npm:*) deja pasar npm run astryx -- component Button, pero no un for que lance cinco npm run seguidos ni dos comandos unidos con ;. Lo vas a ver en el prompt 3.

Prompt 1: ¿cómo arranca un proyecto Astro con Astryx? ¶

Instalando Astryx y ejecutando astryx init, que escribe las reglas para el agente. El primer prompt, en una carpeta vacía:

Crea un proyecto Astro con React y mete Astryx, el design system de Meta.Déjalo configurado para que sepas usarlo bien.

El agente añadió un script astryx al package.json, que es lo que recomienda la documentación porque los agentes se equivocan a menudo con la ruta del binario. Y ojo con npx astryx a secas antes de instalar la CLI: el nombre sin ámbito es otro paquete de npm que no tiene nada que ver.

El agente tardó un minuto y 13 turnos. npm create astro falló al descargar la plantilla mínima, así que montó el proyecto a mano (astro.config.mjs, tsconfig.json y una página). Luego instaló todo y ejecutó el init, que generó un .claude/CLAUDE.md de 35 líneas.

Su resumen de las reglas que le impone Astryx:

1. Importar reset.css y astryx.css en la entrada de la app, o los componentes salen sin estilo.
2. Partir siempre de una plantilla (astryx build y después astryx template), nunca de cero, y ejecutar astryx doctor --built <dir> antes de entregar.
3. Nada de <div> ni <span> crudos: el layout y el espaciado lo resuelven los componentes. Los datos densos van en filas (Table, List), no en tarjetas.
4. Estilar primero con props, después con tokens (var(--color-*), var(--spacing-*)). Sin hex ni px a mano.
5. Los colores pasan por el tema (astryx theme add), nunca sobrescribiendo :root.

La regla de los <div> es la más radical. Y la más útil para un agente, porque le quita la vía de escape que usa siempre que no sabe qué hacer.

💡 Astryx no tiene guía de instalación para Astro. Hay guías para Next.js (con y sin Tailwind o StyleX), Vite y CDN. Como Astro usa Vite por debajo y Astryx se usa desde islas React, funciona, pero el agente tiene que hacer la traducción él solo.

Prompt 2: ¿para qué quieres un subagente que solo sepa de Astryx? ¶

Para separar al que coordina del que construye. El agente principal reparte el trabajo y comprueba el build; el subagente solo hace interfaz y siempre consulta la CLI antes de escribir. Así el contexto del que pinta no se llena de JSON de episodios ni de logs de npm.

Crea un subagente que se encargue solo de la interfaz con Astryx. Que mirela documentación de su CLI antes de escribir nada y que compruebe que el buildpasa al terminar.

Quince segundos y seis céntimos. El fichero que escribió tiene cuatro bloques: qué consultar antes de escribir, cómo montar islas React en Astro (con su client:load), una autocomprobación de <div> y colores a mano, y la obligación de pasar build y doctor antes de dar nada por hecho.

Si quieres profundizar en esta pieza, tienes una guía sobre cómo crear subagentes en Claude Code con más ejemplos. Aquí lo importante es que el subagente hereda las reglas de Astryx desde el CLAUDE.md y añade las suyas.

Prompt 3: ¿qué sale la primera vez? ¶

Una web que funciona y que no parece hecha con ningún design system. Este fue el encargo:

Haz la web de un podcast inventado, Malandriners FM: una portada con elúltimo episodio destacado y el resto en lista, y una página por episodio.Invéntate seis episodios. La interfaz, que la haga el subagente.

El coordinador escribió el JSON y lanzó dos tareas al subagente. El build pasó con siete páginas y doctor dio 0 fallos. Componentes usados: VStack, HStack, Heading, Text, Button, Card, List y ListItem.

Este fue el resultado:

Correcto y triste. Tipografía Times, botones azules de serie y todo pegado a la izquierda.

¿Qué pasó? Dos cosas que se ven en el log:

• Al subagente le denegaron Bash. Intentó leer las props de nueve componentes con un bucle for dentro de un solo comando. La lista blanca no lo dejó pasar y el subagente, en vez de reintentar de uno en uno, se puso a leer los ficheros .d.ts de node_modules. Funcionó, pero sin la documentación de la CLI.
• Descartó la plantilla. astryx build le recomendó partir de shell-top-nav, que necesita el compilador de StyleX. Como el proyecto no lo tenía, montó la portada con componentes sueltos.

Y el detalle que más me gustó: el agente principal lo contó en su respuesta. «El subagente no pudo ejecutar comandos, así que la validación la he hecho yo». Sin el .jsonl y sin ese aviso no habría sabido por qué la web era tan sosa.

Prompt 4: ¿cómo se aplica un tema de Astryx? ¶

Con astryx theme add <tema> y un componente Theme envolviendo la app. El encargo fue corto:

Se ve con la fuente del navegador, como si no hubiera tema. Ponle el temamatcha de Astryx y centra el contenido.

Esta vez no hubo ni un permiso denegado. El primer theme add matcha falló porque faltaba el paquete del tema; el subagente lo instaló, repitió el comando y la CLI generó un fichero astryx-themes.ts con matcha como tema por defecto. Después envolvió el marco de la web en <Theme> y centró el contenido con dos VStack.

Mismo código de componentes, otra web. Tipografías, colores, radios y botones cambian solo con el tema. Eso es lo que promete Astryx con aquello de «personalizar sin envolver».

doctor avisó de algo que conviene saber: los temas cargan sus fuentes desde un servicio externo (matcha usa DM Sans, Playwrite US Trad y JetBrains Mono) y no puede comprobar que lleguen. Si tu web va a funcionar sin conexión a ese servicio, revísalo.

Pero seguía pareciendo una plantilla de blog. Faltaba lo que un design system de verdad te ahorra: navegación, rejillas, imágenes con proporción fija, avatares, pestañas…

Domina la herramienta a fondo

Subagentes, CLAUDE.md, hooks y MCP en una sola tarde de taller

Te llevas el contexto que falta en la documentación: cuándo merece la pena un subagente, qué va en el CLAUDE.md y cómo encadenar flujos reales con Claude Code.

Entrar a la masterclass →

Masterclass en directo · 2h30

Prompt 5: ¿qué pasa cuando le pides que exprima Astryx? ¶

Que la web pasa de genérica a reconocible, con más de veinte componentes distintos y un selector de tema en vivo. El prompt:

Sigue pareciendo una web genérica, no se nota Astryx. Usa sus plantillas,pon portadas en los episodios, filtros por tema, un reproductor en cadaepisodio y un selector para cambiar entre matcha, y2k y gothic.

El coordinador lo partió en tres tareas: primero la infraestructura (instalar @astryxdesign/build y meter su plugin de Vite en Astro), luego portada y selector de tema, y al final la ficha de episodio. Unos cinco minutos en total.

astryx build le recomendó centered-hero para la portada y detail-page para la ficha. El subagente las generó como referencia, tomó su estructura y borró el resto. Este es el resultado en los tres temas, sin tocar una línea entre uno y otro:

Galería · 3 imágenes

Malandriners FM con tres temas de Astryx

Ampliar

1 / 3 · Matcha

1Matcha 2Y2K 3Gothic

Esa es la demostración que buscaba. Y2K pasa a esquinas rectas y bordes negros, matcha a curvas suaves y letra manuscrita, gothic a fondo negro. El selector guarda la elección en localStorage y no toca :root, tal como mandan las reglas del init.

La ficha de episodio es donde más se nota el catálogo:

Los componentes que acabó usando: TopNav, Selector, Theme, Heading, Text, Button, Icon, AspectRatio, Section, Card, Grid, Avatar, Token, TabList, Tab, Center, Breadcrumbs, Slider, Divider, List, ListItem, Thumbnail y las pilas de layout (VStack, HStack, StackItem). Más de veinte, frente a los ocho de la primera vuelta.

El reproductor es falso, ojo. Es un Slider con un botón de play que avanza el tiempo con un setInterval. No hay audio. Y las fotos de picsum, los invitados y los capítulos son de mentira. Para una demo vale. Para enseñarle a alguien un podcast, no.

Prompt 6: ¿cómo se conecta la web al feed real del podcast? ¶

Leyendo el RSS en tiempo de build desde Astro. El feed de Web Reactiva en Substack trae, por cada entrega, título, enlace, fecha, descripción, el contenido completo con sus imágenes y el mp3 del episodio. Justo lo que le faltaba a la demo.

Cambia los episodios inventados por los de verdad: el feed dewebreactiva.substack.com/feed. Quita lo que no venga en el feed y que elreproductor suene con el mp3 de cada episodio.

En dos minutos el coordinador instaló fast-xml-parser, escribió el lector del feed, cambió las rutas a [slug].astro y le pasó la interfaz al subagente. El build generó 21 páginas: la portada y una por cada una de las 20 entregas del feed. Las pestañas pasaron a «Todos» y «Con audio», que es un filtro real. El agente intentó comprobar el feed con curl, la lista blanca se lo denegó y tiró de fetch de Node, que era lo que le había pedido.

Lo compruebo en el navegador y… dos fallos a la vista. Las portadas salen rotas y las descripciones llevan entidades HTML sin decodificar (automático). doctor había dado 0 fallos otra vez.

¿Por qué no cargaban las imágenes? El CDN de imágenes de Substack respondía 404 al navegador, mientras que la descarga desde Node en el build funcionaba sin problema. Así que la solución razonable era no depender de ese CDN desde la web.

Prompt 7: ¿cómo se arreglan las portadas y las entidades? ¶

Descargando las imágenes en el build y sirviéndolas desde la propia web. El prompt de arreglo fue este:

Las portadas salen rotas en el navegador y las descripciones tienen cosascomo automático. Arréglalo.

Un minuto. El subagente pasó cada portada por getImage de astro:assets (WebP de 960 px), añadió substackcdn.com a image.domains en astro.config.mjs y escribió un decodificador de entidades sin dependencias nuevas. 19 imágenes para 20 entregas, porque dos compartían portada. Ni un componente tocado: ya leían la portada como una URL.

Cargar, cargaban. Pero mira el resultado:

Se ve fatal. El RSS no trae la imagen representativa de cada entrega, así que el lector del feed cogía la primera imagen del cuerpo: una infografía, un logo recortado, una captura de terminal. Técnicamente correcto, visualmente un desastre.

Eso sí, el reproductor ya suena. Lo comprobé abriendo la ficha en un Chromium, pulsando play y leyendo el <audio>: a los seis segundos llevaba 5,9 s reproducidos de un episodio de 74 minutos. El Slider de Astryx mueve el currentTime y el botón alterna play y pausa.

Prompt 8: ¿de dónde sale la portada de verdad de cada entrega? ¶

De la API pública que usa la propia web de Substack. Cada publicación responde en https://tu-publicacion.substack.com/api/v1/posts?limit=50 con un JSON que incluye, por cada post, cover_image (la portada diseñada, en 16:9), subtitle, post_date, canonical_url y podcast_url con el mp3. Pagina con el nextCursor que devuelve cada respuesta. No es una API documentada oficialmente, así que tómala como lo que es: buena para una demo, frágil para producción.

Aproveché para que la demo dejara de depender de la red en el build. Un script hace una foto fija (portadas incluidas) y la web lee de ahí, así funciona también con entregas que ya han salido del feed:

Esas portadas no son las buenas: cada post de Substack tiene su imagen deportada y está en su API (webreactiva.substack.com/api/v1/posts). Úsala yguárdalo todo en local, que la demo no dependa del feed.

Dos minutos y medio. El coordinador escribió el script, lo ejecutó (50 entregas y 50 portadas, frente a las 20 del RSS) y cambió el lector para tirar de import.meta.glob y getImage, sin fetch. El subagente puso el último episodio en el hero con su portada a lo grande y pasó los relacionados de filas con miniatura cuadrada a tarjetas 16:9. Y avisó de que eso se salta la regla de «datos densos en filas» de Astryx, por si prefería volver atrás. El build generó 51 páginas y doctor, 0 fallos.

Ahora sí:

Galería · 5 imágenes

La web del podcast con las portadas reales de Web Reactiva

Ampliar

1 / 5 · Y2K

1Y2K 2Matcha 3Ficha en gothic 4Gothic 5Móvil

¿Cuánto cuesta y cuánto tarda montar esto con Sonnet? ¶

Unos dos dólares y medio y un cuarto de hora de agente, repartidos en ocho prompts. Las cifras salen del campo total_cost_usd de cada .jsonl, que es el coste equivalente en la API; si usas una suscripción de Claude, en tu factura no se nota así.

El rediseño se lleva casi un tercio del gasto. Tiene sentido: es donde el subagente leyó más documentación de componentes y donde más ficheros escribió.

¿Te parece caro? Piensa en lo que tardas tú en leerte la documentación de 20 componentes de una librería que no conoces. Y si te preocupa el consumo, el reparto coordinador-subagente ayuda: cada tarea arranca con un contexto limpio.

¿Qué falla y qué tienes que vigilar con Astryx y un agente? ¶

Astryx está en beta, y se nota en los bordes. Ninguno de estos puntos me hace descartarlo, pero todos me costaron una vuelta:

• Las plantillas piden compilar StyleX. Si no añades el plugin de @astryxdesign/build a tu Vite (o Next), el agente se salta las plantillas y construye a mano. Fue lo que pasó en el prompt 3.
• No hay guía para Astro. Funciona vía islas React y el plugin de Vite, pero te toca a ti (o a tu agente) traducir la guía de Vite.
• El catálogo tiene huecos. No hay reproductor de audio (astryx search "audio player" no devuelve ningún componente), ni Tabs, Tag o Chip con esos nombres: se usan TabList/Tab y Token. Y una Card no admite href, así que la tarjeta entera no es clicable.
• Las fuentes de los temas vienen de fuera. doctor lo avisa en cada build.
• El agente rellena huecos con datos inventados. En la ficha aparecieron «capítulos» con marcas de tiempo calculadas a partir de los temas. El propio agente lo advirtió, y con el feed real desaparecieron. Dale datos de verdad cuanto antes.
• El RSS no basta para una web bonita. No trae la imagen representativa de cada entrega; la de verdad está en la API de Substack. Y las imágenes externas pueden fallar en el navegador: guárdalas en local.
• La lista blanca de herramientas muerde. Un bucle en Bash bastó para que el subagente trabajara a ciegas una vuelta entera. O se lo explicas en el prompt o amplías los permisos.

🔑 El doctor en verde no significa que la web esté bien. En el prompt 3 dio 0 fallos con una portada en fuente Times, y en el 6 otra vez 0 fallos con todas las imágenes rotas. Comprueba lo que se ve en pantalla, no solo lo que compila.

¿Y si prefieres OpenCode con Ollama Cloud en vez de Claude Code? ¶

El flujo de Astryx es el mismo, porque no depende del agente. Lo que el agente necesita es leer el fichero de reglas y poder ejecutar la CLI. astryx init --features agents escribe por defecto en AGENTS.md, que es justo el fichero que lee OpenCode, y tiene opciones --agent para Claude, Cursor, Codex y otros.

Lo que cambia es el aislamiento: en vez de --setting-sources y --allowedTools, en OpenCode defines los permisos del agente en su configuración y eliges un modelo abierto. Si vas por ahí, tienes una comparativa de los modelos de Ollama Cloud que puedes usar como agente. Yo no he repetido la prueba con OpenCode, así que no te puedo dar cifras de ese lado.

Con un modelo más pequeño, la parte que más te va a ayudar es la misma que con Sonnet: un subagente con instrucciones cortas, obligado a consultar la CLI y a pasar build y doctor antes de entregar.

¿Astryx, shadcn/ui o tu propio design system? ¶

Depende de cuánto quieras poseer el código y de cuánto quieras que el agente se apoye en reglas externas. Comparación cualitativa, con lo que he visto en esta prueba:

Si ya tienes tu sistema con sus reglas (como el DESIGN.md de un proyecto), Astryx no te va a aportar tanto. Si empiezas de cero y vas a dejar que un agente haga buena parte de la interfaz, merece la pena probarlo. Tener documentación, reglas y control de calidad en un mismo paquete versionado es justo lo que le falta a la mayoría de proyectos cuando entra un agente.

TL;DR ¶

• 🚀 Astryx es el design system de React de Meta: MIT, beta, React 19, StyleX por debajo, 174 componentes y siete temas, tras ocho años de uso interno.
• 🤖 Su baza es la CLI para agentes: init escribe las reglas en tu CLAUDE.md o AGENTS.md, build propone plantillas y doctor revisa el resultado.
• 🔒 Un Claude Code aislado con Sonnet (claude -p, --setting-sources project, --strict-mcp-config y lista blanca de herramientas) montó la web del podcast en ocho prompts, con las entregas reales de Web Reactiva, sus portadas y audio que suena.
• 💸 Unos 14,5 minutos de agente y 2,52 $ de coste equivalente en la API. La primera versión era sosa: el tema, las plantillas y los datos reales lo cambiaron todo.
• ⚠️ Vigila el plugin de StyleX para las plantillas, los huecos del catálogo y lo que el agente inventa para rellenar.

Preguntas frecuentes ¶

¿Qué es Astryx?
Es el sistema de diseño de React de Meta, publicado como open source con licencia MIT. Incluye más de 150 componentes accesibles, temas, modo oscuro, plantillas de página y una CLI pensada para personas y agentes de IA.

¿Astryx es gratis?
Sí. Tiene licencia MIT y se instala desde npm con @astryxdesign/core, un tema como @astryxdesign/theme-neutral y @stylexjs/stylex. La CLI va en @astryxdesign/cli.

¿Necesito saber StyleX para usar Astryx?
No para usar los componentes: importas un CSS ya compilado y estilas con props, tokens o className. Sí necesitas su plugin de compilación (@astryxdesign/build) si quieres usar las plantillas de página que trae la CLI.

¿Funciona Astryx con Astro?
Sí, a través de islas React, porque Astryx necesita React 19. No hay guía oficial para Astro, pero como Astro usa Vite puedes seguir la configuración de Vite y añadir el plugin de @astryxdesign/build en astro.config.mjs.

¿Cómo le enseño Astryx a Claude Code?
Instala la CLI y ejecuta astryx init --features agents --agent claude. Escribe un bloque de reglas en tu CLAUDE.md con el flujo (plantilla, bloques, componentes), las prohibiciones y los comandos clave. También puedes conectar su servidor MCP con claude mcp add --transport http astryx https://astryx.atmeta.com/mcp.

¿Tiene Astryx servidor MCP?
Sí. Ofrece dos herramientas, search para encontrar componentes, documentación y plantillas, y get para leer la documentación completa de uno. Es un servidor HTTP remoto.

¿Qué es astryx doctor?
Es el comando de diagnóstico de la CLI. Con --built dist revisa lo que has construido y devuelve fallos, avisos y comprobaciones superadas. Las reglas generadas por init le piden al agente que no entregue nada si doctor falla.

¿Qué es un Claude Code aislado?
Es Claude Code ejecutado sin interfaz con claude -p, cargando solo los ajustes del proyecto (--setting-sources project), sin servidores MCP (--strict-mcp-config) y con una lista blanca de herramientas (--allowedTools). Sirve para probar qué hace el agente sin tu configuración personal.

¿Por qué usar Sonnet y no Opus para esto?
Porque construir interfaces siguiendo reglas claras y una CLI que responde con documentación no exige el modelo más potente. En esta prueba Sonnet resolvió los ocho prompts por unos 2,52 $ de coste equivalente en la API.

¿Astryx sustituye a shadcn/ui?
Depende de lo que busques. shadcn/ui copia el código de cada componente en tu proyecto y es tuyo desde el principio. Astryx es una librería instalada con herramientas para agentes y temas por variables CSS, y si necesitas el código fuente de un componente lo sacas con astryx swizzle.

Fuentes ¶

• Repositorio de Astryx en GitHub
• Documentación oficial de Astryx
• README de la CLI de Astryx
• README de @astryxdesign/build
• Paquete @astryxdesign/core en npm

🧨 Última oportunidad para recibir la dinamita que mereces sobre programación con IA el próximo domingo: Suscríbete gratis a Web Reactiva en https://webreactiva.com/newsletter