Cómo pasarle capturas a Claude Code para clavar un diseño

Describir un diseño con palabras es de las cosas más ineficientes que se pueden hacer con la IA.

"Quiero que el botón esté un poco más a la derecha, con las esquinas menos redondeadas, y que el espacio entre el título y el texto de abajo sea mayor, pero no tanto como ahora entre el texto y el botón."

Tres párrafos así y el resultado sigue sin ser lo que tenías en la cabeza. Una captura de pantalla con una flecha lo resuelve en diez segundos.

¿Puedo pasarle imágenes a Claude Code?

Sí. Puedes pegar una captura directamente en el terminal, o arrastrarla, o darle la ruta del archivo de imagen y decirle que lo mire.

De las tres, la que uso más es pegar. Haces la captura, la copias, y la pegas en la conversación como pegarías texto. Aparece como una referencia a la imagen y ya la tiene delante.

Si te falla el pegado (pasa según qué terminal uses), la ruta siempre funciona: guardas la captura en la carpeta del proyecto y escribes "mira captura.png y dime qué ves". Menos elegante, igual de efectivo.

Y funciona en las dos direcciones que importan: puede ver un diseño que quieres copiar, y puede ver el resultado de lo que ha hecho para comparar.

Los cuatro usos que valen de verdad

El diseño de referencia. Le pasas la captura de una web o de un componente que te gusta y le dices "quiero algo con esta estructura". No para copiarlo tal cual, sino para que entienda la disposición: dónde va cada cosa, cuánto aire hay, qué manda visualmente.

El error de pantalla. Esto es de lo más útil y de lo que menos se usa. En vez de intentar transcribir el mensaje de error rojo que te sale, captura y pega. Los errores de navegador, además, vienen con contexto alrededor que a ti te parece irrelevante y a él le dice exactamente dónde está el problema.

El antes y el después. Captura de cómo se ve ahora, captura de cómo debería verse. Dos imágenes en el mismo mensaje. Es la forma más rápida de pedir un cambio visual y la que menos malentendidos genera.

El boceto a mano. Suena a broma y no lo es. Dibujas la pantalla en un papel, le haces una foto y se la pasas. Cajas, flechas y palabras sueltas. Interpreta eso bastante mejor de lo que interpreta tu descripción por escrito, porque un boceto tiene posiciones y proporciones, que es justo lo que las palabras no transmiten.

Cómo hacer la captura para que sirva

Aquí va lo que marca la diferencia entre una captura útil y una inútil.

Captura solo la zona relevante. Una pantalla entera de un monitor grande, con el navegador, las pestañas, la barra de tareas y tu fondo de escritorio, tiene un noventa por ciento de ruido. Recorta el componente del que estás hablando.

Anota encima. Una flecha y dos palabras. Cualquier herramienta de captura del sistema te deja dibujar encima. "Este espacio, más pequeño" con una flecha señalando ahorra tres mensajes.

Si el problema es de tamaños, incluye una referencia. Captura con algo al lado que sirva de escala, o dile las dimensiones. Una imagen sola no le dice si eso ocupa doscientos píxeles o setecientos.

Para responsive, dos capturas. Cómo se ve en escritorio y cómo se ve en móvil. Y dilo explícitamente: "la primera es a 1440 de ancho, la segunda a 390". Sin ese dato, tiene que adivinar y adivina mal.

Lo que sí y lo que no hay que pedirle

Lo que hace muy bien: entender estructura y disposición. Detectar que algo está desalineado, que falta espacio, que el contraste es insuficiente, que dos elementos que deberían tener el mismo tamaño no lo tienen.

Lo que hace regular: sacar valores exactos de una imagen. Si le pides "dime el color exacto de este botón", te va a dar una aproximación, no el código de color real. Para eso usa el cuentagotas del navegador y dale el valor tú.

Lo que no hace: leer texto muy pequeño de forma fiable. Si en la captura hay una fuente diminuta con datos importantes, escríbelos aparte.

Y una cosa que conviene tener clara: la imagen ocupa bastante espacio del contexto de la conversación. Si vas pegando quince capturas seguidas, vas a notar que la conversación se vuelve más lenta y que empieza a olvidar cosas del principio. Esto tiene que ver con cómo funcionan los límites de contexto, que explico en por qué tus prompts no funcionan.

El bucle que uso para clavar un diseño

Este es el proceso concreto, y es un bucle:

Le paso la captura de referencia y le pido la primera versión. La miro en el navegador. Hago captura de lo que ha salido. Se la paso junto con la referencia y le digo qué falla, señalado con flechas. Genera la corrección. Vuelvo a mirar.

Dos o tres vueltas de eso y está. Lo importante es no intentar clavarlo a la primera describiendo veinte detalles: sale mucho peor que tres iteraciones cortas mirando el resultado.

Y aquí va el truco que más tiempo me ahorra: en cada vuelta señalo una sola cosa. Si le pides cinco cambios a la vez, arregla tres y rompe dos. Un cambio, comprobación, siguiente.

Un uso que casi nadie prueba: enseñarle la aplicación funcionando

Más allá del diseño, hay un uso que ahorra muchísimo tiempo cuando algo no cuadra.

Capturas la pantalla de tu aplicación tal y como se ve, con los datos reales dentro, y le preguntas si eso es lo que él esperaba que saliera. Muchas veces ahí se detecta el fallo al instante: un campo que muestra una fecha en el formato equivocado, un listado que sale ordenado al revés, un texto cortado que en su cabeza cabía.

Es la diferencia entre contarle el resultado y enseñárselo. Y él, igual que tú, entiende mucho mejor lo segundo.

Lo que se te va a atascar

La captura no se pega. Depende del terminal. Prueba a arrastrar el archivo a la ventana, o guarda la imagen en la carpeta del proyecto y dale la ruta.

Dice que la ve pero describe otra cosa. Suele pasar cuando la captura tiene mucho ruido o está muy comprimida. Recorta y vuelve a intentarlo.

Copia el diseño de referencia demasiado literal. Si le pasas la captura de una web conocida, te la va a clonar. Dile explícitamente qué quieres coger: "la disposición sí, los colores no, quiero los míos".

Se olvida de la captura tres mensajes después. Si la conversación se alarga, vuelve a pegarla. Es más barato que explicarla otra vez con palabras.

Capturas con datos personales. Cuidado con esto, que se hace sin pensar. Una captura de tu panel de administración puede llevar correos de clientes, nombres o cifras. Tapa lo que no tenga que salir antes de pegarla.

Y ahora qué

La próxima vez que vayas a escribir un párrafo describiendo cómo quieres que se vea algo, para. Haz la captura, dibuja una flecha, pégala.

Vas a notar la diferencia en el primer intento. Es de las cosas que, una vez las haces, ya no vuelves atrás.

Si estás empezando y todo esto te suena a chino, ordénalo primero con la guía de Claude Code para no programadores. Y si lo que quieres es montar una web entera desde cero, el recorrido completo está en crear una web desde cero con Claude Code.

Este bucle de capturas es una de las cosas que más enseño en el curso de crear tu web con Claude Code, porque es lo que separa una web que se parece a lo que querías de una que se parece a lo que la IA entendió.

Ver el curso