Prompting Multimodal

El Problema

La mayoria de los desarrolladores solo usan prompts de texto, ignorando que los modelos de IA modernos pueden procesar imagenes, capturas de pantalla, diagramas y contexto visual junto con texto. Una captura de pantalla de un bug vale mas que mil palabras de descripcion. Una imagen de mockup produce mejor codigo de UI que parrafos de especificacion de layout. No usar entrada multimodal deja capacidad significativa de IA sin aprovechar.

El Prompt

Estoy proporcionando tanto texto como entrada visual. Analiza ambos juntos.

CONTEXTO DE TEXTO:
[describe lo que muestra la imagen y lo que necesitas]

IMAGEN:
[adjunta captura de pantalla, mockup, diagrama o captura de error]

TAREA:
[lo que quieres que la IA haga con ambas entradas]

INSTRUCCIONES DE ANALISIS VISUAL:
- Describe lo que ves en la imagen antes de actuar sobre ella
- Referencia elementos visuales especificos (boton arriba a la izquierda, mensaje de error en rojo, etc.)
- Si la calidad de la imagen es pobre o los detalles no son claros, indica lo que no puedes determinar
- Cruza referencias de elementos visuales con el contexto de texto

FORMATO DE SALIDA:
[especifica lo que quieres de vuelta: codigo, analisis, descripcion, correcciones]

Ejemplo de Salida

ANALISIS VISUAL:
La captura muestra un dashboard React con una tabla de datos. Puedo ver:
- Una tabla con 5 columnas (Nombre, Email, Rol, Estado, Acciones)
- La fila 3 muestra un dropdown "Acciones" desalineado que desborda fuera del contenedor de la tabla
- Las insignias de estado usan colores inconsistentes (fila 1: verde, fila 4: tambien verde pero mas oscuro)
- La fila de encabezado no tiene indicadores de orden a pesar de que el cursor muestra un puntero sobre "Nombre"

PROBLEMAS IDENTIFICADOS:
1. Desbordamiento del dropdown — el menu de Acciones necesita position: relative en la celda padre
   y z-index: 10 en el dropdown
2. Colores de insignia inconsistentes — el verde mas oscuro (#16a34a) en fila 4 debe coincidir
   con el verde mas claro (#22c55e) usado en fila 1
3. Affordance de ordenamiento faltante — agregar iconos chevron a los encabezados de columna ordenables

CORRECCION DE CODIGO para problema 1:
.table-cell-actions {
  position: relative;
}
.actions-dropdown {
  position: absolute;
  right: 0;
  z-index: 10;
}

Cuando Usar

Usa prompting multimodal al depurar problemas de UI desde capturas de pantalla, implementar disenos desde mockups, analizar pantallas de error, revisar graficos o diagramas, o cualquier tarea donde el contexto visual agrega informacion que el texto solo no puede capturar. Es particularmente poderoso para desarrollo frontend, flujos de trabajo de diseno a codigo y reportes visuales de bugs.

Tips Pro

• Pide al modelo que describa la imagen primero — esto confirma que ve lo que tu ves y detecta malas interpretaciones antes de que se conviertan en soluciones incorrectas.
• Anota tus capturas de pantalla — dibuja flechas o circulos en las areas problematicas antes de subir; esto enfoca la atencion del modelo en lo que importa.
• Combina mockup + codigo existente — proporciona tanto la imagen del diseno como tu codigo de componente actual para que el modelo genere el diff, no una reescritura completa.
• Usa capturas para depuracion de errores — capturas de errores de terminal, consola del navegador y logs de despliegue como imagenes pueden ser mas rapidos que copiar y pegar texto.