DeLibra transforma dados de design em biblioteca legível por agentes

O problema

DeLibra é um projeto de Rafael Batyrbaev que ataca a fragmentação dos design systems: as informações ficam espalhadas entre Figma, CSS, código e documentação, sem uma única representação estruturada. Humanos conseguem conectar os pontos lendo arquivos e entendendo o contexto, mas agentes veem apenas fragmentos e precisam inferir o sistema - o que leva a reinventar tokens, componentes e padrões que já existem e, quando faltam informações, a alucinar.

A solução: a "libra"

DeLibra transforma um design system em uma "libra": uma biblioteca estruturada que humanos leem como documentação e agentes usam como dados e contexto. Uma skill dedicada permite que um agente crie e mantenha a libra a partir de fontes existentes - um arquivo do Figma, CSS de produção, um repositório ou um scaffold vazio. Guiado pelo conhecimento do DeLibra, o agente extrai os primitivos em tokens e agrupa padrões recorrentes em componentes.

O resultado não é uma captura de tela nem um documento estático, mas um sistema estruturado, endereçável elemento por elemento, que funciona como documento vivo: ao adicionar um componente ou ajustar um token, todos os espécimes que fazem referência a ele são atualizados em conjunto.

O que a libra contém

• Tokens: os primitivos, nomeados e agrupados, com cada valor rastreável até sua origem.
• Componentes: espécimes reais, renderizados a partir dos tokens que consomem - não imagens.
• Temas claro e escuro: ambos carregados no mesmo espécime, para que divergências fiquem visíveis em vez de serem descobertas em produção.
• Visualizações mobile e desktop: previews sensíveis a viewport ao lado do espécime de desktop.

Camada de código e auditoria

Cada elemento da libra é inspecionável como código: é possível abrir qualquer componente, token ou estado e ler o HTML/CSS por trás, além de copiar, exportar ou gerar os arquivos diretamente.

O destaque é a visão de comparação: ao inserir CSS externo - um site ativo, uma folha de estilo legada ou o build de outro time -, o DeLibra faz diff contra a libra e retorna um relatório das lacunas: o que divergiu, o que nunca foi tokenizado e o que corrigir primeiro. Segundo o autor, a auditoria deixa de ser um trabalho manual de inspeção visual e se torna um diff.

Papel dos agentes

A libra fornece dados e contexto; a skill dedicada fornece as instruções para que agentes criem, inspecionem e estendam o sistema - dando aos agentes um sistema concreto a seguir em vez de inferir um. O projeto é construído em JavaScript e HTML, e o código está disponível publicamente no GitHub.