Generative UI controlada

Visão geral

Um produto de analytics B2B responde perguntas de dados em linguagem natural e devolve artefatos visuais. O difícil é deixar uma IA gerar visualização sem quebrar o Design System, a acessibilidade, a performance ou a confiança. Desenhei um padrão de Generative UI controlada: a IA escolhe de um catálogo fixo de componentes pré-construídos e preenche com dados, e o frontend renderiza os componentes reais. Nunca markup cru, nunca código em runtime.

Contexto

O produto precisava responder perguntas de dados com gráficos que o usuário pudesse ler, alternar, exportar e guardar. As alternativas de mercado sacrificam consistência ou segurança. A IA emitindo JSON solto foge do Design System, e a IA gerando HTML ou SVG direto quebra acessibilidade e abre risco de segurança, inaceitável num produto que lida com dado sensível. O problema real era controle. A geração tinha que ficar dentro das regras do sistema, e toda resposta tinha que ser auditável.

Papel

• Avaliei três padrões de Generative UI (Controlled, Schema/JSON-driven, Open-ended) e escolhi o Controlled pra B2B, justificado em identidade, acessibilidade, performance, previsibilidade e confiança.
• Desenhei o schema tipado de artefatos, seis tipos (barra, pizza, linha, radar, KPI, tabela), cada um com suas restrições.
• Montei a decision matrix que liga a intenção da pergunta e a forma do dado ao tipo de gráfico, destilada da literatura clássica de visualização.
• Defini o sistema de cor semântica, em que a IA escolhe a intenção da paleta, não o hex.
• Especifiquei as features do artefato: a alternância gráfico/tabela, o export em PNG e CSV, e salvar a análise como artefato vivo.

Processo

• Universo fechado, não código aberto. A IA escolhe entre componentes pré-construídos do Design System via tool calling, em vez de emitir markup. Toda escolha é segura, reversível e aparece no raciocínio.
• Tipagem na fronteira IA→frontend. Um schema valida cada artefato antes de renderizar, com restrições por tipo (a pizza limita as fatias, o radar exige um mínimo de eixos) embutidas no próprio schema.
• Decisão por raciocínio, não regra rígida. A matriz de intenção e forma é ensinada à IA por exemplos no system prompt, atualizável sem deploy.
• Auditável por padrão. Todo gráfico vem com a tabela por trás, o dado exato que o gerou, então o usuário confere os números em vez de só confiar na imagem. Num produto B2B essa rastreabilidade não é opcional. Essa mesma alternância gráfico/tabela é o caminho de acessibilidade, a cor nunca é o único sinal.

Resultado

• Seis tipos de artefato cobrem os formatos comuns de analytics: comparação, tendência, distribuição, perfil multidimensional, valor único, detalhe tabular.
• Acessibilidade AA nos componentes, a alternância gráfico/tabela garante acesso não-visual ao dado.
• Auditável por construção, a tabela subjacente viaja com toda resposta, o dado por trás do gráfico está sempre a um toque.
• Uma combinação rara de portfólio, Product Design e Design System e IA no mesmo projeto, com base em pesquisa clássica de visualização.

Como a IA escolhe o gráfico

O tipo de gráfico é um passo de raciocínio, não uma regra fixa. A IA lê a intenção da pergunta (comparação, composição, tendência, relação, distribuição) e a forma do dado recuperado, e então escolhe o tipo. As regras são destiladas dos clássicos, Cleveland & McGill (posição vence ângulo, então uma barra vence uma pizza), Tufte (data-ink, sem chartjunk), Few (a taxonomia comparação/composição/distribuição/relação/tendência), Brewer (os grupos canônicos de paleta). Na dúvida, cai pra opção mais segura, a tabela, que mantém o dado completo sem perda. A mesma matriz que guia a IA é a regra de uso de gráfico que o Design System entrega aos devs, uma taxonomia só pros dois.

Cor por intenção, não por hex

A IA nunca escolhe uma cor. Escolhe a intenção da paleta, e o frontend resolve pros tokens do Design System. Cinco paletas semânticas, cada uma resolvendo um problema distinto:

• Categorical para categorias independentes sem ordem, o default seguro.
• Sequential para intensidade, do baixo ao alto.
• Divergent para um ponto médio significativo com lados opostos.
• Status para significados fixos, sucesso, alerta, erro, info, neutro.
• Highlight para uma série em destaque sobre o contexto atenuado.

A IA declara qual cabe no dado, e o renderer mapeia essa intenção pros tokens --chart-*, então dark mode e troca de tema nunca tocam na IA. As paletas são construídas sobre a pesquisa revisada por pares do ColorBrewer, não gosto pessoal, e validadas em WCAG 2.2 AA nos dois critérios de cor, 1.4.1 (a cor nunca é o único sinal) e 1.4.11 (contraste de não-texto).

Aprendizados

A disciplina que fez isso funcionar foi recusar geração aberta. Um universo fechado e tipado é o que manteve uma feature de IA consistente, acessível e auditável, as coisas que um produto B2B não pode abrir mão. Tratar escolha de gráfico e cor como decisões semânticas, intenção resolvida em token, é o que deixou a IA gerar visualização sem o resultado virar caos.

Tags

Generative UI · IA · Design System · Data Viz