De screenshot a código: qué entiende la IA de una imagen

¿Qué ve realmente un modelo de visión?

Un modelo de visión procesa la imagen en bloques, no como un archivo de diseño. Según la documentación de Anthropic, Claude procesa las imágenes en parches de 28×28 píxeles, y cada parche cuenta como un token visual. Cada modelo tiene una resolución nativa máxima: lo que la supera se reduce antes de procesarse. En la misma documentación, una captura de 1920×1080 píxeles se reduce a 1456×819 en el nivel estándar y no se reduce en el nivel de alta resolución, que aplica a Claude 4.7 y modelos posteriores (hasta 2.576 píxeles en el lado largo, frente a 1.568 del nivel estándar). Por eso depende del modelo si el texto pequeño sobrevive o no.

En la práctica, el modelo reconoce bien la jerarquía general: un encabezado arriba, una lista debajo, un botón de color fuerte a la derecha. Tiene más dificultad con los detalles finos: espaciados exactos, sombras sutiles, alineaciones de un píxel y textos muy pequeños. Esta distinción es clave para un diseñador, porque los detalles que más te importan suelen ser los que la imagen no transmite con claridad.

¿Qué herramientas lo hacen hoy?

Varias herramientas aceptan una imagen como punto de partida. Esto es lo que dice su documentación oficial, revisada en noviembre de 2026:

Las funciones y los planes cambian con frecuencia. Antes de depender de una herramienta, comprueba en su documentación qué acepta hoy. Para ver cuándo conviene cada una al prototipar, lee prototipar con IA.

¿Por qué le importa a un diseñador?

Porque una captura es una forma de comunicar tu diseño que no depende de la herramienta. Te sirve para prototipar sin Figma, para mostrar una referencia de otra app o para comparar lo que construyó la IA contra lo que querías. Pero una captura no tiene estructura: no sabe qué capa es un botón ni qué color es una variable.

Por eso el archivo de Figma, cuando lo tienes, da más información. El servidor MCP de Figma puede devolver una captura con get_screenshot, pero también un esquema de capas con get_metadata, el contexto de diseño y el código con get_design_context, y los tokens con get_variable_defs. Lo explicamos en De Figma a código con MCP. La captura queda como segunda referencia.

¿Cómo pedirlo para obtener un mejor resultado?

Algunas prácticas que siguen las guías de visión de Anthropic y las de las herramientas:

• Manda la imagen antes del texto. La documentación de Anthropic indica que Claude funciona mejor con las imágenes antes del texto.
• Usa imágenes nítidas. La documentación advierte que Claude puede equivocarse con imágenes de baja calidad, rotadas o de menos de 200 píxeles.
• Recorta a lo importante. La documentación recomienda considerar recortar o redimensionar antes de enviar. Un formulario recortado conserva más detalle por elemento que la pantalla completa.
• Evita comprimir varias veces. Anthropic advierte que la compresión con pérdida puede introducir artefactos que perjudican el resultado, sobre todo si se aplica más de una vez.
• Indica el framework y las reglas. Pide el framework y reutilizar componentes existentes. Una captura sola no dice nada de tu sistema.
• Pide una lista de supuestos. Di: “Antes de escribir código, lista lo que asumes sobre espaciados, colores y textos.” Así revisas lo que el modelo no pudo ver.
• Si usas Figma Make, adjunta pantalla por pantalla. Figma recomienda adjuntar los diseños complejos frame por frame, no todos a la vez.

¿Cuándo NO conviene usar screenshot a código?

• Cuando necesitas medidas exactas para un handoff de producción. La IA estima; tu especificación debe venir de tus tokens o del archivo.
• Cuando la captura es de una interfaz con datos sensibles. Antes de subirla, revisa qué información aparece.
• Cuando la pantalla tiene muchos elementos iguales, como una tabla de cien filas. El conteo puede fallar, y el modelo puede inventar filas que no existen.
• Cuando el diseño ya existe como componentes en tu sistema. Es más sano reutilizar el componente que reconstruirlo desde una imagen.

Ejemplo

Ejemplo ilustrativo: un diseñador tiene una captura de 1920 píxeles de una pantalla de checkout de un competidor, con un resumen de compra a la derecha. Le pide a un agente que genere una primera versión con la estructura. El agente produce un layout de dos columnas con los títulos correctos, pero los precios salen con un tamaño de fuente mayor que el original y el espaciado es mayor. El diseñador anota esas diferencias, las corrige con los tokens del proyecto y pide otra versión con el tamaño de fuente tomado de la capa tipográfica. El segundo intento se acerca más, aunque el icono de tarjeta sigue siendo un placeholder.

La lección: la captura acelera el primer borrador, pero la fidelidad la decides tú al comparar.

Errores comunes

• Dar por buena la primera versión porque “se parece”. La fidelidad visual se revisa punto por punto.
• Enviar una captura reducida donde el texto ya no se lee y culpar luego al modelo.
• Pedir “exactamente igual” sin recordar que el modelo estima medidas.
• No separar la captura de la fuente de verdad. Si el diseño tiene tokens, el código debe usarlos, no los valores que el modelo leyó.
• Subir una captura cuando tienes el archivo de Figma y podrías adjuntar los frames.
• Olvidar que la captura puede contener datos personales o de clientes.

Fuentes

• Anthropic: documentación de visión de Claude: formatos, parches de 28×28, reducción de imágenes, imagen antes del texto, compresión y limitaciones de localización y conteo.
• Claude Code: flujos de trabajo comunes, sección de imágenes: arrastrar, pegar o dar la ruta de una imagen y pedir CSS desde una maqueta.
• Figma Help: Create and edit a Figma Make file: frames frente a imágenes y límites de las imágenes.
• Lovable: trabajar con imágenes en el chat: capturas, imágenes adjuntas y dibujo sobre ellas.
• Lovable: inicio rápido: imágenes en el primer prompt.
• v0: documentación: clonar páginas con capturas o archivos de Figma.
• Figma Developers: tools and prompts: get_screenshot, get_metadata, get_design_context y get_variable_defs.