Prompts de UI para GPT Image 2.5: guía de handoff

Un mensaje útil en la interfaz de usuario se lee como una especificación de producto. Nombra el lienzo, la jerarquía, el contenido real, los componentes, los estados, las reglas de respuesta y las comprobaciones de aceptación. El estilo visual viene después de esas decisiones. Ese orden le da a GPT Image 2.5 la estructura suficiente para producir una maqueta que un diseñador puede revisar y un desarrollador puede interpretar.

Comience desde Imagen3 página de inicio, abra Imagen GPT 2.5 Espacio de trabajo Flare y mantenga el Página del modelo GPT Image 2.5 cerca mientras prueba las indicaciones siguientes. Flare es el primer paso práctico para una iteración rápida. Sunburst es una opción para un marco de revisión posterior de mayor fidelidad. Pruebe ambos con sus propias pantallas en lugar de tratar esa distinción como un punto de referencia universal.

La imagen y el breve vídeo de arriba son ilustraciones editoriales de este flujo de trabajo. No son resultados de referencia ni capturas de pantalla de un producto enviado.

Respuesta rápida: avise al sistema detrás de la pantalla

No empiece con "crear un panel financiero moderno". Esa petición deja al modelo inventar el producto, los datos, la navegación y la definición de lo moderno. Dale un contrato de pantalla en su lugar:

PRODUCTO: análisis de suscripciones para una pequeña empresa de software.
TRABAJO DE USUARIO: encuentre la causa de la caída de ingresos mensuales en menos de 30 segundos.
CANVAS: aplicación web de escritorio, 1440 x 1024, ancho de contenido 1200.
JERARQUÍA: título de la página, rango de fechas, cuatro métricas resumidas, gráfico de tendencias, tabla de cambios.
NAVEGACIÓN: carril izquierdo con Descripción general seleccionado; Facturación, Clientes y Configuración a continuación.
COPIA EXACTA: utilice únicamente las etiquetas y valores suministrados en el bloque DATOS.
COMPONENTES: tarjeta métrica, control de fecha segmentado, gráfico de líneas, tabla ordenable, chip de estado.
ESTADOS: incluye un patrón de carga visible y una variante de tabla vacía en una pequeña hoja de estado.
ESTILO: interfaz de usuario sobria del producto B2B, fondo neutro, acento azul, espaciado compacto.
EVITE: logotipos inventados, testimonios falsos, efectos decorativos de vidrio, textos diminutos e ilegibles.
SALIDA: una pantalla principal más una franja estrecha de estado de componentes.

Este mensaje hace que las decisiones importantes sean inspeccionables. Si el gráfico domina la página, puede cambiar la jerarquía. Si falta el estado vacío, puedes solicitarlo directamente. Un aviso solo de estado de ánimo le brinda menos posibilidades de reparación.

Por qué las maquetas de UI atractivas fallan en la transferencia

Una pantalla generada puede parecer terminada y dejar su comportamiento indefinido. La navegación puede contener cinco destinos en computadoras de escritorio y siete en dispositivos móviles. Una tarjeta puede mostrar un estado de éxito pero ningún caso de carga o error. Una tabla de datos puede utilizar números plausibles que nadie proporcionó. Estas brechas se convierten en decisiones de producto durante la implementación, cuando son más lentas y costosas de resolver.

La imagen también es un artefacto aplanado. No incluye nombres de componentes, tokens, puntos de interrupción, estructura semántica, orden del teclado ni contratos de datos. Trátelo como una propuesta visual. El paquete de transferencia debe indicar las reglas que son invisibles en los píxeles.

Utilice la maqueta para responder preguntas visuales: ¿Tiene sentido el orden de la información? ¿Es obvia la acción principal? ¿Puede respirar la región densa? Utilice requisitos escritos de comportamiento: ¿Qué sucede mientras se cargan los datos? ¿Qué columnas desaparecen por debajo de 768 píxeles? ¿Dónde aparece el texto de validación? ¿Qué permanece accesible sin color?

