Enséñale la pantalla

Qué es y por qué importa

Claude Code escribe el código, pero por sí solo no ve lo que ves tú. Si no tiene forma de mirar la página, el botón torcido o el formulario que no se envía para él no existen. Y al final los descubres tú, después de que te haya escrito «hecho».

Esta guía resuelve el problema en los dos sentidos. Tú le enseñas la pantalla a Claude, con una captura. Y Claude mira la pantalla por su cuenta, con un navegador que puede usar: abre la página, hace clic, rellena, mira el resultado.

Importa porque un fallo visual explicado con palabras es lento e impreciso. «El botón está un poco más abajo» puede significar diez cosas distintas, una imagen no. Y cuando es Claude quien repite el recorrido, los errores más tontos los encuentra y los arregla antes de que te lleguen a ti.

La regla general, nada de «hecho» sin prueba, ya la expliqué en otra guía. Aquí me centro en la parte visual: cómo ve Claude la página y cómo te enseña que funciona.

1. La frase que le das a Claude

Esta es la frase que uso. La pego después de pedir un cambio, o la pongo de una vez por todas en el CLAUDE.md. Cópiala tal cual:

Después de cada cambio abre la página en el navegador y repite tú el recorrido como un usuario de verdad: haz clic, rellena, envía. Haz una captura antes y otra después. Luego dime qué has visto, paso a paso. No escribas "hecho" hasta que lo hayas visto funcionar: adjúntame las capturas como prueba. Si algo no cuadra, arréglalo y vuelve a comprobarlo.

Cada parte tiene un motivo:

• «Repite tú el recorrido como un usuario de verdad»: no basta con abrir la página. Tiene que hacer lo que haría una persona, en el mismo orden.
• «Una captura antes y otra después»: la comparación enseña qué ha cambiado de verdad, no solo que la página carga.
• «Dime qué has visto, paso a paso»: si falta un paso en el relato, probablemente no lo ha hecho.
• «Si algo no cuadra, arréglalo y vuelve a comprobarlo»: así la ronda de correcciones la hace él, no tú.

La frase solo funciona si Claude tiene un navegador que usar. Sin él, no puede abrir nada: en la sección 3 ves cómo dárselo. Y si no consigue abrir la página, tiene que decírtelo, no escribir «hecho» igualmente.

Ponla en el CLAUDE.md

El CLAUDE.md es el archivo de instrucciones del proyecto. Está en la carpeta principal, como CLAUDE.md o .claude/CLAUDE.md, y Claude Code lo lee al principio de cada sesión. Si pones ahí la frase, no tienes que repetirla cada vez. Puedes pedirle a Claude que la añada él mismo:

Añade al CLAUDE.md esta regla para cada cambio en la interfaz: [pega aquí la frase]

Luego abre una sesión nueva: el archivo se carga al arrancar. Para comprobar que lo ha cogido, escribe /context y mira en Memory files.

2. Enséñale tú la pantalla

A veces el problema lo ves tú antes que él. En vez de describirlo, mándale la imagen. En Claude Code tienes cuatro formas:

1. En el terminal: copia la imagen y pégala con Ctrl+V. En el Mac es Ctrl también en el Terminal, no Cmd (en iTerm2 también vale Cmd+V). En Windows es Alt+V. En el mensaje aparece [Image #1].
2. O arrastra el archivo de la imagen dentro de la ventana de Claude Code.
3. O escribe la ruta del archivo en el mensaje, como en el prompt de abajo.
4. En la app de escritorio: botón + junto al campo del mensaje para adjuntar el archivo, o arrastra la imagen al campo.

mira esta captura: /ruta/imagen.png

Luego basta con una línea. [Image #1] le dice a Claude de qué imagen hablas, útil cuando pegas más de una en la misma conversación.

[Image #1] este botón está torcido, arréglalo

Para hacer una captura de una parte de la pantalla: en el Mac, Cmd+Ctrl+Shift+4 la copia directamente al portapapeles; en Windows, Win+Shift+S. Así ya está lista para pegar.

3. Dale a Claude un navegador

Para que Claude repita el recorrido por su cuenta, tiene que poder abrir la página. Hay dos caminos, según dónde lo uses.

La app de escritorio: el navegador integrado

En la app de escritorio de Claude, en la pestaña Code, hay un panel Browser. Lo abres con el botón Browser de la barra superior de la sesión, o con Cmd+Shift+B en el Mac (Ctrl+Shift+B en Windows). Claude arranca tu web en local, la abre ahí, hace clic, rellena los formularios, hace las capturas y arregla lo que encuentra. Y tú lo ves mientras lo hace.

También hay una opción, Auto-verify changes, que está activada por defecto: después de modificar los archivos, Claude comprueba por su cuenta con capturas y errores antes de cerrar la respuesta. La frase de la sección 1 sirve igualmente: pide el recorrido completo del usuario y el relato de lo que ha visto.

El terminal: Claude in Chrome

Si usas Claude Code en el terminal, el camino es Claude in Chrome: una extensión para Chrome o Edge, que también funciona con otros navegadores basados en Chromium. Instalas la extensión desde la Chrome Web Store y luego arrancas Claude Code así:

claude --chrome

Dentro de la sesión, /chrome te enseña si la conexión funciona y te deja elegir Enabled by default, así las próximas sesiones arrancan ya conectadas. Yo lo activo solo cuando lo necesito, porque con el navegador siempre activo las herramientas ocupan espacio en el contexto. Necesitas un plan de pago de Claude (Pro, Max, Team o Enterprise), con el acceso hecho desde /login: solo con una clave de API no se activa.

Aquí Claude usa tu navegador de verdad, en una ventana que ves, también en las páginas donde ya has iniciado sesión. Si encuentra una página de inicio de sesión o un captcha, se para y te pregunta a ti. También puede leer los errores de la consola, útil cuando la página parece estar bien pero por debajo algo falla.

Las capturas como prueba

Si quieres abrir tú las capturas que Claude hace en el navegador, pídele que las guarde en archivos: te dice la ruta y las miras cuando quieras.

Guarda las capturas de antes y después en una carpeta del proyecto y dime las rutas.

Si haces apps para iPhone

El navegador sirve para webs y aplicaciones web. Para una app de iOS, la app de escritorio en el Mac tiene un panel iOS Simulator, en beta: Claude compila la app, la lanza en el simulador, toca las pantallas y las lee para comprobar sus cambios. Necesitas tener Xcode instalado, y solo funciona con dispositivos simulados, no con un iPhone de verdad.

Errores comunes

• Describir con palabras un fallo visual. Pega la captura y añade una línea: es más rápido y no deja dudas.
• Darle la frase a Claude sin darle un navegador. Abre el panel Browser en la app de escritorio o arranca Claude Code con claude --chrome, si no, no tiene nada que mirar.
• Aceptar «lo he comprobado» sin imágenes. Pide las capturas de antes y después: si no las hay, la comprobación no ha existido.
• Quedarse en la primera pantalla. Comprueba que el relato de Claude llega hasta el final del recorrido, hasta el envío.

Lista de comprobación

• La frase está en el CLAUDE.md del proyecto
• Después de añadirla he abierto una sesión nueva
• Claude tiene un navegador: panel Browser o claude --chrome
• Sé pegar una captura (Ctrl+V, Alt+V en Windows)
• Cada «hecho» llega con una captura de antes y otra de después
• El relato de Claude cubre todo el recorrido

Preguntas frecuentes