¿Puede la IA corregir el código CSS por mí?

No. La IA solo puede leer e informar sobre las diferencias visuales que encuentra en Percy. Debes aplicar las correcciones de código manualmente en tu IDE.

¿Puede la IA aprobar capturas en Percy?

No. El agente solo puede recuperar datos y detalles de comparación. La decisión de aprobar o rechazar una captura es tuya.

¿Cómo sabe la IA qué píxeles han cambiado?

El agente utiliza los datos de comparación proporcionados por Percy para identificar el porcentaje exacto y la ubicación del cambio visual.

¿La IA tiene acceso a todo mi código?

No. La IA solo ve los datos de las capturas visuales y la información de comparación que Percy proporciona a través del MCP.

¿Puedo preguntar por capturas de un proyecto distinto?

Sí, siempre que especifiques el nombre correcto del proyecto para que el agente pueda localizar las capturas adecuadas.

ANÁLISISTRIAGEDECISIÓNHISTORIAL

ANÁLISIS
TRIAGE
DECISIÓN
HISTORIAL

Cómo investigar regresiones de UI con tu IA y Percy

Conecta Percy a tu agente para convertir capturas visuales en datos útiles. Una vez conectado, tu IA se encarga de comparar píxeles e identificar regresiones automáticamente.

Pregunta a la IA sobre esta página

Respuesta rápida

¿Cómo puedo usar IA para encontrar regresiones de UI?

Tu agente utiliza Percy para extraer porcentajes de diferencia de píxeles y detalles de comparación de cualquier captura. Identifica qué componentes se han desplazado para que decidas si el cambio es un error o algo intencionado. Obtendrás un desglose claro de los cambios visuales.

Resultados visuales.

Dónde verás los hallazgos.

La IA organiza los datos visuales en estos resultados específicos.

ANÁLISIS

Reportes de cambios visuales

El agente calcula el porcentaje exacto de diferencia de píxeles. Recibirás un resumen claro de cuánto se movió o cambió un componente.

TRIAGE

Identificación de regresiones

La IA señala las capturas específicas que fallaron en las pruebas visuales, destacando la diferencia exacta entre la versión base y la nueva.

DECISIÓN

Revisión humana necesaria

El agente presenta las diferencias más significativas para que las inspecciones. Tú decides si apruebas o rechazas el cambio.

HISTORIAL

Auditoría de capturas

La IA revisa estados visuales anteriores. Puedes rastrear cómo ha evolucionado un elemento de la interfaz a lo largo de varias versiones.

El flujo

Qué hace tu IA cuando detecta una regresión.

El agente automatiza la recopilación de datos para que tú te concentres en la solución.

Localizar capturas
El agente busca los estados visuales relevantes en tu proyecto de Percy para iniciar la investigación.
list_snapshots
Obtener datos de comparación
El agente extrae las diferencias de píxeles y la información del delta visual entre dos capturas.
list_comparisons
Inspeccionar detalles visuales
El agente analiza las propiedades específicas de una captura para entender la naturaleza del cambio.
get_snapshot_details
Resumir hallazgos
El agente compila los porcentajes de diferencia y los cambios en los componentes en un informe conciso.
get_snapshot_details

Pruébalo

Copia estos ejemplos para empezar.

Usa estos prompts para iniciar una investigación.

Puntos de partida

Sustituye los nombres de proyecto y los IDs de captura por tus datos reales de Percy.

Percy Connector

Todo listo. Elige tu cliente MCP y sigue las instrucciones de configuración.

Enlace del conectorhttps://edge.vinkius.com/vk_preview_6LH0zsvN8J0nY7uPYJ5ybHRW80VU7JdDwEgote5I/mcp

Claude Desktop

Sigue los pasos siguientes para conectarte en segundos.

1In Claude Desktop, open Settings → Connectors.
2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
3Click Add and start a new chat — Percy capabilities are ready to use.

Configuración · claude_desktop_config.jsonCopiar

{
  "mcpServers": {
    "percy-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_6LH0zsvN8J0nY7uPYJ5ybHRW80VU7JdDwEgote5I/mcp"
    }
  }
}

Copia en el chat04

Lista las capturas más recientes del proyecto 'Dashboard' en Percy.
Muéstrame los datos de comparación de la última captura fallida en el proyecto 'Mobile-Web'.
¿Cuál es el porcentaje de diferencia de píxeles en la comparación entre la captura ID 123 y 124?
Obtén los detalles de la captura en el proyecto 'Checkout-Flow' para ver por qué falló.

Claude
ChatGPT
Cursor
VS Code
Windsurf
Claude Code
JetBrains
Cline

Empieza aquí

Conecta Percy una vez y luego pregunta.

Solo tienes que vincular tu cuenta de Percy mediante el panel de Vinkius. Tus credenciales se mantienen cifradas y podrás preguntar a tu agente sobre tus capturas de inmediato.

Conectar Percy a tu IA

FAQ

Cómo funciona esta tarea.

01
¿Puede la IA corregir el código CSS por mí?
No. La IA solo puede leer e informar sobre las diferencias visuales que encuentra en Percy. Debes aplicar las correcciones de código manualmente en tu IDE.
02
¿Puede la IA aprobar capturas en Percy?
No. El agente solo puede recuperar datos y detalles de comparación. La decisión de aprobar o rechazar una captura es tuya.
03
¿Cómo sabe la IA qué píxeles han cambiado?
El agente utiliza los datos de comparación proporcionados por Percy para identificar el porcentaje exacto y la ubicación del cambio visual.
04
¿La IA tiene acceso a todo mi código?
No. La IA solo ve los datos de las capturas visuales y la información de comparación que Percy proporciona a través del MCP.
05
¿Puedo preguntar por capturas de un proyecto distinto?
Sí, siempre que especifiques el nombre correcto del proyecto para que el agente pueda localizar las capturas adecuadas.
¿Más dudas sobre Percy? Ver todo lo que puede hacer el conector de Percy

Conecta Percy a Claude, Cursor, ChatGPT y más