Los siete campos en un contrato de pantalla

Cada mensaje de interfaz de usuario orientado a producción debe cubrir siete campos. Pueden caber en una página de texto.

Escribe el contenido como un bloque separado. Si el modelo puede inventar relleno, diga dónde. Si cada etiqueta está controlada, cite cada etiqueta. Mantenga los gráficos cualitativos a menos que proporcione números verificados. Un gráfico que parece realista todavía presenta una afirmación objetiva.

POLÍTICA DE CONTENIDO
Utilice exactamente estas etiquetas de navegación: Inicio, Viajes, Guardados, Perfil.
Utilice exactamente el título de esta página: Planifique su próximo viaje.
Utilice estas tarjetas de muestra: Escape costero, Explorador de la ciudad, Senderos de montaña.
No agregue precios, calificaciones, recuentos de reseñas, insignias, destinos ni textos promocionales.
Si no se especifica una región de texto, déjela en blanco en lugar de inventar texto.

Elija Flare o Sunburst en la siguiente decisión

La elección del modelo debe seguir la decisión que usted debe tomar. Utilice Flare mientras el diseño aún está en movimiento: orden de pantalla, escala de componentes, densidad, navegación y estructura receptiva. Las iteraciones más rápidas son importantes porque la mayoría de los primeros borradores deben descartarse.

Pruebe Sunburst después de que se haya liquidado el contrato de la pantalla y un marco de revisión detallado sería útil. Eso podría incluir una imagen de presentación pulida, una dirección visual matizada o una edición difícil que necesita una inspección más cercana. Una mayor fidelidad visual no repara un requisito de producto incompleto. Un mensaje vago de Sunburst aún puede producir una pantalla vaga.

Generador de imágenes de IA ofrece un punto de entrada más amplio, mientras que Biblioteca de mensajes GPT Image 2 es útil cuando desea comparar estructuras de mensajes más allá del trabajo de la interfaz de usuario. Mantenga el modelo elegido y la configuración de calidad en sus notas de entrega para que otro compañero de equipo pueda reproducir el contexto de generación.

Mensaje de incorporación móvil

La incorporación necesita un trabajo finito. Este ejemplo ayuda a un nuevo usuario a conectar un calendario y elegir el momento de las notificaciones sin convertir la pantalla en un carrusel de marketing.

Cree un flujo de incorporación móvil de tres pantallas para un asistente de calendario.

LIENZO
- Tres mesas de trabajo tipo iPhone de 390 x 844, mostradas una al lado de la otra.
- Respetar las zonas seguras. Utilice un sistema de espaciado consistente de 8 puntos.

PANTALLA 1: CONECTAR
- Título: "Conecta tu calendario"
- Línea de soporte: "Ver horario de apertura sin cambiar eventos existentes".
- Botón principal: "Conectar calendario"
- Enlace de texto secundario: "Ahora no"

PANTALLA 2: ELEGIR
- Título: "¿Cuándo deberíamos recordártelo?"
- Tres opciones de radio: 10 minutos antes, 30 minutos antes, 1 hora antes.
- Seleccionar 30 minutos antes.

PANTALLA 3: LISTO
- Título: "Estás listo"
- Mostrar una agenda de muestra compacta con dos eventos.
- Botón principal: "Abrir mi día"

REGLAS DEL SISTEMA
- Mantenga la posición del botón estable en las tres pantallas.
- Utilice un estilo de ilustración y una familia de iconos.
- Mostrar progreso como 1 de 3, 2 de 3, 3 de 3.
- Sin testimonios, precios, degradados, logotipos ni pasos de configuración adicionales.

Revise el resultado como una secuencia. La navegación hacia atrás debería ser posible en las pantallas dos y tres. El valor de notificación elegido necesita un estado seleccionado visible. La pantalla final no debe presentar una nueva solicitud de permiso que el mensaje nunca definió.

