Imágenes y multimodal: Pega una captura y lo entenderá
📚 Navegación de la serie: El artículo anterior 16 Flujos de trabajo comunes repasó las rutinas diarias de leer código, arreglar bugs y escribir pruebas. Este artículo añade una nueva dimensión: no solo puedes escribirle, también puedes mostrarle imágenes directamente. Capturas de errores, diseños, diagramas de arquitectura... suéltalos ahí y lo entenderá.
Por ejemplo, convertir la captura de pantalla de un diseño en una web real. Antes, teníamos que medir la imagen píxel a píxel: cuánto espaciado hay aquí, qué tamaño de letra, qué radio de borde tiene el botón... Solo sacar las medidas nos llevaba toda la mañana.
Ahora, solo tienes que arrastrar ese PNG directamente a la ventana de Claude Code y teclear «Genera el CSS correspondiente a este diseño».
Unos minutos después, te escupe un bloque entero de CSS: el diseño, los colores, los bordes redondeados y las sombras coinciden perfectamente. Lo pegas en tu proyecto, refrescas el navegador y, voilà, es casi idéntico al diseño. La diferencia de eficiencia es brutal: mostrarle algo es mucho más rápido que explicárselo.
En pocas palabras, la frase "una imagen vale más que mil palabras" se cumple al pie de la letra en Claude Code. Hoy vamos a desglosar «cómo introducir imágenes + para qué sirve hacerlo».
Al terminar este artículo, sabrás cómo:
- Tres formas de meter imágenes en Claude Code (incluye una trampa con los atajos en la que caen los usuarios de Mac).
- Los tres usos principales de las imágenes: pegar capturas de errores, recrear diseños, leer gráficos/diagramas de arquitectura.
- Un criterio para decidir: cuándo usar imágenes y cuándo basta con texto.
- Cómo usar múltiples imágenes, cómo referencia Claude las imágenes y cómo abrir con un clic la que él menciona.
01 ¿Por qué mostrarle imágenes en vez de solo escribir?
Conclusión primero: Cuando algo es "más difícil de describir que de capturar", es hora de usar una imagen.
Este es el criterio dictado literalmente por la documentación oficial: «Usa imágenes cuando las descripciones de texto no sean claras o resulten engorrosas».
Analogía: Una imagen vale más que mil palabras. Le describes a un amigo cómo es una ventana de error roja: «En la esquina superior izquierda hay una cruz roja, debajo una línea de letra pequeña, y a la derecha un botón...» y él sigue sin enterarse; pero le mandas una captura y dice «Ah» entendiéndolo todo de golpe. Con Claude pasa igual: te ahorras el esfuerzo de explicarlo y le ahorras a él el esfuerzo de adivinar.
¿En qué escenarios es especialmente útil? Tras usarlo, destacan tres tipos:
| Escenario | Cuánto cuesta describirlo | Cuánto ahorra una imagen |
|---|---|---|
| Desajustes de diseño / UI | «Este div está desviado a la derecha unos veinte píxeles, y se superpone con el bloque de abajo» | Con la captura, ve el fallo de un vistazo |
| Ventanas de error / Consola roja | Teclear a mano o intentar alinear al pegar un stack trace larguísimo | Tiras la captura y le das el contexto de golpe |
| Recrear diseños / Clonar componentes | «El color principal es un azul algo violáceo, los bordes no son ni muy grandes ni muy pequeños...» | Le das la foto y que lo mida él |
Aquí hay una distinción clave: Claude Code mira "el contenido de la imagen", no hace la captura por ti. Tendrás que hacer la captura tú mismo (con la herramienta del sistema), él se encarga de «entender la imagen que le das».
💡 Resumen en una oración: El criterio es simple: si es más pesado describirlo que hacer una captura, usa una imagen; la regla oficial dice «usar imágenes cuando el texto no sea claro o sea engorroso».
02 Tres formas de dar de comer imágenes: Arrastrar, pegar, dar la ruta
¿Cómo se mete la imagen? La documentación da tres métodos, cualquiera vale y el resultado es el mismo. Los ordeno de más fácil a más avanzado.
Esta imagen agrupa las tres vías: arrastrar a la ventana, pegar con ctrl+v tras copiar (en Mac también es ctrl+v), o darle directamente la ruta del archivo. Los tres caminos llevan a Roma: todos le dan la imagen a Claude para que "trabaje viéndola".
Método 1: Arrastrar directo a la ventana (El más intuitivo)
Desde el Finder o el Explorador de Archivos, arrastra el archivo de imagen hacia la ventana de la terminal donde corre Claude Code, suéltalo y listo.
Es el método que requiere menos reflexión: como cuando arrastras un archivo a una ventana de chat. Los principiantes suelen empezar por aquí, cero curva de aprendizaje.
Método 2: Copiar y pegar con ctrl+v (El más frecuente, pero con trampa)
Muchas veces la imagen no está guardada como archivo: acabas de hacer una captura o le has dado a "Copiar imagen" en una web. En estos casos, pegar directamente es lo más cómodo.
Pero aquí está la trampa más grande de todo el artículo, la documentación oficial lo subraya especialmente:
Copia la imagen y usa ctrl+v para pegarla en la CLI (no uses cmd+v).
Ojo: En Mac para pegar imágenes también se usa ctrl+v, no tu habitual cmd+v.
Esto es sumamente contraintuitivo. Llevas diez años copiando y pegando texto en Mac con cmd+v, lo tienes grabado en la memoria muscular. La primera vez que quieres pegar una captura, por instinto le das a cmd+v, y te aparece una ruta de texto rara en la terminal, la imagen no ha entrado, y piensas que no funciona. Revisas la documentación y lo entiendes: en muchas terminales cmd+v pega la ruta en texto, solo ctrl+v le da de verdad la imagen a Claude.
(Nota: algunas terminales como iTerm2 sí aceptan cmd+v para imágenes, pero como el comportamiento varía, ctrl+v es la vía segura en cualquier parte, apréndetela y evitarás problemas.)
Grábate esto a fuego:
| Plataforma | Para pegar imágenes usa | NO uses |
|---|---|---|
| Mac | ctrl+v | ❌ cmd+v (muchas terminales lo pegarán como ruta de texto) |
| Windows / Linux | ctrl+v (si en WSL la terminal bloquea ctrl+v, usa alt+v) | —— |
Un pequeño detalle: cuando se pegue con éxito, aparecerá en el cuadro de entrada una etiqueta tipo [Image #1] (oficialmente llamado "chip"), lo que significa que la imagen ya está adjuntada, y puedes seguir escribiendo texto en ese mismo prompt.
Método 3: Escribir la ruta directamente (Ideal para scripts / imágenes guardadas)
Si la imagen ya está guardada y sabes su ruta, lo más directo es escribir la ruta en el prompt, para que él la lea:
Analiza esta imagen: /ruta/a/tu/imagen.pngCambia /ruta/a/tu/imagen.png por la ruta real (acepta relativas y absolutas). Este método no depende del ratón, y es el mejor cuando usas scripts o cuando la imagen está muy escondida en el proyecto.
💡 Resumen en una oración: Arrastrar / pegar con
ctrl+v/ dar la ruta, elige uno; los usuarios de Mac deben recordar usarctrl+vy NOcmd+v.
03 Uso 1: Pegar capturas de errores y de UI, dale el "lugar del crimen"
El primer escenario más práctico: pegar la captura del problema para que él resuelva el caso viéndolo.
¿Por qué funciona tan bien? Porque muchos errores y problemas de estilos no se pueden transmitir bien solo con texto. Una ventana de error tiene iconos, colores, una disposición; si lo tecleas solo describes una parte. Con la UI pasa igual: un desajuste de unos píxeles lo ves a ojo, pero explicarlo es un dolor.
Analogía: No le digas al médico "me duele aquí", enséñale la radiografía. Si dices "me duele un poco abajo a la derecha", el médico solo puede adivinar; si le enseñas el TAC, ve el problema al instante. La captura es la "radiografía" para Claude.
¿Cómo se hace? Le das la captura (con cualquiera de los tres métodos) y añades una frase con tu problema. El ejemplo oficial lo deja claro:
Aquí tienes una captura del error. ¿Qué lo está causando?O para problemas de UI:
Describe los elementos de UI en esta captura de pantallaPor ejemplo, ajustando una página en React, un botón se resiste a ir a su sitio y el CSS parece perfecto. En ese momento tomas una captura del desajuste y se la tiras, junto con un "por qué este botón se aplasta hacia la derecha". Claude lo mira y dice: "El contenedor padre tiene un padding-right, y sumado al margin del propio botón, se solapan". Te lo aclara en una frase, cambias una línea y arreglado. Si intentaras describir ese desajuste con texto, seguro que necesitabas varios intentos.
💡 Resumen en una oración: Para problemas de UI o errores, la captura es la "foto de la escena del crimen": mostrarle es mucho más rápido para resolverlo que explicárselo.
04 Uso 2: Recrear diseños, capturas que escupen código
Este es el escenario de "diferencia abismal de eficiencia" del que hablábamos al principio: darle un diseño y que escupa código funcional.
¿Por qué es tan sorprendente? Porque te ahorra la tarea más pesada de pasar de "Diseño → Código". Medir valores, ajustar márgenes, probar colores, era la parte más aburrida para un frontend, pero ahora se lo das para que saque una versión bastante fiel, y tú solo haces los retoques finales.
Analogía: Darle una foto al sastre para que te haga un traje. No necesitas darle todas las medidas, con la foto de muestra él mismo saca el patrón, la tela y las costuras. El diseño para Claude es esa "foto de muestra".
El ejemplo oficial da dos frases clave con las que puedes empezar:
Genera el CSS correspondiente a este diseño¿Qué estructura HTML recrearía este componente?La primera para que genere el CSS basándose en el diseño, la segunda para que deduzca la estructura HTML. Juntas, te montan el esqueleto de un componente estático.
A decir verdad, debes tener expectativas realistas: no será una copia perfecta píxel a píxel, será un punto de partida muy avanzado. Como en el CSS del principio, la estructura general y colores estarán bien, pero quizás los márgenes internos fallen por unos píxeles, y tendrás que ajustarlos. Pero te habrá ahorrado al menos una hora: empezar un CSS desde cero y ajustar una versión al 80% son dos mundos de trabajo distintos.
| Recrear diseño | ❌ Escribir a mano | ✅ Alimentarle con capturas |
|---|---|---|
| Medir valores | Píxel a píxel tú mismo | Lo estima viendo la imagen |
| Crear esqueleto | Desde un archivo en blanco | Te da una base funcional |
| Tu trabajo | Todo desde cero | Ajustar el 10-20% final |
💡 Resumen en una oración: Captura de diseño + «Genera el CSS correspondiente», él te da el 80% y tú pules el 20%, ahorrándote todo el trabajo físico.
05 Uso 3: Leer diagramas y esquemas de arquitectura para entender la "estructura"
El tercer uso: gráficos, esquemas de bases de datos, diagramas de arquitectura... Claude también los entiende.
¿Por qué una categoría aparte? Porque mientras los usos anteriores eran "interfaces", aquí hablamos de "relaciones": quién conecta con quién, cómo fluyen los datos, cómo se estructuran los módulos. Estas relaciones son un dolor de cabeza explicadas en texto, pero clarísimas en un gráfico, y eso a Claude se le da de maravilla.
Analogía: Para explicar un sistema a un novato, dibujar un esquema en la pizarra es mejor que hablar una hora. Si le dices "El servicio de usuario llama al de pedidos, y el de pedidos depende del inventario y del pago...", se perderá. Pintas tres cajas, unas flechas, y lo pilla al vuelo. Esa pizarra se la puedes pasar a Claude.
La documentación oficial da ejemplos para "leer" y "modificar":
Este es nuestro esquema de base de datos actual. ¿Cómo deberíamos modificarlo para la nueva funcionalidad?¿Hay elementos problemáticos en este diagrama?La primera es preguntarle, esquema en mano, cómo alterar las tablas para una nueva feature; la segunda es pedirle que revise si hay algo ilógico en el diseño.
Un truco muy habitual: al heredar un proyecto, te pasan un PNG con la arquitectura. Dáselo a Claude y dile que te explique por encima cómo funciona el sistema. Leerá los módulos y conexiones y te dará un resumen: es mucho más rápido que mirar el diagrama sin tener ni idea, como si alguien te hiciera un recorrido rápido por el mapa.
💡 Resumen en una oración: Gráficos, esquemas, diagramas de arquitectura (cosas de "relaciones"), dáselos como contexto para que entienda la estructura y luego te ayude a revisarlos o modificarlos.
06 Múltiples imágenes, referencias y abrir con un clic: Pequeños trucos
Para terminar, un par de detalles para que tu flujo sea perfecto, extraídos de la documentación oficial.
Puedes darle varias imágenes a la vez
No tienes que ir de una en una: puedes poner varias imágenes en un solo prompt. Por ejemplo, "Este es el diseño viejo y este es el nuevo, dime qué ha cambiado", le das las dos y las compara. Esto se usa mucho al rediseñar interfaces para no tener que describir los cambios.
Cómo referencia Claude las imágenes: [Image #1]
Cuando Claude hable de las imágenes que le has dado, usará identificadores como [Image #1] o [Image #2]. El número indica el orden en el que se las diste. Esto viene muy bien para saber de un vistazo "a qué foto se refiere" cuando subes varias.
Abrir con un clic la imagen que menciona
Ese [Image #N] que aparece en sus respuestas es clickeable, la documentación oficial lo aclara:
Cuando Claude hace referencia a imágenes (por ejemplo,
[Image #1]), usaCmd+Click(Mac) oCtrl+Click(Windows/Linux) en el enlace para abrir la imagen en el visor por defecto.
Es decir, si quieres comprobar de qué imagen habla, haces Cmd+Click (en Mac) o Ctrl+Click (en Windows/Linux) sobre el número, y el visor de imágenes de tu sistema la abrirá automáticamente.
| Acción | Mac | Windows / Linux |
|---|---|---|
| Pegar imagen | ctrl+v | ctrl+v |
Abrir [Image #N] | Cmd+Click | Ctrl+Click |
Fíjate que el uso de los atajos es un poco "cruzado": para pegar usas ctrl, pero para abrir el enlace en Mac usas Cmd. No te confundas.
💡 Resumen en una oración: Puedes poner múltiples imágenes en un prompt, Claude usa
[Image #N]para referenciarlas y puedes abrirlas haciendo clic en el número (conCmd+Clicken Mac).
07 Manos a la obra: Arrastra una imagen para que la lea, en tres pasos
Como siempre, la práctica hace al maestro. Vamos a hacer el ciclo completo "dar imagen → la entiende" en tres pasos. No hace falta un proyecto, usa cualquier imagen de tu escritorio.
Paso 1: Busca una imagen y guárdala a mano
Haz una captura o busca un PNG/JPG cualquiera. En Mac las capturas van al escritorio por defecto. Ponla en un lugar accesible, como el propio escritorio.
Paso 2: Inicia Claude Code donde sea
claudeResultado esperado: Pantalla de bienvenida con el cuadro de texto abajo. (Leer imágenes funciona en cualquier directorio).
Paso 3: Mete la imagen y pídele que la describa
Cualquier método vale, recomiendo arrastrarla: coge la imagen y suéltala en la ventana de la terminal. Aparecerá el marcador [Image #1]. Luego escribe:
¿Qué hay en esta imagen? Describe lo que ves en españolDale al Enter.
Resultado esperado: Claude lee la imagen y te dice en español lo que contiene (elementos de interfaz si es una captura, objetos si es una foto). Si describe correctamente lo que ve = éxito, ya sabes darle de comer imágenes.
⚠️ Para los usuarios de Mac que quieran probar "Copiar y Pegar": copia la imagen (desde vista previa o el navegador), vuelve a la terminal y pulsa ctrl+v (¡NO cmd+v!). Si en vez de [Image #N] aparece la ruta del archivo como texto, probablemente pulsaste cmd+v por inercia; bórralo y repite.
💡 Resumen en una oración: Arrastrar /
ctrl+v/ dar ruta; prueba a darle una imagen y si la describe bien, tienes dominado el proceso.
08 Resumen
En este artículo has aprendido a dotar de "vista" a Claude Code: pasar de solo teclear a enseñarle imágenes directamente.
Repasemos los puntos clave:
| Aspecto | Punto clave |
|---|---|
| Cómo introducirlas | Arrastrar / pegar con ctrl+v / dar ruta (elige una) |
| La mayor trampa | En Mac se pega con ctrl+v, ¡nunca con cmd+v! |
| Tres grandes usos | Mostrar capturas de error/UI, recrear diseños, entender esquemas/diagramas |
| Cuándo usarlas | Cuando escribirlo te cueste más esfuerzo que hacer la captura |
| Varias imágenes y referencias | Se pueden añadir varias a la vez; Claude usa [Image #N] y puedes hacer clic para abrirlas |
A partir de ahora podrás: Tomar cualquier captura, diseño o diagrama de arquitectura, dárselo a Claude Code y dejar que diagnostique el fallo, genere código o analice la estructura; además de tener grabado a fuego ese poco intuitivo ctrl+v en Mac. Esta capacidad de "enseñarle" reducirá drásticamente tu esfuerzo al describir problemas, haciendo que muchas cosas se resuelvan con una imagen y una frase.
El próximo artículo será 18 "Guía de uso de CLAUDE.md": hasta ahora hemos dado imágenes y requisitos, pero cada vez tenemos que recordarle el contexto del proyecto. ¿Y si pudiéramos hacer que Claude ya sepa de qué va el proyecto y cuáles son las normas en cuanto entra? El próximo artículo tratará sobre su "manual de instrucciones": CLAUDE.md, que una vez configurado, te ahorrará repetírselo todo cada vez.