GPT-6 Astra · Diseño web
Diseño web con GPT-6 Astra: planifica las imágenes que necesita una landing page
Las landing pages suelen atascarse en las imágenes. La maquetación está lista, pero la imagen principal tiene la forma equivocada, las filas de características repiten la misma foto tres veces y la tarjeta para redes sociales corta el producto por la mitad. Cada imagen se hizo antes de que nadie decidiera qué necesitaba su sección.
Este tutorial pide a GPT-6 Astra un plan de imágenes antes de generar ninguna. El ejemplo es una página única de lanzamiento de un cuaderno ficticio color marfil de Fold, planificada en Ciyo el 18 de septiembre de 2026. Astra podía ver dos imágenes de concepto que ya estaban en el lienzo e indicó cuáles podían reutilizarse. No construimos la página ni generamos imágenes nuevas para ella.
Enumera las secciones antes que las imágenes
Escribe primero el esquema de la página: una sección principal, tres filas de características y una tarjeta para compartir en redes sociales. Asigna un tema a cada fila de características. Para Fold elegimos el tacto del papel, el material de la tapa y el tamaño dentro de un bolso, porque son las preguntas que se hace un comprador antes de pedir un cuaderno por internet.
Enumera también los datos que no tienes. Mantuvimos como desconocidos el precio, el número de páginas y la encuadernación, para que ninguna imagen ni ningún pie de foto pudiera prometerlos sin que nadie se diera cuenta.
El material de referencia importa. El 16 de septiembre de 2026, Prajwal Tomar (@PrajwalTomar_) describió la primera landing page de Astra como “la típica bazofia de IA” (“typical AI slop”) y después le pidió que estudiara un gran conjunto de sitios web reales y criticara su propia página. Astra propuso 28 cambios antes de reconstruirla. Un plan de imágenes aplica la misma idea antes: decide qué debe conseguir cada imagen antes de generar nada.
Relato de un creador sobre cómo Astra criticó y reconstruyó una landing page; el juicio sobre la calidad es del autor de la publicación. Nuestro paso de plan de imágenes es una adaptación original.
Pide una línea de decisiones por imagen
Para cada sección, pide la finalidad de la imagen, la relación de aspecto, lo que debe verse, dónde irá el texto de la página y si se puede reutilizar una imagen existente. Pide a Astra que no genere nada. El plan es un documento de decisiones, así que debe ser lo bastante breve para revisarlo de una sola pasada.
Planifica las imágenes de una landing page de una sola página para el lanzamiento del cuaderno color marfil de la papelería ficticia Fold. Secciones: sección principal, tres filas de características (tacto del papel, material de la tapa, tamaño dentro de un bolso) y una tarjeta para compartir en redes sociales. Para cada imagen indica: finalidad, relación de aspecto, lo que debe verse, dónde irá el texto de la página y si se puede reutilizar una imagen que ya esté en este lienzo. Mantén como desconocidos el precio, el número de páginas y la encuadernación. Menos de 190 palabras. No generes imágenes.Revisa el plan que devolvió Astra
Astra planificó una imagen principal en 1:1 con el texto en una columna aparte, tres imágenes de características en 4:3 con el texto al lado y una tarjeta para redes sociales en 1.91:1 con el cuaderno a la derecha y el titular a la izquierda. Para todo el conjunto sugirió luz natural suave, tonos marfil y grises y accesorios sin marca.
Contrasta las relaciones de aspecto con la plantilla de tu página antes de aceptarlas. Una imagen principal en 1:1 encaja en una maquetación a dos columnas; una imagen principal a todo el ancho necesita, en cambio, una imagen panorámica. Cambia el plan ahora, cuando cambiarlo cuesta una frase.
| Sección | Relación | Debe mostrar | Decisión de reutilización |
|---|---|---|---|
| Sección principal | 1:1 | El cuaderno marfil sobre una superficie despejada | El concepto B de forma provisional; resta protagonismo a la tapa |
| Tacto del papel | 4:3 | Primer plano de una página con las yemas de los dedos | Hace falta un primer plano nuevo |
| Material de la tapa | 4:3 | Superficie y esquina de la tapa con luz rasante | El concepto A solo como referencia; verificar el material |
| Tamaño dentro de un bolso | 4:3 | El cuaderno entrando en un bolso sin marca | Imagen nueva cuando se confirmen las dimensiones |
| Tarjeta para redes sociales | 1.91:1 | Cuaderno a la derecha, titular a la izquierda | Adaptar el concepto B a una composición más ancha |
Tómate en serio las decisiones de reutilización
Reutilizar una imagen ahorra tiempo solo cuando encaja con la función de la sección. Astra aceptó el concepto de composición cenital para la imagen principal solo de forma provisional, y se negó a reutilizar cualquiera de los dos conceptos para el primer plano del papel porque ninguno muestra suficiente detalle. Ampliar una zona pequeña de una imagen panorámica suele dar como resultado una toma de textura blanda y poco convincente.
Dos secciones dependen de datos: el material de la tapa necesita verificación y la imagen del bolso necesita dimensiones reales. Marca esas imágenes como bloqueadas hasta que responda el responsable. Un marcador de posición es mejor que una imagen que muestre un tamaño equivocado.
Genera las imágenes que faltan en el orden del plan
Usa la relación de aspecto y el contenido obligatorio del plan como la parte fija de cada prompt de imagen. Genera primero la imagen principal, porque su luz y sus accesorios marcan el estilo del resto de la página; después, las imágenes de características, y por último, la tarjeta panorámica para redes sociales.
Deja vacías las zonas de texto en todas las imágenes. Añade los titulares y los pies de foto en la página o como texto editable, para que un cambio de texto nunca obligue a crear una imagen nueva.
Revisa el conjunto en un mismo tablero
Coloca las imágenes terminadas en el lienzo de Ciyo en el orden de la página. Busca un conjunto que parezca de una misma sesión de fotos: una dirección de la luz coherente, el mismo color del cuaderno y ningún accesorio que aparezca en una imagen y desaparezca en la siguiente.
Después revisa cada imagen a su tamaño real en la página. Una imagen de características en 4:3 suele mostrarse a aproximadamente la mitad del ancho de la pantalla en un portátil y a todo el ancho en un móvil, así que revisa ambos casos antes de publicar.
Preguntas sobre las imágenes de la landing page
¿Diseñó Astra toda la landing page?
No. En este ejemplo solo produjo un plan de imágenes. No se crearon ni la maquetación de la página ni las imágenes nuevas.
¿Cómo sabía Astra lo que había en el lienzo?
Las dos imágenes de concepto ya estaban en el lienzo del proyecto, y su respuesta se refería a ellas por su nombre. Contrasta tú mismo con la imagen cualquier sugerencia de reutilización.
¿Por qué la tarjeta para redes sociales es 1.91:1?
Es la relación de aspecto que propuso Astra para una imagen de enlace compartido. Confirma el tamaño que pide actualmente cada plataforma antes de exportar.
Planifica primero las imágenes de la página
Pide a GPT-6 Astra en Ciyo un plan de imágenes y genera solo las imágenes que la página todavía necesita.