Mensaje del panel de SaaS

Un mensaje en el panel necesita una pregunta, no solo una lista de widgets. El trabajo del usuario a continuación determina la jerarquía de páginas.

Diseñe un panel de escritorio SaaS para un líder de operaciones de soporte.
El usuario debe identificar qué categoría de ticket causó el retraso de hoy.

DISEÑO
- Lienzo de 1440 x 1024 con un carril de navegación izquierdo de 240 píxeles.
- Encabezado: "Resumen de soporte", fecha local, selector de equipo.
- Primera fila: Abierto, Esperando, Resuelto hoy, Primera respuesta mediana.
- Región principal: gráfico de pedidos pendientes por hora a la izquierda, tabla de categorías a la derecha.
- Región inferior: cinco tickets abiertos más antiguos con propietario y edad.

DATOS
Abierto 184; Esperando 36; Resuelto hoy 92; Mediana de primera respuesta 18 min.
Categorías: Facturación 71, Inicio de sesión 48, Generación 39, Exportación 26.
No agregue porcentajes ni afirmaciones de tendencias.

SEÑALES DE INTERACCIÓN
- Se selecciona la fila de facturación y filtra el gráfico horario.
- Aparece un control visible "Borrar filtro" encima del gráfico.
- El indicador de clasificación aparece solo en la columna Trabajo pendiente.

ESTILO
Interfaz de usuario de operaciones compacta, lienzo blanquecino, texto en tinta oscura, acento de selección azul.
Evite ilustraciones decorativas, tarjetas de gran tamaño, efectos de cristal y alertas falsas.

Verifique cada número con el bloque de datos. Luego pregunte si la fila de Facturación seleccionada y el gráfico filtrado se pueden entender sin depender únicamente del color. Agregue un ícono, etiqueta o tratamiento de borde si la relación es ambigua.

Mensaje de la página de precios

Las páginas de precios fallan cuando el énfasis visual cambia silenciosamente la oferta. Controle los nombres de los planes, precios, artículos incluidos, exclusiones y etiquetas de CTA.

Cree una página de precios responsiva para una aplicación para tomar notas en equipo.

PLANES
Gratis: $0, 3 proyectos, 1 GB de almacenamiento, soporte comunitario. CTA: "Empieza gratis".
Equipo: $12 por miembro mensual, proyectos ilimitados, 50 GB de almacenamiento, soporte por correo electrónico.
CTA: "Iniciar prueba del equipo". Marca este plan como "Más seleccionado".
Negocios: $28 por miembro mensual, SSO, registro de auditoría, soporte prioritario.
CTA: "Contactar con ventas".

ESCRITORIO
- Lienzo de 1440 píxeles, tres columnas iguales en planta, centrado en el equipo.
- Coloque la nota de facturación mensual al lado del precio, no en un pie de página distante.

MÓVIL
- Lienzo de 390 píxeles, planos apilados Gratis, Equipo, Negocios.
- Mantenga todos los precios y CTA visibles sin un carrusel horizontal.

REGLAS
- No inventar descuentos, precios anuales, garantías, cómputos de clientes o características.
- Utilice marcas de verificación solo para los elementos incluidos. Escriba las exclusiones como texto sin formato.
- Darle a Team un contraste de borde más fuerte sin aumentar su precio.

Después de la generación, compare los planos línea por línea. Una exclusión faltante o un descuento inventado es un error del producto, incluso si la página parece creíble. Reconstruya el texto exacto de precios en código en lugar de tratar la tipografía generada como una obra de arte de producción.

Aviso de estado vacío, cargando y error

Generar estados después de que la pantalla de referencia tenga un sistema de componentes estable. Reutilice las mismas dimensiones del contenedor para que el diseño no salte entre estados.

Usando la pantalla de lista de proyectos aprobados como referencia visual, cree una hoja de estado.

