Clickmax
Auditei os componentes e o dark mode da plataforma e levei os formulários para o design system em 25 dias, com IA na implementação. A plataforma ficou consistente nos dois temas, parou de abrir com tela branca e se livrou de quatro bugs que estavam em produção.
Resultados
- Cobrança
- Travamento
- Formulários
- Acesso
Números medidos no código da plataforma e nos testes de cada entrega, entre setembro e outubro de 2026. As telas são de contas de teste.
Um dark mode por tela
O Clickmax é a plataforma da Bilhon para páginas, funis, CRM e vendas. O dark mode já existia, mas cada tela o resolvia por conta própria: eram mais de 20 mil classes de tema escuro escritas à mão só no app principal. Corrigir uma tela não corrigia a próxima.
O time relatava os sintomas: texto branco em fundo branco em Produtos, listas ilegíveis nos canais de mensagem e 1,6 s de tela branca a cada carregamento no escuro.
Por baixo havia uma causa comum: componentes duplicados. Em 2 de outubro, 326 arquivos ainda usavam os campos de formulário anteriores ao CXDS, o design system da plataforma, e 37 usavam abas locais. O campo antigo tinha 56 px de altura; o do CXDS, 40 px. Duas plataformas convivendo na mesma tela.
O ponto de partida · cinco telas reais no dark mode, antes e depois
Medir antes de trocar
Inventário no código. Um script conta os arquivos que ainda importam campo ou aba antigos. Ele rodava a cada merge, e o placar das apresentações ao time era esse número, não uma estimativa.
A escada. Proposta pelo André, Design Lead, e aplicada em cada tela: usar o componente que já existe; adaptar a tela a um padrão existente; criar um padrão novo no design system, para todos; só então abrir uma exceção. Bug visual grave virava correção urgente; padrão que faltava virava componente.
A trava. Em 4 dias sem trava, 5 arquivos novos nasceram com campo antigo. Antes da primeira troca, uma regra de lint passou a avisar todo uso novo. A partir dali, o número só desceu.
Área por área. Marketing, Área de membros, Produtos, Leads e Contatos, Mensagens, Integrações, Configurações, Vendas e, por último, as telas de acesso. Cada área virou uma PR, sempre pelo mesmo caminho, descrito no próximo capítulo.
A IA executa. Eu decido.
Implementei com o Claude Code, que fazia o papel de dev sênior. A regra que mais mudou o resultado: ele decide sozinho o que é técnico e reversível, e pergunta tudo que é produto, visual, envolve outra pessoa ou não tem volta.
Uma sessão por PR, várias em paralelo. Uma sessão coordenadora cuida da fila da máquina, do status de cada PR e do placar.
1Preparar
- 01Card pequenoeu
- 02Sessão e worktreeIA
- 03Prompt de entradaeu
- 04O planoeu aprovo · parada
2Construir
- 05ConstruçãoIA
3Provar
- 06Evidênciaeu aprovo · parada
- 07Validação e docsIA
- 08Revisão independenteoutra sessão de IA
4Entregar
- 09Commit e PReu peço
- 10Depois de abertaengenharia revisa e faz o merge
Corrigir uma vez só. O que deu errado numa PR vira regra no prompt e na memória, e a próxima área já começa sem aquele erro.
Escala. Cada PR rodava numa cópia isolada do repositório, com um prompt de entrada que trazia o escopo e os limites. Assim, várias áreas andavam ao mesmo tempo sem uma pisar na outra.
Velocidade no repetitivo. Na primeira área, um codemod trocou 70 rótulos, 34 campos de texto e 7 áreas de texto em 4 segundos. Os 31 casos que não eram mecânicos foram feitos um a um.
Uma segunda leitura. Antes de cada commit, outra sessão lia só o diff, procurando bug. Numa dessas leituras apareceu um bug que já estava em produção: ao trocar uma assinatura de anual para mensal, as 12 parcelas continuavam valendo por trás, com o campo vazio na tela.
Não reconstruir o que já existe.
Numa das primeiras PRs, a IA reescreveu as abas para deixá-las “mais limpas” e quebrou a identidade da plataforma. Virou regra em todo prompt: se uma tela é a referência, usa-se exatamente o mesmo componente, ajustado só por propriedades.
O que isso mostra: a IA não sabe o que é a identidade de um produto se ninguém disser. Sem esse limite, a velocidade vira retrabalho.
O processo completo, com os aprendizados.
O fluxo de cada PR, as regras de construção, a evidência, a sessão orquestradora e as armadilhas, explicados passo a passo. A skill e os modelos de prompt estão abertos, de graça.
Bugs que a troca revelou
Cada troca de componente passava um pente fino na tela. No caminho apareceram problemas que já estavam em produção e que ninguém tinha pedido para olhar. Estes eram os de maior impacto: travavam o uso, escondiam o erro de quem preenchia ou mexiam na cobrança.
Erro invisível no dark mode
Seis componentes de campo perdiam a borda vermelha de erro no escuro, e o texto de erro ficava abaixo do contraste AA no claro. Quem errava um campo não via onde. A correção foi no componente e vale para todas as telas.
Termos de afiliação, novo contato e formulário de teste · antes, o campo com erro não se destacava
Telefone que travava a página
Digitar rápido no campo de telefone colocava a tela num loop de atualizações, e a página parava de responder. O teste automático digita devagar e nunca pegou. A correção foi no componente compartilhado, com aviso a todas as frentes.
Simulação do sintoma · digitando rápido no campo de telefone
Assinatura mensal em 12 parcelas
Ao trocar uma oferta de anual para mensal, a tela mostrava os campos de parcelas vazios, mas as 12 parcelas continuavam valendo por trás. Agora as parcelas acompanham o período: no mensal, 1x.
Editar oferta · frequência de anual para mensal, telas reais
Recuperar senha quebrado no celular
No celular, a tela estourava a largura e, no escuro, título e instruções ficavam brancos sobre um cartão claro. Recuperar senha virou o verso do login: cabe na tela e funciona nos dois temas.
Recuperar senha a 375 px · no dark mode
Decisões e seus custos
Corrigir no design system, não na tela.
O tema troca o valor do token, não a tela. Um ajuste no componente vale para toda a plataforma e deixa espaço para novos temas sem tocar nas telas.
Custo: a correção atinge telas fora da PR. Só o seletor era usado em cerca de 150 arquivos. Cada mudança no componente levou prints de telas existentes antes e depois e um aviso explícito na revisão.
Uma área por PR, e as telas de acesso por último.
Cada PR cabia numa revisão atenta e podia ser desfeita sozinha, sem levar as outras. Login, cadastro e senha entraram por último, numa PR separada.
Custo: mais PRs e mais rodadas de revisão para o time de engenharia: 33 entre 6 e 30 de outubro.
Deixar fora do escopo o que não era campo de formulário.
Nos builders, o canvas é conteúdo do cliente: só a interface em volta ganhou dark mode. O Kanban ficou para outra frente. No Webinar, dois seletores continuam com o componente antigo de abas de propósito: são escolha de opção, não navegação. Faltava um controle segmentado no CXDS, e isso virou um card para o design system.
Custo: 23 arquivos seguem com o campo antigo, todos fora do escopo e registrados.
Abas em dois níveis. Com o André, fechamos uma regra só: se alguma aba tem subabas, a faixa principal vira pílulas com ícone, um componente novo no CXDS, e as subabas ficam emendadas no painel. O que não cabe na largura vai para um menu “Mais”, que mostra a página aberta.
Lado a lado, no escuro
Em trabalho de correção, a tela certa parece apenas normal. A diferença só aparece no comparativo, e por isso cada entrega teve prints antes e depois.
Comece aqui · o título e as opções sumiam no dark mode
O que a plataforma ganhou
O ganho não ficou nas telas revisadas. Ele mudou o custo de manter e evoluir a plataforma.
Corrigir uma vez vale para todas as telas
O dark mode saiu das telas e foi para os tokens do design system. Um ajuste no componente atualiza a plataforma inteira, e uma trava no código impede que o campo antigo volte: antes dela, 5 arquivos novos com campo antigo surgiram em 4 dias.
Quatro bugs de produção a menos
Erro invisível nos formulários, telefone que travava a página, assinatura mensal com 12 parcelas e recuperar senha quebrado no celular. Nenhum estava no pedido, e todos foram corrigidos na raiz.
Legível e acessível nos dois temas
A plataforma abre sem tela branca, os campos têm um visual só e o texto de erro passou no contraste AA. O app ainda ficou mais leve: só a área de Marketing tirou 22 kB do pacote.
Do design ao código, sem fila
Desenho, implementação e evidência saíram do mesmo fluxo, com IA. A engenharia entrou na revisão e no merge: 33 entregas em 25 dias. E, com tudo em tokens, um tema novo não exige mexer nas telas.
O tema troca a cor, não a tela · quatro telas reais, os mesmos componentes
Abrir a plataforma no escuro · reprodução no tempo medidoA linha marca o tempo de carregamento
A mesma abordagem chegou ao celular. A auditoria cobriu 80 telas e estados a 375 px e 20 tabelas no iPad, com os achados agrupados por causa. As três primeiras correções já estão na plataforma, e cada uma melhorou várias telas de uma vez.
O que levo daqui
- Antes e depois é o entregável. Sem o comparativo, um trabalho de correção passa despercebido, inclusive para quem aprova.
- Placar no código, não em planilha. A contagem por script mostrou o número subindo antes da trava e manteve a conversa com o time em fatos.
- Medir em sequência. Uma medição de performance feita com horas de intervalo deu um falso +21%. Desde então, antes e depois rodam na mesma janela.
- Trocar componente é auditoria. Os problemas mais sérios estavam em telas que ninguém tinha pedido para olhar.
- A IA amplia o alcance de quem tem critério. Ela troca 111 campos em 4 segundos e roda testes de madrugada. Decidir o que é padrão, o que é exceção e o que fica de fora continua sendo trabalho de design.
Como eu audito e corrijo uma plataforma com IA
O método por trás deste case, passo a passo: 10 passos, 2 pontos de parada e 8 aprendizados que viraram regra. Com a skill e os modelos de prompt para usar no seu time.
Próximo case
Ticto
Toda a UI de uma plataforma de pagamentos, do cadastro (−60% no TTV) ao app.