Um design system espalhado por quatro lugares
Segundo o case, um design system costuma viver espalhado entre Figma, CSS, código e documentação, sem uma representação única de como ele funciona. Uma pessoa junta as partes lendo os arquivos. Um agente vê fragmentos, tenta deduzir o sistema e acaba recriando tokens, componentes e padrões que já existem. Sem o sistema disponível como contexto estruturado, preenche as lacunas por conta própria.
O que é uma libra
É a unidade do DeLibra: uma instância de design system, guardada em uma pasta de dados fora do repositório. Ela reúne:
– Tokens, nomeados e agrupados, cada valor rastreável até a origem. – Componentes renderizados a partir dos tokens que consomem, e não imagens. – Temas claro e escuro no mesmo espécime, para a diferença entre os dois aparecer antes da produção. – Visões de celular e desktop lado a lado.
Para começar uma libra, a ferramenta oferece três caminhos: a partir de um design, a partir de um arquivo CSS ou importando um arquivo `.lbr` exportado por outra pessoa. Depois, a tela mostra os caminhos da pasta e um botão que copia o prompt para o agente rodar.
Código e comparação
Cada token, componente ou estado pode ser aberto como HTML e CSS, copiado ou exportado. A visão de comparação recebe um CSS de fora (um site no ar, uma folha de estilo antiga, o build de outro time) e devolve uma lista: o que desviou, o que nunca virou token e o que corrigir primeiro. Nas telas do case, a escala tipográfica marca quais tamanhos existem no CSS anexado e quais não.
Como funciona na prática
O DeLibra roda na máquina de quem usa. Clona-se o repositório, abre-se a pasta no Cursor ou no Claude Code, e o agente lê o arquivo de skill do motor, que pergunta onde guardar as libras antes de fazer qualquer coisa. O servidor da galeria escuta só no próprio computador e não há dependências para instalar. O README avisa: “There is no magic button”. O que a ferramenta dá ao agente, segundo o texto, é um lugar para escrever e um contrato para seguir.
As duas entradas não funcionam do mesmo jeito. Pelo CSS, a galeria lê as propriedades personalizadas e monta a referência de tokens sozinha. Pelo design, o preenchimento passa pelo acesso ao Figma que o agente tiver.
Ficha do projeto
Projeto próprio de Raphael Batyrbaev, sem cliente, com papel descrito como Builder e feito em JavaScript e HTML. O repositório foi criado em 23 de agosto de 2026, com primeiro commit dois dias antes e última atualização em 8 de setembro. Em 16 de setembro, tinha 2 estrelas no GitHub. Na Grafana Labs, Batyrbaev trabalha com observabilidade, resposta a incidentes e fluxos nativos de IA.