Muestra cuatro versiones del mismo panel de contenido de 720 x 420:
1. PREDETERMINADO: tres filas del proyecto con nombre, propietario, estado y fecha de actualización.
2. CARGANDO: tres filas esqueléticas neutrales sin palabras ni números falsos.
3. VACÍO: título "Aún no hay proyectos", una frase, botón "Crear proyecto".
4. ERROR: encabezado "No se pudieron cargar los proyectos", mensaje "Verifique su conexión y vuelva a intentarlo".
   botón principal "Reintentar", enlace de texto secundario "Ver estado".

PRESERVAR
Tamaño del panel, posición del título, alineación de columnas, fondo, borde, radio,
escala de tipos, espaciado y colocación de acciones.

SEÑALES DE ACCESIBILIDAD
No comunique el error o el estado de carga únicamente mediante el color.
Mantenga los contornos de enfoque visibles en Reintentar y crear proyecto.
No pongas la única explicación dentro de un icono.

La ilustración anterior es una referencia de control de calidad realizada para esta guía. Muestra las categorías a inspeccionar, no una biblioteca de componentes de producción.

Aviso responsivo para dispositivos móviles y de escritorio

Dos mesas de trabajo no relacionadas no definen el comportamiento de respuesta. Indique primero las invariantes y luego enumere las transformaciones permitidas.

Cree pantallas móviles y de escritorio emparejadas para el mismo producto de planificación de viajes.

INVARIANTES
- Mismo orden de contenido: búsqueda, filtro de categorías, viaje destacado, viajes restantes.
- Mismos títulos de cartas y destinos en ambos lienzos.
- Mismo acento azul, tratamiento de imagen, familia tipográfica y radio de tarjeta.
- La búsqueda es la acción principal en ambos anchos.

MÓVIL A 390 PÍXELES
- Navegación inferior con Inicio, Búsqueda, Guardado, Perfil.
- Tarjetas de viaje de una columna con relleno de página de 16 píxeles.
- Los chips de categoría se desplazan horizontalmente en una línea.

ESCRITORIO A 1440 PÍXELES
- Navegación superior con Viajes, Explorar, Guardados, Perfil.
- Cuadrícula de viaje de tres columnas dentro de un área de contenido de 1200 píxeles.
- El campo de búsqueda se encuentra en el encabezado; Las fichas de categoría se encuentran encima de la parrilla.

NO
Cambie la copia de la tarjeta, agregue destinos, oculte la acción de búsqueda o cree un tema visual separado.

Este mensaje emparejado hace que las diferencias sean intencionales. Durante la transferencia, convierta cada transformación en una regla: la navegación inferior se convierte en navegación superior en el punto de interrupción del escritorio; la lista de tarjetas cambia de una a tres columnas; el control de búsqueda se mueve pero mantiene el mismo trabajo y etiqueta.

Aviso de configuración y permisos

Las páginas de configuración exponen si la maqueta comprende el comportamiento del sistema. Agrupa los controles por consecuencia y hace que las acciones destructivas sean difíciles de desencadenar accidentalmente.

Diseñe una página de configuración de escritorio para un espacio de trabajo compartido.

SECCIONES
Perfil: nombre, rol, acción de imagen de perfil.
Notificaciones: selección de resumen de correo electrónico, cambio de actualizaciones de productos, cambio de alertas de mención.
Seguridad: enlace de sesiones activas, botón de cambio de contraseña, estado de dos factores.
Zona de peligro del espacio de trabajo: botón abandonar el espacio de trabajo.

SEÑALES DE COMPORTAMIENTO
- Mostrar el estado guardado junto al Perfil después de una edición.
- Mostrar un botón Guardar deshabilitado cuando no se cambiaron campos.
- Proporciona a los interruptores distintos estados de encendido y apagado con etiquetas de texto.
- Poner "Salir del espacio de trabajo" en una zona de peligro separada con copia explicativa.
- No mostrar un modal de confirmación destructivo en la misma pantalla principal.

