Uma infraestrutura de design baseada em código, criada do zero para permitir que designers, desenvolvedores e agentes de inteligência artificial construam protótipos consistentes, reutilizáveis e próximos do ambiente de produção.
“Crie um dashboard executivo usando os padrões oficiais da Xertica.”
npm install xertica-ui
import {
Button,
Card,
DataTable
} from 'xertica-ui'
<Card>
<DataTable />
<Button>Exportar</Button>
</Card>
A Xertica precisava conceber produtos para clientes, setores e identidades diferentes em alta velocidade. Sem uma base compartilhada, cada projeto começava praticamente do zero, repetindo decisões e produzindo resultados inconsistentes.
Ao mesmo tempo, ferramentas generativas passaram a participar da criação dos protótipos. O novo problema era garantir que a IA não produzisse apenas interfaces funcionais, mas experiências alinhadas à linguagem, à arquitetura e aos padrões de qualidade da empresa.
Padrões diferentes entre projetos, decisões repetidas e baixa reutilização.
Protótipos visuais que precisavam ser reinterpretados durante a implementação.
Gerações genéricas, uso arbitrário de componentes e alto volume de correções.
A hipótese foi construir uma base baseada em código que pudesse ser compreendida por pessoas e agentes de IA. Em vez de documentar somente aparência, o sistema precisava comunicar o que existe, quando usar, como combinar e o que não deveria ser recriado.
Cores, temas, tipografia, espaçamentos, bordas, sombras, responsividade e acessibilidade.
Elementos funcionais e tipados para formulários, navegação, dados, feedback e composição.
Padrões recorrentes de produto, como cards, atividades, perfis, feeds e dashboards.
Pacote NPM, versionamento, build, consumo em aplicações React e distribuição complementar.
Guidelines, nomenclatura previsível, exemplos, restrições e instruções para ferramentas generativas.
O Design System passou a funcionar como uma camada de contexto entre a intenção e a geração. A IA utiliza componentes reais, tokens e regras de composição; o designer deixa de corrigir fundamentos básicos e concentra o trabalho em jornada, conteúdo, hierarquia e experiência.
O projeto exigiu equilibrar velocidade, controle, acessibilidade, flexibilidade e manutenção. Três decisões definiram a direção do sistema.
Os componentes deveriam existir e funcionar, não apenas estar representados visualmente.
Radix UI e padrões reutilizáveis aceleraram comportamento e acessibilidade sem limitar a identidade.
Uma identidade padrão para novos projetos, com capacidade de adaptação quando o cliente já possui seu sistema.
O resultado foi uma biblioteca funcional, distribuível e evolutiva que reduz o trabalho repetitivo, cria uma linguagem comum entre disciplinas e dá previsibilidade à geração de protótipos com inteligência artificial.
Pacote versionado e consumível por diferentes projetos.
Componentes funcionais, tipados e reutilizáveis.
Regras e padrões transformados em orientação operacional.
Uma base adaptável a diferentes clientes e domínios.
Não criei apenas uma biblioteca de componentes. Criei a base para desenvolver produtos com inteligência artificial sem perder intenção, consistência e qualidade.