Indica a tu IA para programar qué elemento cambiar

“Haz más grande el segundo botón.” La instrucción indica un cambio, pero no una ubicación, así que tu herramienta de IA para programar tiene que adivinar a qué botón te refieres. SuperchargeInspect acaba con las conjeturas. Señala el elemento, escribe una nota que describa el cambio y copia una referencia que incluye la nota, una captura de pantalla anotada y los estilos observados del elemento. En una sola referencia le das a la herramienta el elemento, su aspecto y el cambio que quieres.

El flujo de trabajo en cuatro pasos

Inicias una inspección con Alt+Shift+E o con el botón de la barra de herramientas y luego te mueves por la página pasando el cursor o con las teclas de flecha. El flujo de trabajo tiene cuatro pasos.

1. Selecciona el elemento. Pasa el cursor sobre él o desplázate con las teclas de flecha y pulsa Enter para fijarlo.
2. Añade tu nota. Pulsa Enter otra vez para escribir tu nota. Describe el cambio con palabras, por ejemplo “haz que este botón ocupe todo el ancho”. La referencia marca la nota como el único cambio solicitado.
3. Copia la referencia. Pulsa Ctrl+Enter, o Cmd+Enter en macOS. Un solo elemento del portapapeles contiene la referencia de texto y el PNG anotado.
4. Pega. Pégala en tu herramienta de IA para programar y deja que decida qué parte usar.

La tarjeta de ejemplo de arriba sigue este mismo flujo. Haz clic en una parte para fijarla y luego pulsa Copiar referencia. La demo copia la referencia de texto y el PNG anotado, igual que la extensión.

Qué contiene la referencia

La referencia de texto es texto plano que puedes leer por encima. Tras un breve encabezado y una línea de seguridad, incluye tu nota y la URL de origen, y luego el elemento con su pista de localizador y el texto visible, que se marca como datos de referencia. Después indica el tamaño del viewport y la posición de desplazamiento, los límites del elemento y los estilos observados: la pila de font-family declarada, los valores de color, el padding y el margin de cada lado, gap, el border radius y display. Termina con un breve extracto del marcado del elemento tal como lo compuso la página.

La captura de pantalla anotada es el recorte visible con un pie debajo: tu nota, el origen, el elemento y una breve línea de estilos.

La línea de seguridad marca el texto de la página como datos de referencia, de modo que ese texto no puede hacerse pasar por una instrucción. Solo tu nota cuenta como la petición.

Cómo pegar en tu herramienta de IA para programar

Tu herramienta de IA para programar decide si usa el texto, la imagen o ambos. No se han certificado todas las combinaciones de herramienta y sistema operativo.

Si al pegar solo se conserva un formato, usa Copiar solo texto, Copiar solo imagen o Guardar PNG en el menú Más formas de copiar.

Límites de la referencia

Una referencia copiada es una instantánea de lo observado. Captura lo que muestra la página, no lo que la construyó. Inspect no recupera archivos fuente, nombres de componentes ni las reglas CSS del autor. El valor de la fuente es la pila font-family declarada, la lista que solicita la página. La herramienta que recibe el contenido decide qué formatos conserva. Por SSH, en un contenedor remoto o en un entorno de programación alojado, la imagen local no se incluye al pegar. Guarda primero el PNG y luego adjúntalo del modo en que la herramienta remota acepte archivos. El PNG guardado es el recorte limpio, sin el pie de imagen, así que tu nota va en el texto pegado.

Privacidad

Inspect no hace llamadas de red, no requiere cuenta y nunca envía nada a un servicio de IA ni lanza ningún prompt. Nada de lo que inspeccionas sale de tu dispositivo hasta que tú mismo lo pegas o guardas el PNG. Recuerda tu última selección en cada página, en el almacenamiento de sesión, que se borra al cerrar el navegador.

Lee y copia valores CSS de una web con el inspector de CSS.