Applitools usa moldura do Figma como baseline visual para código de IA

O problema: código funcional não é design correto

Ferramentas de codificação com IA, como Claude Code, Cursor, GitHub Copilot e Codex, conseguem gerar e modificar código de front-end rapidamente, mas isso não garante que a interface renderizada corresponda ao design aprovado. Um botão pode funcionar perfeitamente em um lugar que o designer nunca pretendia, um título pode quebrar de forma diferente, um card pode ficar largo demais ou um layout responsivo pode quebrar em um viewport específico. Nenhum desses casos significa que o código está quebrado - significam que a implementação sofreu desvio visual em relação ao design.

É esse espaço que a nova integração da Applitools busca preencher: a funcionalidade Figma Design Baselines permite que equipes usem frames do Figma como baselines visuais e comparem automaticamente o que foi realmente construído contra o que foi desenhado.

Como funciona

O desenvolvedor fornece a URL de um frame do Figma, e a Applitools usa esse design como referência visual. Segundo a empresa, o sistema mapeia testes ao vivo diretamente para as URLs dos designs, ajusta automaticamente o viewport de teste às dimensões do frame original e aplica sua comparação de Visual AI na interface renderizada. Não é necessário plugin do Figma, exportação manual de capturas de tela nem upload de imagens de baseline separadas.

Isso muda sutilmente o papel do Figma no fluxo de trabalho. Tradicionalmente, o design é entregue a um desenvolvedor que o interpreta, e designers e desenvolvedores voltam e avançam corrigindo discrepâncias. Com a integração, o arquivo de design se torna uma referência visual que testes automatizados podem verificar contra a implementação real.

A IA investiga o que deu errado

O outro lado do lançamento de 15 de setembro é a expansão do Eyes MCP Server, que conecta o sistema de testes visuais da Applitools a agentes de codificação com IA. Antes, um agente conectado ao Eyes MCP conseguia apenas adicionar testes visuais pelo chat. Com as novas ferramentas, o agente também pode inspecionar, revisar e resolver esses testes.

A Applitools diz que o sistema fornece ao agente informações de diferença visual com precisão de pixel junto com contexto de DOM, ajudando a identificar o que mudou sem que o desenvolvedor precise abrir um painel de testes separado. O agente também pode aceitar, rejeitar ou mascarar baselines visuais diretamente pelo chat. As notas de versão citam Claude Code, Cursor, Copilot e Codex, e o anúncio de 15 de setembro também lista Cline entre os fluxos de codificação com IA suportados.

Juntando as peças, forma-se um ciclo de feedback: design no Figma → implementação → comparação visual → diferença detectada → investigação assistida por IA. A Applitools posiciona seu Visual AI como uma camada de validação visual determinística que realiza a comparação e entrega ao agente as diferenças encontradas com contexto estrutural. O designer não é removido do processo - na verdade, o design aprovado pode se tornar mais importante, pois define o alvo visual contra o qual a implementação é verificada.

Por que importa além das demos

Sites gerados por IA impressionam em demos porque as demos costumam terminar no momento em que o site aparece. Produtos reais envolvem mudanças contínuas, reutilização de componentes, diferenças entre navegadores e layouts responsivos que quebram. A Applitools afirma que sua plataforma faz validação visual em diferentes navegadores, dispositivos e sistemas operacionais, enquanto a integração com o Figma fornece a referência direta do aspecto original.

A distinção central é que "gerou com sucesso" e "corresponde ao design" são coisas muito diferentes. O autor sugere que o arquivo do Figma pode se tornar cada vez mais a especificação visual que mantém interfaces geradas por IA ancoradas ao design original: o agente de codificação constrói, o navegador renderiza, a Applitools compara e o design do Figma fornece a referência.

Conclusão

Se fluxos como esse se tornarem comuns, o autor levanta a hipótese de que designers poderiam gastar menos tempo apontando problemas de espaçamento e mais tempo decidindo o que a interface deveria ser desde o início.