Como revisar mudanças de UI geradas por IA com Storybook e Chromatic

O texto descreve um playbook para revisar mudanças de interface geradas por agentes como Cursor, Copilot Agent, Devin e Claude Code. O ponto de partida é que o diff bruto não serve bem para isso. Em changesets com mais de 50 arquivos, o código pode passar em linting e checagem de tipos e ainda assim jogar um botão de call-to-action para fora da tela em certos breakpoints. Um tipo de erro assim não aparece numa tela de diff. Vale notar que human-authored aparece no texto apenas como contraponto: o diff gerado por IA é comparado ao escrito por humanos, e não é um projeto ou ferramenta com nome próprio, nem há repositório identificado. O que existe é o artigo e a metodologia que ele propõe.

O playbook tem quatro etapas. Primeiro, limitar cada prompt a um único componente (por exemplo, refatorar o PricingCard para usar os novos design tokens), com instruções em .cursorrules ou CLAUDE.md que fixam um limite de arquivos e exigem a story correspondente. Segundo, isolar a mudança no Storybook, com estados como padrão, destacado, desabilitado, responsivo e conteúdo longo. Terceiro, rodar o Chromatic no CI, comparando cada snapshot com a baseline aceita, com fetch-depth: 0 no checkout para achar o commit ancestral. Quarto, um checklist no template de pull request. A stack citada é Storybook 8, 9 ou 10, com React ou Vue 3, e o Percy aparece como alternativa. As limitações vêm do próprio texto: o plano gratuito do Chromatic tem cota de snapshots, e exitZeroOnChanges: true nunca bloqueia um merge sozinho. Sem story, o Chromatic não tem o que fotografar.

A cobertura anterior do CEVIU tratava a revisão de código com IA sobretudo no plano do processo. Em 4 de março de 2026, o CEVIU noticiou "Como Eliminar a Revisão de Código", sobre PRs parados e revisores que olham diffs grandes de forma superficial. Em 13 de outubro de 2026, veio "Revisão de Código com IA: O Futuro da Qualidade e Segurança no Desenvolvimento de Software", e em 14 de outubro de 2026, "A IA e o Futuro da Revisão de Código: Menos Linhas, Mais Estratégia", ambas apontando que a leitura linha a linha perde eficiência. A notícia de agora leva a mesma discussão para a interface: a verificação sai do texto do diff e vai para o resultado renderizado.

Para quem trabalha com design e UX/UI, a leitura é que a revisão visual deixa de ser trabalho só de quem programa. Se a story e o snapshot são a superfície de revisão, designers podem comparar baseline e nova versão lado a lado e checar espaçamento, responsividade e atributos de acessibilidade que o código não mostra. Isso também dá um uso concreto aos design tokens e aos sistemas de design: uma mudança de token vira diff visual e pode ser aprovada por quem entende de interface.