Una demostración puede afirmar que GPT Image 2 convierte una imagen en PSD con capas o en HTML. Para saber si el resultado sirve en un proyecto real hay que formular una pregunta más concreta: ¿qué podrá cambiar la siguiente persona sin rehacer todo?
El modelo de imagen, Photoshop y un agente de programación pueden participar en la misma tarea, pero no producen lo mismo. GPT Image 2 crea o modifica píxeles. Photoshop guarda capas, máscaras, texto y ajustes. Codex puede observar un mockup y escribir el frontend dentro de un repositorio. Confundir esas responsabilidades produce archivos que se abren, pero no se pueden mantener.
Tres entregas que exigen pruebas distintas
| Entrega | Aportación directa de GPT Image 2 | Paso adicional | Prueba decisiva |
|---|---|---|---|
| Imagen final | PNG, JPEG o WebP | Compresión o retoque opcional | Contenido, tamaño, transparencia y texto correctos |
| PSD con capas | Imagen base y posibles recursos separados | Organizar y guardar el documento en Photoshop | Texto modificable, grupos comprensibles, máscaras útiles y reapertura limpia |
| Página web | Mockup y recursos visuales | Implementar HTML/CSS/componentes | Reflujo responsive, controles reales, semántica, accesibilidad y estados |
Una imagen plana guardada como .psd no recupera la intención del diseño. Una captura colocada dentro de <img> tampoco recupera una interfaz. El nombre del archivo no sustituye la prueba de uso.
El límite real de Image API
OpenAI define gpt-image-2 como un modelo de generación y edición de imágenes. En la documentación actual de formatos de salida, Image API devuelve datos de imagen codificados en base64: PNG por defecto, o JPEG y WebP si se solicitan.
PSD y HTML no aparecen como formatos de salida. Tampoco se devuelve un árbol de capas de Photoshop, una jerarquía DOM, reglas CSS, puntos de ruptura ni estados de componentes. Cuando una experiencia termina creando estos archivos, una aplicación, un agente o un script los ha construido alrededor del modelo.
El modelo sí puede preparar buenos materiales para ambos caminos. El fondo transparente, actualmente en preview para gpt-image-2, permite crear recursos aislados en PNG o WebP. JPEG no admite esa transparencia. Sin embargo, aislar el fondo no separa automáticamente producto, sombra, rótulo y decoración en capas independientes.
También conviene limitar las expectativas sobre las máscaras. OpenAI explica que la máscara orienta la zona de edición, pero su forma no siempre se respeta con total precisión. Contornos, tipografía pequeña, logotipos y elementos de marca deben revisarse después de editar.
Qué convierte un PSD en una entrega útil
Adobe describe PSD como su formato nativo para conservar capas, efectos y posibilidades de edición. Por eso la cantidad de capas no es la métrica adecuada. Importa que respondan a cambios previsibles.
En una creatividad publicitaria, por ejemplo, suele tener sentido separar fondo, persona, producto, textos, adornos y ajustes de color. Los textos que cambiarán deben seguir siendo texto; los retoques locales deberían usar máscaras o capas de ajuste. Cuarenta fragmentos rasterizados con nombres automáticos pueden ser menos editables que cinco grupos bien organizados.
Adobe documenta una ruta mediante Photoshop for ChatGPT. El trabajo iniciado en el chat puede abrirse en Photoshop web para continuar con capas y máscaras. En el ejemplo de Adobe, un cambio de color queda en una capa de ajuste independiente. La conclusión correcta es que Photoshop añade estructura editable a un trabajo iniciado en el chat, no que Image API entregue PSD de forma nativa.
Las funciones del conector, el acceso por plan y la disponibilidad regional pueden cambiar. Tras conectar Photoshop, conviene preguntar qué operaciones están disponibles en ese momento y describir la edición futura:
textPrepara esta creatividad como documento de Photoshop que otro diseñador pueda editar. Organiza fondo, persona, producto, copy, decoración y ajustes en grupos con nombres claros. Mantén como texto las frases que puedan cambiar y usa máscaras para los retoques locales. Después de guardar, vuelve a abrir el archivo y comprueba que se puede sustituir el producto, editar el titular y ocultar cada grupo principal sin romper la composición.
Para aceptar el archivo, trabaje sobre una copia. Oculte los grupos principales, cambie un titular, sustituya una imagen, mueva el borde de una máscara y vuelva a abrir el PSD. Si al ocultar el sujeto aparece un hueco, todo el texto está rasterizado o cada cambio exige regenerar la composición completa, las capas aportan poco valor.
Cuando el destinatario es un equipo web, quizá no necesite el PSD completo. Photoshop permite usar File > Export > Layers to Files para guardar una imagen por capa. Un paquete pequeño con recursos bien nombrados, fuentes, colores y notas de comportamiento suele reducir más dudas que un documento enorme.
Pasar una imagen a HTML es una implementación nueva
Un mockup solo muestra un estado a una anchura concreta. No contiene las reglas para ordenar las tarjetas en móvil, el origen de los datos, el comportamiento de un botón, el foco del teclado ni el mensaje que debe anunciar un lector de pantalla.
Codex admite capturas y referencias visuales. La guía oficial de entradas de imagen recomienda explicar qué muestra la imagen, qué zona importa, qué resultado se desea y qué restricciones debe respetar. La imagen es contexto para escribir código; no es un archivo HTML comprimido dentro de píxeles.
Este ejemplo abre en el navegador, pero no implementa la página:
html<main> <img src="pagina.webp" alt="Captura completa del diseño" /> </main>
No hay un título seleccionable, botones funcionales, datos reales ni adaptación del contenido. Una implementación correcta reconstruye títulos, enlaces, botones, formularios y listas con elementos apropiados. Solo las fotografías, ilustraciones o texturas permanecen como imágenes.
Una petición útil a Codex combina la referencia con el proyecto:
textImplementa el mockup adjunto en este repositorio; no insertes la captura como página. Reutiliza los componentes y variables de diseño existentes y conserva el comportamiento actual. Usa HTML semántico para contenido y controles, con texto y datos reales. Incluye los estados hover, focus, loading, empty, error y disabled que necesite el producto. Ejecuta la aplicación local y revisa 1440, 768 y 390 px. Comprueba teclado, desbordamientos, saltos de texto, recursos que fallen y errores de consola.
El framework debe venir del proyecto, no de la captura. La entrega puede ser HTML/CSS sencillo para un prototipo o componentes del stack existente para un producto. Además, las imágenes deben responder al dispositivo: MDN explica el uso de srcset, sizes y <picture> para que el navegador elija recursos adecuados. Reducir una imagen grande con CSS no resuelve por sí solo el rendimiento ni el recorte.
Cómo decidir sin añadir trabajo innecesario
Para un cartel, una ficha de producto o una pieza social, empiece por la imagen. Pase a Photoshop si habrá cambios frecuentes de arte, copy o producto. Exporte después los recursos aprobados.
Para una landing, un panel o un flujo de aplicación, entre antes en el repositorio. Use el mockup como dirección visual, conserve como imágenes solo los elementos que deben seguir siendo píxeles y deje que el código defina contenido, comportamiento y adaptación. Si la necesidad es una edición localizada mediante API, nuestra guía de máscaras de OpenAI amplía los detalles técnicos.
En una entrega mixta puede bastar un PSD razonable, una carpeta de recursos y un prototipo navegable. No es necesario duplicar cada elemento en los tres formatos.
La regla final es verificable: GPT Image 2 aporta el material visual; Photoshop crea la estructura editable; Codex u otro agente escribe el frontend y lo comprueba en un navegador. Cuando cada resultado incluye su propia prueba, “PSD con capas” e “imagen a HTML” dejan de ser promesas ambiguas y se convierten en entregas que otro profesional puede continuar.