DISEÑO
1440 x 1024, carril izquierdo de 240 píxeles, columna de configuración de 720 píxeles, espacios de sección generosos.
Utilice la interfaz de usuario del producto normal, no una página de inicio de marketing.

Pida a los revisores que describan qué hace cada control sin adivinar. Si un interruptor no tiene etiqueta, un estado guardado no tiene duración o la acción de peligro parece un enlace de navegación normal, la imagen necesita una reparación y los requisitos necesitan más detalles.

Reparar una región sin perder la pantalla

Un útil mensaje de edición nombra un defecto, una región, el reemplazo y las invariantes. No mezcle una reparación de tipografía con un rediseño de color y un cambio de diseño.

EDITE SÓLO EL ENCABEZADO DEL TABLERO DE ESCRITORIO.
Reemplace el título de la página "Descripción general de soporte" exactamente por "Descripción general de soporte".
Mantenga el título en una línea y conserve su posición, tamaño de letra, grosor y color actuales.
Preservar la fecha, selector de equipo, carril de navegación, métricas, gráfico, tabla, espaciado,
fondo, bordes y cualquier otra palabra visible.
No agregue ninguna etiqueta o ícono nuevo.

Inspeccione el resultado completo después de cada edición. Un título corregido no ayuda si el modelo también cambió dos métricas. Si aparecen cambios colaterales, regrese a la versión anterior más limpia y limite aún más la solicitud de edición. Para lograr coherencia visual en pantallas posteriores, flujo de trabajo de referencia de estilo de marca explica cómo mantener fijas las reglas de identidad, paleta, iluminación y composición. Para una jerarquía visual densa, utilice flujo de trabajo de solicitud de infografía.

Construya el paquete de transferencia del desarrollador

La maqueta final es un elemento del paquete de transferencia, no el paquete completo. Adjunte la pantalla aceptada y registre las decisiones que los píxeles no pueden transportar.

1. Asigne un nombre a cada pantalla y su trabajo de usuario.
2. Enumere la copia exacta aprobada y los datos de muestra. Marque cada marcador de posición.
3. Asigne partes visuales repetidas a los componentes propuestos.
4. Registre los tokens de espaciado, tipo, color, radio y elevación como valores de implementación.
5. Defina los estados de carga, vacío, error, deshabilitado, exitoso y de permiso.
6. Reglas de puntos de ruptura estatales como invariantes y transformaciones.
7. Agregue comprobaciones de teclado, enfoque, etiqueta, contraste, tamaño del objetivo, movimiento reducido y recuperación de errores.
8. Enumere las preguntas sobre productos no resueltas con un propietario en lugar de dejar que el código las responda en silencio.

Los desarrolladores deberían tener libertad para corregir geometrías imposibles, interacciones inaccesibles y convenciones de plataforma. La maqueta establece la intención. No anula el software en funcionamiento.

Auditar la pantalla antes de la implementación

Utilice cuatro pases de revisión. Primero, compare cada palabra y número visible con el bloque de contenido aprobado. En segundo lugar, rastree el trabajo del usuario principal y confirme que la jerarquía y las acciones lo admitan. En tercer lugar, inspeccionar los estados y el comportamiento receptivo. Cuarto, consulte el paquete de entrega para ver detalles que la imagen no puede expresar.

En resolución completa, busque ortografía, espaciado inconsistente, íconos distorsionados, superposiciones accidentales y datos inventados. A 390 píxeles, confirme que el título, la acción principal y el mensaje de estado sigan siendo legibles. Un diseño que funciona sólo en el tamaño de una presentación no está listo para su implementación.

