• ANÁLISE
  • TRIAGEM
  • DECISÃO
  • HISTÓRICO

Como investigar regressões de UI com sua IA

Conecte o Percy ao seu agente para transformar capturas visuais em dados práticos. Após a conexão, sua IA cuida da parte pesada de comparar pixels e identificar regressões.

Pergunte à IA sobre esta página

Resposta rápida

Como posso usar IA para encontrar regressões de UI?

Seu agente usa o Percy para extrair porcentagens de diferença de pixels e detalhes de comparação de qualquer captura. Ele identifica exatamente quais componentes se deslocaram para que você decida se a mudança é um erro ou algo pretendido. Você recebe um resumo claro das alterações visuais.

Resultados visuais.

Onde seus achados aparecem.

A IA organiza os dados visuais nestes resultados específicos.

ANÁLISE

Relatórios de mudanças visuais

O agente calcula a porcentagem exata das diferenças de pixels. Você recebe um resumo de quanto um componente se moveu ou mudou.

TRIAGEM

Identificação de regressões

A IA sinaliza capturas específicas que falharam nos testes visuais, destacando a diferença exata entre a versão base e a nova.

DECISÃO

Revisão humana necessária

O agente apresenta as diferenças mais significativas para sua inspeção. Você decide se aprova ou rejeita a alteração.

HISTÓRICO

Auditoria de capturas

A IA analisa estados visuais anteriores. Você consegue acompanhar a evolução de um elemento de UI ao longo de várias builds.

O fluxo

O que sua IA faz ao detectar uma regressão.

O agente automatiza a coleta de dados para que você foque apenas na correção.

  1. Localizar capturas

    O agente encontra os estados visuais relevantes no seu projeto Percy para iniciar a investigação.

    list_snapshots

  2. Buscar dados de comparação

    O agente extrai as diferenças de pixels e as informações de delta visual entre duas capturas.

    list_comparisons

  3. Inspecionar detalhes visuais

    O agente analisa as propriedades específicas de uma captura para entender a natureza da mudança.

    get_snapshot_details

  4. Resumir descobertas

    O agente compila as porcentagens de diferença e as mudanças nos componentes em um relatório conciso.

    get_snapshot_details

Teste

Copie estes comandos para começar.

Use estes prompts para iniciar uma investigação.

Pontos de partida

Substitua os nomes dos projetos e IDs das capturas pelos seus dados reais do Percy.

Percy Connector

Tudo pronto. Escolha seu cliente MCP e siga as instruções de configuração.

Link do conectorhttps://edge.vinkius.com/vk_preview_6LH0zsvN8J0nY7uPYJ5ybHRW80VU7JdDwEgote5I/mcp

Claude Desktop

Siga os passos abaixo para conectar em segundos.

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — Percy capabilities are ready to use.
Configuração · claude_desktop_config.jsonCopiar
{
  "mcpServers": {
    "percy-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_6LH0zsvN8J0nY7uPYJ5ybHRW80VU7JdDwEgote5I/mcp"
    }
  }
}
Copie no chat04

  • Liste as capturas mais recentes do projeto 'Dashboard' no Percy.

  • Mostre os dados de comparação da última captura que falhou no projeto 'Mobile-Web'.

  • Qual é a porcentagem de diferença de pixels na comparação entre o snapshot ID 123 e 124?

  • Obtenha os detalhes da captura no projeto 'Checkout-Flow' para entender por que ela falhou.

  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

Comece aqui

Conecte o Percy uma vez e comece a perguntar.

Basta vincular sua conta do Percy pelo painel da Vinkius. Suas credenciais ficam criptografadas e você pode começar imediatamente a perguntar ao seu agente sobre suas capturas de UI.

Conectar Percy à sua IA

FAQ

Como esta tarefa funciona.

  • 01

    A IA pode corrigir o código CSS para mim?

    Não. A IA apenas lê e relata as diferenças visuais encontradas no Percy. Você deve aplicar as correções de código manualmente no seu IDE.

  • 02

    A IA pode aprovar capturas no Percy?

    Não. O agente apenas recupera dados e detalhes de comparação. A decisão de aprovar ou rejeitar uma captura é sempre sua.

  • 03

    Como a IA sabe quais pixels mudaram?

    O agente utiliza os dados de comparação fornecidos pelo Percy para identificar a porcentagem exata e a localização do delta visual.

  • 04

    A IA tem acesso a todo o meu código?

    Não. A IA só acessa os dados de captura visual e as informações de comparação que o Percy fornece através do MCP.

  • 05

    Posso perguntar sobre capturas de um projeto diferente?

    Sim, desde que você especifique o nome correto do projeto para que o agente encontre as capturas certas.

  • Mais dúvidas sobre o Percy? Veja tudo o que o conector Percy pode fazer

Conecte Percy ao Claude, Cursor, ChatGPT e outros