Saltar al contenido
kenjtecJournal
Buscar en el Journal

Muestra el error: traspasos más claros a ChatGPT con capturas de pantalla

Una captura de pantalla muestra el estado, pero no automáticamente su causa. Un informe de errores visual completo vincula la vista, la acción y un siguiente paso que se pueda comprobar.

Ana sostiene dos fotos iguales una junto a otra y ha marcado con un círculo un punto en una de ellas. Ilustración creada con IA.

«El botón está mal» es difícil de abordar. «Tras enviar, el aviso en una pantalla estrecha aparece a la derecha, fuera del formulario» ya aporta una acción, un estado y una desviación visible. Una captura de pantalla cobra valor cuando complementa este tipo de descripción.

ChatGPT admite imágenes como contexto, incluidas capturas de pantalla y diagramas. La documentación recomienda nombrar la zona relevante, el resultado deseado y los límites de la pregunta. Nuestro propio ejemplo consta de dos vistas artificiales de un formulario. No se llevó a cabo ningún análisis de imagen ni ninguna corrección reales para él.

Las imágenes deben mostrar estados comparables

La imagen A muestra un formulario de registro vacío; la imagen B, el estado tras introducir datos y enviarlo. El ancho de la ventana se mantiene igual. Un problema incorporado deliberadamente afecta al aviso situado debajo del botón. Así queda claro qué cambio hay entre las dos imágenes.

Describe el orden de forma explícita. Dos adjuntos de aspecto similar sin explicación invitan a tratar las diferencias como preferencias de diseño arbitrarias. Elimina los datos personales si no son necesarios para la pregunta técnica. Para empezar bastan contenidos de campo inventados.

Separa la observación visible de la hipótesis técnica

La imagen puede mostrar que una línea aparece cortada. De ello aún no se deduce si el responsable es un ancho fijo, un salto de línea, otra fuente o un elemento padre. Una respuesta útil debería mantener separados estos niveles.

Compare the two form views I created myself.
A: before input. B: after submitting, same window width.
Look at the notice below the button.
1. Describe only visible differences.
2. State the expected behaviour from my description.
3. Mark technical causes explicitly as guesses.
4. Suggest a small next checking step.

Este planteamiento nuestro todavía no pide una corrección de código completa. Una pregunta de seguimiento concreta sobre el HTML asociado o la regla de CSS pertinente puede ser más útil que un cambio hecho con seguridad sobre una causa supuesta.

Un informe de errores es un pequeño contrato sobre un estado

Mantén juntos el estado inicial, la acción, la expectativa y la observación real. Añade el ancho de la ventana y, cuando sea relevante, el contenido introducido. Así una segunda persona puede intentar recrear exactamente el mismo estado. Es una base más sólida que una sola frase sobre una pantalla «rota».

Starting point: empty sample form at a fixed narrow width.
Action: enter example data, then submit.
Expected: notice remains fully readable below the button.
Observed: notice extends sideways beyond the form area.
Open: which specific rule causes the overflow?

Se trata de un hallazgo ilustrativo para el patrón previsto, no del registro de una aplicación que se haya observado. Es precisamente esta indicación la que evita que una descripción de error plausible se transmita más adelante como un fallo del producto realmente reproducido.

Cambia solo una condición cada vez

Un siguiente paso podría recrear el estado idéntico usando el teclado o examinar la regla asociada. Si cambias a la vez el navegador, el ancho, los datos y el contenido, no queda claro qué diferencia tuvo efecto. Por eso, al comparar, mantén las condiciones reconociblemente iguales en la medida de lo posible.

Después, devuelve la nueva observación como prueba adicional. «Con el mismo ancho, la línea se ve completa tras este cambio» es más concreto que «ya funciona». Una corrección real incluye también comprobar otros estados razonables, como un texto de aviso más largo.

Una vista parcial sigue siendo una vista parcial

Una captura de pantalla no muestra automáticamente la estructura del documento, una respuesta del servidor ni el recorrido completo con el teclado. Tampoco demuestra la accesibilidad en su conjunto. Para estas cuestiones necesitas observaciones adicionales adecuadas del trabajo real.

La fuerza de un traspaso visual reside en su precisión: las personas y la IA hablan del mismo punto, el mismo estado y la misma expectativa. Un siguiente paso útil se deriva de la pregunta que sigue abierta. Para ello no es requisito un cambio de producto ni un botón de reparación generalizado.

Fuentes y estado de la documentación: 25 de octubre de 2026.

Hamburgo es nuestro punto de partida.

Lo útil viaja contigo.

IA práctica desde Hamburgo, explicada para todos.

Artículos guardados