Probada en una tarea realOficial del fabricanteAutomatización e integraciones
agent-browser
Claude recorre tu sitio haciendo clic como un cliente real en teléfono y laptop, y luego informa qué está roto.
Instala agent-browser gratis
Deja tu email y los pasos de instalación se abren aquí mismo: un prompt para pegar en tu herramienta de IA. Sirve para las 149 skills.
- Nuestra nota
- 8/10
- Funciona en
Claude Code, Codex+6 más
Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Antigravity, OpenCode, Windsurf y más de 60 herramientas de IA que leen skills.
- ¿Hace falta programar?
- Un poco
- Tiempo hasta el resultado
- 15 min
- Creado por
- Vercel
- Probada
- 19 oct 2026
La respuesta corta
agent-browser es la skill de automatización de navegador de Vercel Labs para Claude Code: Claude abre un Chrome real, hace clic, escribe, se desplaza y toma capturas, y su modo de QA integrado convierte eso en un informe de errores con capturas y grabaciones de pantalla. Le sirve a dueños de tiendas, marketers y freelancers que quieren probar una página antes del lanzamiento, siempre que no tengan problema en instalar una pequeña herramienta de línea de comandos. Nuestro veredicto es 8/10: en nuestra prueba demostró que los mensajes de envío y descuento de una página de producto estaban bien y encontró un checkout faltante y un precio confuso, pero la configuración está pensada para desarrolladores.
Ideal para: Dueños de tiendas y marketers que quieren una prueba real haciendo clic en una página de producto o de checkout, en teléfono y laptop, antes del lanzamiento, con capturas para pasarle a quien construye el sitio.
¿Quieres este resultado en tu propio trabajo?
Regístrate gratis e instala agent-browser en un minuto. Un solo email abre los pasos de instalación de todas las skills del sitio.
Cuándo vale la pena usarla
Prueba una página de producto antes del lanzamiento
En nuestra prueba, la dueña de un taller de cerámica le pidió a Claude que comprara en la página desde un teléfono y una laptop. Eligió un esmalte, cambió cantidades, agregó al carrito y entregó un informe: los mensajes de envío gratis y del 10% estaban bien, pero el checkout no estaba conectado y el botón mostraba el precio sin descuento.
Revisa cómo se ve una página en teléfonos
Claude puede hacerse pasar por un iPhone o cualquier tamaño de pantalla y capturar tu página. Encuentras menús cortados, botones escondidos detrás de barras fijas y texto que no cabe, sin tener todos los dispositivos.
Reúne información de una página web
Claude abre una página, la lee y extrae lo que necesitas, como una lista de eventos o una tabla de precios, en una lista ordenada. Funciona en páginas que solo muestran contenido después de hacer clic o desplazarse.
Cómo conseguir un gran resultado
Instálala
Instálala (pasos abajo). El archivo de la skill es solo un puntero: en el primer uso Claude carga las instrucciones reales desde la herramienta instalada, así siempre coinciden con tu versión. Si no tienes Chrome en tu computadora, la herramienta puede descargar un navegador.
Dale a Claude la dirección
Comparte la dirección de la página: un sitio en vivo, un enlace de staging o una vista previa local. Limítate a sitios que sean tuyos o que tengas permiso para probar, y da los datos de inicio de sesión solo mediante la función de inicio de sesión guardado de la propia herramienta, no en el chat.
Describe el recorrido del cliente
Enumera los pasos exactos que hace una compradora y qué debería ser cierto, por ejemplo 'elige un esmalte, pon 4 tazas, agrega al carrito, revisa el mensaje del 10%'. Di 'teléfono y laptop' si quieres ambos; Claude cambia de dispositivo con un solo ajuste.
Pide el informe de QA
Usa palabras como 'prueba', 'QA' o 'encuentra errores' para que Claude cargue el modo dogfood de la skill. Graba la pantalla mientras reproduce cada problema, captura cada paso y escribe un informe con severidades de alta a baja.
Revisa la evidencia y luego arregla
Abre las capturas detrás de los problemas principales antes de actuar. En nuestra prueba una captura de página completa en teléfono repetía el encabezado fijo a lo largo de la imagen, lo que parece un error pero no lo es; las capturas normales mostraban la página real.
Este es el prompt exacto con el que empezamos nuestra prueba:
Prueba mi página de producto como lo haría un cliente real, en un teléfono y en una laptop: elige un esmalte, cambia la cantidad, agrega al carrito y comprueba que los mensajes de envío gratis y del 10% de descuento estén bien. Toma capturas de todo lo que se vea roto y dame un informe corto de qué arreglar.Todo lo que creó
Cada pieza de abajo es un resultado real de nuestra prueba, abierto tal como lo abrirías tú.
Cómo fue la sesión
La conversación de nuestra prueba, resumida. Unos 15 minutos desde el primer prompt hasta el resultado final.
- Tú: Prueba mi página de producto como lo haría un cliente real, en un teléfono y en una laptop: elige un esmalte, cambia la cantidad, agrega al carrito y comprueba que los mensajes de envío gratis y del 10% de descuento estén bien. Toma capturas de todo lo que se vea roto y dame un informe corto de qué arreglar. (La página se sirvió en una dirección de prueba local.)
- AI: Es un trabajo de QA, así que seguiré el flujo dogfood: primero laptop, luego un iPhone 14 emulado, juzgando solo lo que un cliente puede ver.
- AI: Los mensajes están bien en cada paso: faltan $41 con 1 taza, $7 con 2, envío gratis con 3, y con 4 tazas "$122.40 en vez de $136". Pero el botón Agregar al carrito todavía dice $136 en ese punto.
- AI: La barra fija dice "Midnight · $136" pero nunca muestra la cantidad, y vuelve a $34 después de agregar. Hay notas de placeholder visibles en 8 lugares. *Problema: la captura de página completa en el teléfono repitió el encabezado y la barra fijos a lo largo de la imagen. Eso viene de cómo la captura maneja los elementos fijos, así que lo dejé fuera de los hallazgos y usé capturas normales. Algunos clics fallaron con "Unknown ref" después de...
- AI: Informe listo. Arreglos principales: conectar un carrito y un checkout reales, quitar los placeholders visibles, mostrar el precio con descuento en el botón, conservar el carrito tras recargar. Los mensajes de envío gratis y del 10% en sí están bien en todo lo que probé.
Qué funcionó y dónde se quedó corta
Qué funcionó
- De verdad recorrió la página haciendo clic como una compradora y verificó los mensajes de envío gratis y del 10% en cada cantidad, incluidos los totales de carrito más página ($153 en vez de $170, $172.80 en vez de $192): todos correctos
- Detectó cosas que una mirada rápida no ve: el carrito es solo un popup de relleno sin checkout, el carrito se vacía al recargar, y el botón Agregar al carrito muestra $136 mientras el recuadro de descuento dice $122.40
- Probar en teléfono fue cambiar el dispositivo con una línea, y encontró problemas que solo pasan en teléfono (la barra fija oculta la cantidad, el menú se corta a 320px)
- El modo dogfood produjo un informe listo para entregar con severidades, capturas de cada paso y grabaciones de pantalla
Dónde se quedó corta
- La captura de página completa en el teléfono emulado repetía el encabezado y la barra fijos a lo largo de la imagen, así que esa imagen es engañosa y hubo que ignorarla
- La configuración es de perfil desarrollador: el archivo de la skill es solo un puntero, las instrucciones reales vienen de una herramienta de línea de comandos que primero hay que instalar (la skill dice que de forma global con npm), y los ids de los botones quedaron obsoletos tras una recarga hasta tomar una nueva captura del árbol
- Sin datos inventados: el informe solo cita lo que mostraba la página
¿Quieres este resultado en tu propio trabajo?
Regístrate gratis e instala agent-browser en un minuto. Un solo email abre los pasos de instalación de todas las skills del sitio.
Prompts que funcionan
Cambia las partes entre corchetes por tus propios datos. No hace falta nombrar la skill: pide el trabajo y tu herramienta de IA la usa sola.
Prueba mi página de producto en [dirección de la página] como lo haría un cliente real, en un teléfono y en una laptop: elige un [variante], cambia la cantidad, agrega al carrito y comprueba que los mensajes de [envío y descuento] estén bien. Toma capturas de todo lo que se vea roto y dame un informe corto de qué arreglar.Ve a [dirección del formulario] e intenta [reservar un taller / suscribirte al newsletter] como un cliente. Hazlo una vez bien, y luego con un campo vacío y un email incorrecto. No presiones el botón final de envío. Dime qué errores no son claros, con capturas.Toma capturas de [dirección de la página] en una pantalla tamaño iPhone, un teléfono pequeño de 320px y una laptop de 1440px. Recorre toda la página y enumera todo lo que esté cortado, superpuesto o sea difícil de tocar.Abre [dirección de la página] y reúne cada [evento / producto / precio] que aparezca, incluidos los que aparecen al desplazarse o al hacer clic en 'cargar más'. Dame una tabla con [nombre, fecha, precio].Lo que necesitas: Claude Code (plan Pro o superior) en una computadora, con Node.js para instalar la herramienta de línea de comandos agent-browser, Google Chrome en la computadora, o dejar que la herramienta descargue su propio navegador, Una página que Claude pueda abrir: una vista previa local, un sitio de staging o una URL en vivo, No es práctica en la app de Claude en un navegador, porque maneja una herramienta de línea de comandos local.
Cómo instalarla
Las skills siguen el estándar abierto Agent Skills, así que esta no depende de una sola empresa. Elige la herramienta de IA que usas. ¿No lo tienes claro? La primera pestaña cubre la mayoría en un solo paso.
Instala esta skill para que funcione en todos mis proyectos: ejecuta `npx skills add https://github.com/vercel-labs/agent-browser/tree/main/skills/agent-browser -g -y` en mi terminal. Si falta Node.js, dime primero cómo instalarlo. Cuando termines, confirma que la skill quedó instalada y dime cómo empezar a usarla.O hazlo tú mismo:
Un solo comando instala la skill en las herramientas de IA de tu computadora. Detecta las que tienes y te pregunta en cuáles añadirla: Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, OpenCode y más de 60 más.
npx skills add https://github.com/vercel-labs/agent-browser/tree/main/skills/agent-browser -gNecesitas tener Node.js instalado (gratis, en nodejs.org). La opción -g hace que la skill esté disponible en todos tus proyectos.
Bueno saber: También se puede instalar con brew install agent-browser.
Desbloquea los pasos de instalación
Gratis. Deja tu email una vez para abrir los pasos de instalación de las 149 skills y recibir cada mes las mejores skills nuevas.
Cómo lo verificamos
Confirmamos la skill en su fuente original el 18 de octubre de 2026: el SKILL.md está donde debe estar, los archivos se actualizaron en el último año y la licencia (Apache-2.0) permite usarla. Después, el 19 de octubre de 2026, la instalamos, la usamos en la tarea de arriba sin modificarla y anotamos lo que pasó, incluido lo que salió mal.
Preguntas frecuentes
¿Necesito saber programar para usar agent-browser?
No hace falta programar para pedir una prueba ni para leer el informe, que está escrito en lenguaje simple con capturas. Sí tienes que sentirte cómodo dejando que Claude instale una herramienta de línea de comandos, y la skill está pensada para desarrolladores y testers de QA.
¿Qué plan y herramientas necesita?
Necesitas Claude Code, que requiere un plan Pro o superior, más Node.js para instalar la herramienta agent-browser. Usa el Chrome de tu computadora, o descarga su propio navegador si falta Chrome.
¿agent-browser funciona en la app de Claude.ai?
En la práctica, no. La skill maneja una herramienta de línea de comandos en tu propia computadora, así que úsala en Claude Code.
¿En qué se diferencia de pedirle a Claude que revise mi página?
Sin ella, Claude lee tu página o una captura y supone. Con ella, Claude de verdad hace clic, escribe y se desplaza en un navegador real y comprueba qué pasa; en nuestra prueba así encontró que el carrito no tenía checkout, que el carrito se vaciaba al recargar y que el precio del botón ignoraba el 10% de descuento.
¿Puede probar mi sitio en un teléfono?
Sí. Puede emular dispositivos como un iPhone 14 o cualquier tamaño de pantalla que nombres, y tomar capturas y grabaciones en ese tamaño. En nuestra prueba hizo todo el flujo de compra en un iPhone emulado y en un teléfono pequeño de 320px.
Más skills que vale la pena ver
- ProbadaProbada por el equipo de ai school: instalamos esta skill, la usamos en una tarea real y le pusimos un 8/10.PowerPoint Presentations (PPTX)Crea, edita y rediseña presentaciones de PowerPoint, con plantillas y notas del oradorNota de la prueba8/10
- ProbadaProbada por el equipo de ai school: instalamos esta skill, la usamos en una tarea real y le pusimos un 9/10.Excel Spreadsheets (XLSX)Crea y repara libros de Excel con fórmulas que funcionan, gráficos y datos limpiosNota de la prueba9/10
- ProbadaProbada por el equipo de ai school: instalamos esta skill, la usamos en una tarea real y le pusimos un 8/10.Skill CreatorCrea, prueba y mejora tus propias skills, con evals y ajuste de activaciónNota de la prueba8/10