Há uma frustração que você conhece bem se alguma vez deixou um coding agent mexer numa UI: pede ao Claude Code ou Cursor para “adicione uma página de settings usando nosso design system”, e ele escreve com total segurança código que referencia props que não existem, importa componentes que nunca foram publicados, e inventa um variant="secondary" que a biblioteca nunca lançou. O agent não é burro — está improvisando, porque os design systems tradicionais guardam sua documentação em HTML pensado para humanos e não expõem nada que uma máquina possa consultar.
Meta acaba de liberar sua resposta para exatamente esse problema. Se chama Astryx, e o one-liner do repo o diz sem rodeios: “An open source design system that’s fully customizable and agent ready.”
O que é, em concreto
Astryx não é um projeto greenfield correndo atrás do hype dos agents. Cresceu dentro da Meta durante oito anos, dando vida a mais de 13.000 apps internos no Facebook, Instagram e Threads. O que acaba de chegar é o lançamento público, com licença MIT — em beta (CLI 0.0.14, então trate em consequência).
A base é React mais StyleX, o motor de CSS atômico da Meta que compila os estilos para CSS estático em build time (o mesmo motor que Meta lançou em 2023). Em cima disso você tem 90+ componentes acessíveis, dez temas via uma cascata de CSS-variables (default, neutral, daily, butter, chocolate, matcha, stone, gothic, brutalist, y2k), e templates de páginas prontos para lançar.
Nota sobre a contagem: a documentação do repo conta 90+ componentes; o site de docs do próprio Meta diz 150+. Meta reconhece a diferença — alguns componentes existem internamente mas ainda não estão totalmente documentados de forma pública. Ficamos com “90+ documentados”.
A parte que importa para yoDEV: o manifest
O feature estrela não é a contagem de componentes. É que o CLI traz um manifest JSON auto-descritivo — pense nele como um OpenAPI, mas para o CLI de um design system de frontend. Uma única chamada retorna cada comando, cada argumento, cada flag (com tipos, opções e defaults), e os response types que cada comando pode emitir:
npx astryx manifest --json
Esse único payload significa que o agent não precisa fazer scraping do texto de --help e adivinhar. Lê um contrato estruturado. O mesmo CLI que um humano usa (astryx, ou o shorthand xds) é a API que o agent usa — não há um “modo agent” separado que saia de sincronismo com o tempo.
E acima disso há um MCP server, implementando o padrão sobre JSON-RPC 2.0. Através dele, qualquer agent compatível com MCP — Claude Code, Cursor, Copilot — pode fazer scaffold de projetos, navegar componentes, gerar ou validar temas, e trazer docs prontas para agent. O agent além disso recebe dicas de composição em JSDoc, assim sabe como se supõe que os componentes se encaixem entre si, não apenas que existem.
Setup: deixe seu agent plugado
Instale core, um tema e o CLI:
npm install @astryxdesign/core @astryxdesign/theme-neutral
npm install -D @astryxdesign/cli
Uma dica útil direto do README: adicione um script para que os agents e os novos devs invoquem o CLI de forma confiável sem erros de path:
"scripts": {
"xds": "node node_modules/@astryxdesign/cli/bin/astryx.mjs"
}
Depois seu agent (ou você) pode explorar todo o sistema do terminal:
npx astryx search button # busca entre componentes, hooks, docs e templates
npx astryx component Button # docs completas de um componente
npx astryx template dashboard # emite o source completo de uma página
npx astryx docs tokens # tokens de spacing, cor, radius, tipografia
npx astryx swizzle Button # ejeta o source de um componente para customizá-lo
O comando search é realmente prático: rankeia entre componentes, hooks, docs topics e templates de uma só vez, com fuzzy matching para os typos, e te diz o comando exato a rodar para cada resultado.
Quando vale a pena
Três casos claros. Dashboards internos — vistas de eval, monitoring, painéis de admin — se montam rápido a partir dos templates de dashboard/table/detail. UIs montadas por agents — a razão mesma pela qual isto existe: o agent chama o CLI, lê o manifest e as docs, e depois compõe componentes reais em lugar de aluciná-los. E produtos multi-brand, onde um único set de componentes serve a várias marcas e você muda temas através da cascata de variáveis sem reescrever componentes.
A comparação familiar mais próxima é shadcn/ui — ambos privilegiam a composição e o scaffolding por CLI, e ambos te deixam ejetar e ser dono do source. Astryx se diferencia em seu motor StyleX de compile-time e, mais importante, no tooling de MCP.
Os limites, sem rodeios
É beta. O CLI 0.0.14 é um número de versão cedo e a API pode se mover. Dois packages do repo (lab, componentes experimentais, e vega, o wrapper de charts) ainda não estão publicados no npm. E a diferença na contagem de componentes acima é real. A engenharia de fundo tem oito anos e 13.000 apps atrás — mas o projeto público é jovem. Para um side project ou uma ferramenta interna, é um trade-off razoável. Para algo que você vai lançar para clientes na semana que vem, fixe suas versões e teste os upgrade codemods antes de contar com eles.
O bottom line: é a primeira vez que um design system production-grade entrega para um agent um contrato machine-readable em lugar de forçá-lo a adivinhar. Se você está montando UIs com Claude Code ou Cursor, essa é a diferença entre um agent que faz scaffold de telas que funcionam e um que escreve coisas que parecem plausíveis.