Astryx: Sistema de Design Open Source do Meta com Mais de 150 Componentes, Personalizável e Pronto para Agentes de IA

A Meta tornou o Astryx código aberto — um sistema de design construído com React e StyleX, com mais de 150 componentes. Atualmente em beta, já está sendo usado por mais de 13.000 aplicativos internamente na Meta, desenvolvido ao longo de oito anos por engenheiros, designers e equipes de produto.

Principais recursos da fonte

• Número de componentes: Mais de 150 componentes React acessíveis e personalizáveis com espaçamento embutido, modo escuro e estilização flexível.
• Suporte a CLI e MCP: Crie projetos, navegue por modelos, gere temas e obtenha documentação pronta para agentes a partir da linha de comando ou via Model Context Protocol (MCP).
• Temas personalizáveis: Comece com temas prontos e adapte sem começar do zero.
• Modelos prontos para produção: Modelos para páginas comuns — basta inserir seu conteúdo.
• Construído com StyleX: A solução CSS-in-JS da Meta, agora também código aberto, proporcionando estilização sem impacto em tempo de execução.

Detalhes práticos do site

A página inicial demonstra uma interface completa de e-commerce: gerenciamento de estoque com filtros (categorias, locais, tags), um agente de chat ao vivo que lida com rastreamento de pedidos e devoluções, um carrinho de compras com métodos de envio e um painel de receita. O sistema de design inclui componentes como Badge, Checkbox, Switch, Botões, Cards e muito mais, todos visíveis no explorador de componentes.

O CLI pode ser usado para gerar temas e criar projetos. Para integração com agentes, o Astryx fornece suporte a servidor MCP, permitindo que agentes de codificação de IA naveguem por componentes, gerem temas e obtenham documentação diretamente da linha de comando.

O Astryx é código aberto sob uma licença permissiva (MIT ou similar, verifique o repositório). O projeto está disponível em astryx.atmeta.com. Você pode começar executando o CLI após instalar o pacote:

npm install astryx
npx astryx init --template default
npx astryx theme generate --brand-color #3355FF
npx astryx agent setup --mcp

Esses comandos foram inferidos da descrição do site; a sintaxe exata pode variar.

Para quem é

Desenvolvedores que criam aplicações React e precisam de um sistema de design testado em batalha com integração a agentes de IA para prototipagem rápida e uso em produção.