Astryx - Sistema de design open source divulgado pela Meta

• Baseado em React e StyleX, com personalização completa e destaque para ser compatível com agentes
• Conta com mais de 160 componentes React com suporte a acessibilidade e aplicação de temas de marca, oferecendo modo escuro, templates prontos para deploy imediato e CLI em um sistema integrado
• Cresceu internamente na Meta ao longo dos últimos 8 anos e se tornou o design system mais usado e de maior escala da empresa, impulsionando mais de 13.000 apps e sendo refinado por equipes de engenharia, design e produto
• Suporta múltiplos temas, oferecendo todos os tokens de design — como cores, espaçamento, radius e tipografia — como propriedades customizadas de CSS
• Permite, via linha de comando ou MCP, fazer scaffolding de projetos, explorar templates, criar temas e obter documentação para agentes, integrando-se a ferramentas de codificação com IA
  • Ao colar as instruções iniciais de instalação em uma ferramenta de codificação com IA, a execução de npx astryx init configura automaticamente a documentação do agente
• Estrutura interna aberta (Open internals): os componentes não ficam presos a uma API de alto nível fechada; podem ser combinados em qualquer nível, e os blocos de construção necessários são exportados diretamente
  • Com o recurso swizzle, é possível extrair todo o código-fonte de um componente para o projeto e passar a controlá-lo diretamente
• Sem dependência de styling (lock-in): internamente, os estilos são escritos com StyleX, mas isso não fica exposto ao usuário; é possível sobrescrever via className usando Tailwind/CSS modules/plain CSS
• Princípio de priorizar orientação em vez de imposição (Guidance over enforcement), oferecendo capacidades sem forçar opiniões — se você passar valores, o componente os renderiza como estão; as recomendações de design ficam na documentação e nos exemplos
  • Todos os componentes seguem as mesmas regras de nomenclatura, props e composição, e são documentados, permitindo que tanto pessoas quanto IAs prevejam o comportamento de componentes desconhecidos
• A CLI atua como referência para componentes, tokens, templates e documentação
  • npx astryx component (lista de componentes), npx astryx docs (tópicos da documentação), npx astryx template --list (templates de páginas), npx astryx docs tokens (referência de espaçamentos/cores/radius)
• Arquitetura: composta por 3 camadas
  • Foundations: blocos de construção da consistência visual, como tipografia, cores, layout e acessibilidade
  • Components: mais de 150 blocos de construção de UI reutilizáveis com suporte completo a TypeScript
  • Patterns: soluções de design validadas, como páginas de tabela, layouts de páginas de detalhes, assistentes de formulário, navegação e fluxos de entrada de dados
• Oferece templates prontos para produção nos quais basta inserir o conteúdo, além de apps de exemplo completos com roteamento, temas e componentes conectados
• Licença MIT