Agentation

¿Qué es Agentation?

Agentation es una herramienta de feedback visual que te permite anotar elementos directamente en una UI y luego compartir ese feedback con agentes de IA para que identifiquen el objetivo exacto en tu código base. Su propósito principal es convertir el feedback de “señala esto” en instrucciones estructuradas y accionables por máquinas que los agentes puedan ejecutar.

Funciona especialmente bien con herramientas de codificación IA que acceden a tus archivos de proyecto, donde la salida de Agentation puede incluir selectores, rutas de archivos e información estructural para ayudar al agente a navegar a las líneas y componentes correctos.

Características clave

• Anotaciones visuales en la página: Activa una barra de herramientas y haz clic o selecciona elementos para crear una anotación vinculada a un objetivo específico en pantalla.
• Segmentación de elementos para agentes: Agentation genera una ruta del elemento, selectores CSS y detalles de ubicación de archivos para que el agente no tenga que adivinar qué elemento de la UI querías.
• Contexto del código base para mejores arreglos: Cuando el agente tiene acceso al código base (p. ej., mediante herramientas como Claude Code o Cursor), puede usar selectores para buscar, rutas de archivos fuente para saltar a la línea correcta, un árbol de componentes React para entender la jerarquía y estilos computados para inferir la apariencia actual del elemento.
• Salida en markdown formateado: Tras agregar feedback, los usuarios pueden hacer clic para copiar markdown formateado y pegarlo en la entrada del agente.
• Soporte para integración MCP: Con MCP, puedes omitir el copiar-pegar porque tu agente ya ve el contexto de la anotación; los agentes pueden recibir instrucciones como “soluciona mi feedback” o “arregla la anotación 3”.
• Controles del ciclo de vida de anotaciones: Los agentes pueden consultar feedback existente (p. ej., listar todas las anotaciones en páginas) y responder a acciones como descartar o resolver elementos (p. ej., “borra todas las anotaciones”).

Cómo usar Agentation

1. Activa la barra de herramientas de anotación: La barra está disponible en la interfaz de Agentation (el contenido de la página indica que está activa en la página de demo).
2. Pasa el cursor para identificar elementos: Pasa el cursor sobre elementos para ver sus nombres resaltados.
3. Crea una anotación: Haz clic en un elemento objetivo o selecciona texto (por ejemplo, en los elementos de demo proporcionados) para crear una nueva anotación y luego ingresa tu feedback.
4. Envía y comparte feedback: Agrega la anotación y haz clic para copiar la salida en markdown formateado y pegarla en tu agente.
5. Opcionalmente usa MCP: Si tu agente está conectado vía MCP, puedes evitar el copiar-pegar manual y pedirle al agente que solucione o arregle anotaciones específicas.

Casos de uso

• Reportes de errores para un elemento UI específico: Cuando ves un estado de botón “incorrecto” o estilo, pasa el cursor para identificar el elemento, anótalo con lo que esperabas vs. lo que ves, y comparte selectores/info de ruta para que el agente localice el código relevante.
• Feedback sobre tipografía y espaciado: Para problemas como padding y tamaño, anota el área exacta del componente y pide al agente que decida entre alternativas (p. ej., “24px o 16px”) como parte de resolver el feedback.
• Corrección de texto/contenido: Si una etiqueta o copia tiene un error tipográfico, selecciona el texto exacto y agrega feedback conciso (p. ej., “Texto del botón poco claro” o “el contenido debe decir X”) para que el agente apunte a la cadena UI específica.
• Feedback específico de fotogramas de animación: Pausa una animación (vía la barra de herramientas) en el fotograma que te interesa, anota ese estado visual específico y proporciona feedback vinculado al contexto pausado.
• Coordinación de feedback en equipo o multipágina: Pide a los agentes que listen todas las anotaciones visibles en páginas, resuélvanlas una por una y borren todo al finalizar la revisión.

Preguntas frecuentes

¿Cómo ayuda Agentation al agente a encontrar la parte correcta de mi app?
La salida de Agentation puede incluir selectores CSS, rutas de archivos fuente, jerarquía de componentes React y estilos calculados para que el agente pueda buscar, navegar a la línea correcta y entender dónde y cómo encaja el elemento.

¿Necesito copiar y pegar el feedback en el agente?
No siempre. La página indica que con integración MCP puedes omitir el copiar-pegar porque el agente ya ve el contexto de la anotación.

¿Qué tipos de feedback debo escribir en las anotaciones?
La página recomienda ser específico (p. ej., describe el problema claramente), tratar un problema por anotación e incluir contexto sobre lo que esperabas frente a lo que ves.

¿Pueden los agentes hacer preguntas o responder a las anotaciones?
Sí. Con integración MCP y un esquema de formato de anotaciones, la página describe interacciones del agente como listar anotaciones, solicitar aclaraciones, resolver con un resumen y descartar anotaciones.

¿Cuál es el modelo de licencias de Agentation?
Agentation es gratuito para individuos y empresas para uso interno. Para redistribuir Agentation como parte de un producto que vendes, la página aconseja contactarlos para una licencia comercial.

Alternativas

• Herramientas interactivas de capturas/marcado de UI (con flujos de revisión humana): Las herramientas que capturan y marcan UI para revisión también pueden soportar compartir feedback, pero típicamente no generan selectores estructurados/rutas de archivos para agentes conscientes del código.
• Plantillas de problemas basadas en texto en un tracker (p. ej., tickets de bugs): Los trackers de bugs ayudan a documentar comportamiento esperado vs. actual, pero dependen de descripciones en lugar de apuntar a agentes a una ruta específica de elemento UI en el código.
• Herramientas de navegación de código compatibles con agentes sin anotación visual: Asistentes de codificación que entienden tu repositorio pueden actuar sobre feedback, pero sin una capa de anotación tendrás que describir el objetivo de forma más indirecta (p. ej., nombrando componentes manualmente).