Cómo escribir prompts de GPT Image para mockups de UI
Cómo pedirle a GPT Image 2 dashboards, pantallas de apps y mockups de dispositivos con composiciones predecibles y etiquetas legibles.
Los buenos prompts de GPT Image para mockups de UI nombran el producto, la pantalla y sus componentes principales, el dispositivo o marco en el que aparece, el estilo visual y el texto exacto que debe poder leerse. Enumera los componentes en orden de lectura y mantén breve el texto en pantalla, porque el modelo reproduce unas pocas etiquetas grandes de forma mucho más confiable que párrafos de texto de interfaz.
Describe la pantalla como un wireframe
Empieza por para qué sirve la pantalla y qué contiene, en el orden en que la leería un usuario: navegación, encabezado, contenido principal, paneles secundarios y acciones. El modelo distribuye los componentes de forma más predecible cuando se enumeran que cuando quedan implícitos en una palabra de estilo como dashboard moderno.
- Nombra el producto y la pantalla: “dashboard de analítica para una herramienta SaaS de facturación” o “pantalla de onboarding para una app de meditación”.
- Enumera las zonas en orden: navegación lateral, barra superior con búsqueda, tres tarjetas de KPI, un gráfico de líneas y una tabla de transacciones recientes.
- Indica la densidad: espaciado generoso, tarjetas de tamaño uniforme, alineación clara.
Elige el marco: pantalla plana, dispositivo o escena
Decide si necesitas una captura plana de la interfaz para un caso de estudio, un mockup de dispositivo para una landing page o una escena fotografiada para marketing. Cada opción requiere una redacción distinta.
- Plana: “captura de pantalla de UI plana, sin marco de dispositivo, 16:9”.
- Dispositivo: “en una laptop delgada ligeramente inclinada, con la pantalla hacia la cámara y reflejos suaves”.
- Escena: “laptop sobre un escritorio de madera con luz natural de día, poca profundidad de campo”; la interfaz se verá más pequeña y menos legible.
Mantén el texto de la interfaz breve y exacto
El texto legible es el fallo más común en las interfaces generadas. Pon entre comillas las pocas etiquetas que importan y deja que el resto se represente como líneas de texto de relleno.
- Cita los títulos y botones exactamente: “Ingresos”, “Mejorar plan”.
- Pide líneas de texto de relleno para el cuerpo del contenido.
- Evita tablas largas con datos reales; pide en su lugar cinco filas de transacciones de ejemplo.
Define el sistema visual
Las palabras de estilo como glassmorphism ayudan, pero un sistema visual breve da resultados más coherentes en varias pantallas.
- Color: fondo, superficie, acento principal y colores de estado.
- Tipografía: una familia sans serif, una jerarquía de pesos clara y contraste de tamaño entre títulos y etiquetas.
- Componentes: radio de las esquinas, sombras, bordes y estilo de los íconos.
Lista de verificación del prompt
- Se indican el producto, el propósito de la pantalla y el público.
- Los componentes se enumeran en orden de lectura.
- Se elige el marco: captura plana, dispositivo o escena.
- Solo debe ser legible un texto breve y entre comillas.
- Se definen el color, la tipografía y el estilo de los componentes.
- La relación de aspecto coincide con el destino: 16:9 para escritorio, 9:16 para teléfono.
Preguntas frecuentes
¿Puede GPT Image 2 crear un diseño de UI utilizable?
Genera conceptos visuales y mockups convincentes para presentaciones, landing pages y moodboards. Trata el resultado como una referencia visual y no como un diseño de producción, porque el espaciado, los íconos y el texto pequeño no son lo bastante precisos para entregarlos como especificaciones.
¿Cómo consigo texto legible en un mockup de UI?
Limita el texto legible a unas pocas etiquetas entre comillas, hazlas grandes y describe todo lo demás como líneas de relleno. Las palabras cortas en una sans serif limpia son las que se reproducen con más confiabilidad.
¿Cómo mantengo la coherencia entre varias pantallas?
Reutiliza el mismo párrafo de sistema visual en cada prompt y cambia solo la descripción de la pantalla. Las pantallas generadas a partir de una misma plantilla se parecen más entre sí que las descritas desde cero.
Plantillas de prompts relacionadas
Usa esta guía con prompts reales
Explora plantillas de prompts de la categoría correspondiente de la biblioteca y adapta la estructura a tu propio flujo de trabajo de imágenes.