No utilice la maqueta como evidencia de que la interfaz es accesible, utilizable o técnicamente factible. Esas afirmaciones requieren prototipos, código y pruebas automatizadas o de usuario. La interfaz de usuario generada es más potente como propuesta rápida que hace que las decisiones sobre productos sean lo suficientemente visibles como para debatirlas.

Un mensaje final reutilizable

La siguiente plantilla mantiene los requisitos del producto por delante de la decoración visual. Elimine los campos que no correspondan, pero no los reemplace con adjetivos.

Cree una interfaz de usuario de [par móvil/escritorio/responsivo] para [producto].

TRABAJO DE USUARIO
[Una tarea que el usuario debe completar.]

LIENZO
[Dimensiones exactas, ancho del contenido, áreas seguras, cuadrícula y relleno exterior.]

ORDEN DE INFORMACIÓN
1. [Primera región y su finalidad]
2. [Segunda región y su finalidad]
3. [Tercera región y su finalidad]

CONTENIDO EXACTO
[Navegación, encabezados, etiquetas, valores, mensajes y copia de CTA aprobados.]
No inventes texto o datos fuera de este bloque.

COMPONENTES
[Controles con nombre, tarjetas, tablas, navegación, gráficos, formularios y patrones repetidos.]

ESTADOS
[Predeterminado, desplazamiento, foco, cargando, vacío, error, deshabilitado, éxito, permiso.]

REGLAS RESPONSIVAS
Preservar: [invariantes de contenido, orden, acción y sistema visual].
Transformar: [navegación, columnas, ajuste, ocultación o reordenación permitidos en cada ancho].

DIRECCIÓN VISUAL
[Estilo de producto específico, funciones de tipos, funciones de paleta, densidad, bordes e imágenes].

CONTROL DE CALIDAD
Sin logotipos, datos, características, testimonios, insignias, marcas de agua, microcopias ilegibles inventadas.
estilos de componentes inconsistentes o señales de estado de solo color.

Ejecute la plantilla en Imagen GPT 2.5 Espacio de trabajo Flare. Vuelva a Imagen3 página de inicio cuando desee comparar otros flujos de trabajo de imágenes y utilice Página del modelo GPT Image 2.5 para elegir la ruta de próxima generación. Mantenga juntos el aviso ganador, la imagen aceptada, el historial de reparaciones y las reglas de transferencia escritas. Ese paquete es lo que convierte una pantalla generada en una decisión de producto revisable.

Preguntas frecuentes

¿Qué modelo GPT Image 2.5 debo usar para las maquetas de UI?

Comience con Flare cuando el diseño y el contenido aún estén cambiando. Pruebe Sunburst cuando un marco de revisión de mayor fidelidad pueda cambiar una decisión. Registre el modelo y la configuración porque los resultados dependen de la carga de trabajo real.

¿Puede GPT Image 2.5 generar código de interfaz de usuario listo para producción?

No. El resultado es una referencia visual, no un árbol de componentes ni una especificación de comportamiento. Cree la interfaz en código y pruébela según los criterios de aceptación escritos.

¿Cómo mantengo el texto preciso en una maqueta de interfaz de usuario?

Proporcione una copia exacta, reduzca la cantidad de texto por pantalla e inspeccione cada etiqueta y número. Repare una región de texto a la vez conservando el resto de la imagen.

¿Cómo debo solicitar las versiones móvil y de escritorio?

Dale ambos anchos de lienzo. Separe el contenido y las acciones invariantes de las reglas de navegación, cuadrícula y ajuste que pueden cambiar entre puntos de interrupción.

¿Debería generar cada estado de la aplicación en una imagen?

Estabilice primero una pantalla de referencia. Luego solicite una hoja de estado compacta que reutilice sus dimensiones, tipo, espaciado, colores y controles.

¿Una maqueta pulida demuestra accesibilidad?

No. Verifique la semántica, el orden del teclado, el enfoque, las etiquetas, el contraste, el tamaño del objetivo, las preferencias de movimiento y la recuperación de errores en la interfaz implementada.