A Meta liberou o seu design system com mais de 170 componentes de graça
O design system que a Meta moldou por 8 anos com os próprios engenheiros e designers, agora aberto com licença MIT. O comando que escreve o CLAUDE.md do projeto e o servidor que a sua IA consulta sozinha.
Sabe aquele problema de pedir um componente pra IA e ela inventar uma propriedade que não existe? Cara, isso tem nome agora. E tem solução.
A Meta abriu o design system que ela usou internamente por oito anos. Chama Astryx, está no ar em astryx.atmeta.com, e o repositório é o facebook/astryx: licença MIT, 12.549 estrelas, e o último commit foi hoje, enquanto eu escrevia isso.
Mas não foi o número de componentes que me fez parar. Foi a frase no topo do site: "fully customizable and agent ready". Pronto pra agente. Ou seja: eles construíram isso sabendo que quem ia escrever o código não era só gente. Era a IA também.
E eles fizeram o dever de casa.
O que é, sem enrolação
É um kit de peças de interface pra construir sistema: painel, dashboard, área de aluno, CRM, ferramenta interna. Botão, tabela, modal, menu, campo de formulário, calendário. Tudo já resolvido, acessível, no mesmo padrão.
Eu contei: hoje o catálogo tem 232 páginas de componente no site. O programa que você instala declara um número menor, 163, porque agrupa as peças pequenas dentro da principal. Os dois estão certos, só medem coisas diferentes, e os dois passam de 170.
Enfim, é muita coisa pronta. E tem uma família que quase ninguém tem: os componentes de chat de IA. Balão de mensagem, campo de digitar, botão de ditado por voz, e até o bloco que mostra a IA usando uma ferramenta. Se você quer construir a interface de um assistente, está tudo lá.
A parte que mudou o meu dia
Aqui essa parada fica diferente de tudo que eu já te mostrei.
Você roda um comando e ele escreve, dentro do seu projeto, um arquivo com todas as regras de como usar aquele sistema. Esse arquivo é lido automaticamente pelo Claude Code, pelo Cursor, pelo Codex. É como se a biblioteca chegasse com um manual escrito pra IA, não pra você.
npx @astryxdesign/cli init --features agentsEu rodei num projeto vazio agora. Levou segundos e criou um arquivo de 2.440 caracteres. Dentro dele tem o número de componentes, o passo a passo que a IA deve seguir antes de escrever qualquer tela, e uma lista de proibições diretas: não usar `<div>` solta, não cravar valor na mão, sempre usar as cores do tema.
E se você usa uma ferramenta específica, dá pra pedir o arquivo já no formato dela:
npx @astryxdesign/cli init --features agents --agent claude
npx @astryxdesign/cli init --features agents --agent cursor
npx @astryxdesign/cli init --features agents --agent codexO primeiro escreve o CLAUDE.md. O segundo, o arquivo de regras do Cursor. O terceiro, o padrão que quase todo agente lê.
O teste que eles deixaram na documentação
Essa parte é sensacional. Na documentação eles montaram três perguntas pra você colar na sua IA antes de pedir qualquer código. E escreveram o resultado esperado com todas as letras: essas três perguntas têm 0% de acerto sem a documentação instalada. Zero. O modelo responde com toda a confiança do mundo, e erra as três.
Cola isso na sua IA:
Antes de escrever qualquer código do Astryx, confira o que você sabe:
1. Qual é o caminho correto de import do Button?
2. Como se deixa um Dialog impossível de fechar?
3. Qual propriedade o Selector usa para os itens dele?
Se você não souber as três, rode `npx @astryxdesign/cli init --features agents`
e leia o arquivo gerado antes de continuar.Eu acho isso brilhante por um motivo: é o oposto de vender mágica. Eles estão dizendo, na cara dura, que a IA sozinha não sabe, e que o trabalho é dar contexto pra ela. É exatamente o que eu venho falando aqui há meses, só que agora está escrito na documentação de uma biblioteca da Meta.
O comando que monta a página pra você
Esse eu descobri testando, não estava na página inicial.
Existe um comando chamado build. Você descreve o que quer em português mesmo e ele devolve a lista de peças pra montar aquilo, na ordem, com o comando de cada uma.
npx astryx build "pagina de vendas com hero, precos e depoimentos"Ele entendeu, respondeu e indicou o template mais próximo. E foi honesto: avisou que não tinha correspondência exata pra página de vendas, porque esse sistema é feito pra construir produto, não pra construir página de venda. Já volto nesse ponto, é importante.
O servidor que a sua IA consulta sozinha
E o melhor de tudo é que tem MCP.
Traduzindo: em vez de você copiar documentação e colar no chat, você liga a sua IA direto na fonte. Ela pesquisa e lê a documentação sozinha, na hora em que precisa.
Eu testei o endereço pra confirmar que está de pé, e está: respondeu como servidor astryx versão 2.0.0, com duas ferramentas, uma de busca e uma de leitura.
A configuração é essa, e é igual pro Claude, pro Cursor e pro Windsurf:
{
"mcpServers": {
"xds": {
"type": "url",
"url": "https://astryx.atmeta.com/mcp"
}
}
}Depois disso você pede em português, coisas como "acha um menu suspenso" ou "acha uma mensagem de sucesso", e ela vai lá buscar. Sem você copiar nada.
Os temas: a mesma tela com seis caras
São seis temas prontos: butter, chocolate, gothic, matcha, neutral e stone. E não é só trocar a cor do botão. Muda a fonte, o arredondamento, o peso do texto, o clima inteiro.
Pra usar:
npx astryx theme list
npx astryx theme add matchaO segundo comando copia o tema pra dentro do seu projeto como arquivo editável. Não é um pacote fechado que você importa: é código seu, que você mexe. E se nenhum dos seis servir, npx astryx theme template escreve um modelo em branco comentado pra você preencher com a sua marca.
Onde essa parada NÃO serve
Preciso ser honesto, porque a maioria dos posts sobre lançamento novo esconde isso:
- Não é pra página de venda. Eu testei e o próprio programa avisou. Isso aqui é pra construir produto: painel, área logada, ferramenta. Pra landing de captação ou página de vendas longa, as bibliotecas que eu já mostrei aqui servem melhor.
- Está em beta. Está escrito no site. Versão 0.5.0. Vai mudar coisa no caminho.
- Exige React 19. Se o seu projeto está numa versão anterior, não instala. Ponto.
- Usa StyleX, que é o jeito da Meta de escrever estilo. Eles dizem que convive com Tailwind e CSS normal, mas é mais uma peça no seu projeto.
O passo a passo, do zero
Se quiser testar, é essa sequência. Eu fiz exatamente assim:
Os dois imports do passo 3 são esses:
import "@astryxdesign/core/reset.css";
import "@astryxdesign/core/astryx.css";O prompt que eu usaria
Se você já tem projeto rodando e quer que a IA faça o trabalho todo, cola isso de uma vez:
Instale o Astryx neste projeto: @astryxdesign/core, @stylexjs/stylex,
@astryxdesign/theme-neutral e @astryxdesign/cli.
Depois rode `npx @astryxdesign/cli init --features agents --agent claude`
e LEIA o arquivo gerado antes de escrever qualquer código.
Adicione os dois imports de CSS no meu arquivo de entrada.
Em seguida me pergunte qual a cara que este projeto deve ter, rode
`npx astryx theme list` e comece pelo tema mais próximo com `theme add`.
Se nenhum servir, use `theme template`.
Antes de montar qualquer tela, rode `npx astryx build "<a tela que eu pedir>"`
e siga o kit que ele devolver. Não invente componente nem propriedade:
se tiver dúvida, rode `npx astryx component <Nome>`.Esse prompt faz três coisas que quase ninguém faz: instala, manda ler antes de escrever, e proíbe a invenção.
Por que isso importa mais do que parece
Tem uma mudança acontecendo aqui que é maior que a biblioteca em si.
Até agora, biblioteca de componente era feita pra humano ler. Você abria a documentação, entendia e escrevia. Agora a Meta soltou uma que vem com manual escrito pra máquina, com servidor pra máquina consultar e com teste pra saber se a máquina entendeu.
Isso vai virar padrão. E quem entender primeiro para de brigar com a IA por causa de código genérico, porque o problema nunca foi a IA. É que ninguém tinha dado o contexto certo pra ela.
Bora testar.