Prompt de diseño de hero con tres direcciones para Codex

Pide a Codex tres heros a 1440×900, editorial, oscuro y suave, con el mismo texto, para comparar el estilo visual y nada más.

Diseña la sección hero en tres direcciones, cada una como un archivo HTML autocontenido a 1440×900 con CSS en línea y fuentes del sistema:
A — cálida y editorial, con un titular serif
B — oscura y contundente, con un solo color de acento brillante y números grandes
C — suave y cercana, con tarjetas redondeadas y un degradado claro
Usa el mismo titular, el mismo subtítulo y la misma llamada a la acción en las tres. Dibuja cualquier elemento visual del producto con HTML y CSS; sin imágenes externas.

Funciona con

Codex, ChatGPT

De la colección

Landing pages

Sobre este prompt

Codex escribe tres archivos HTML autocontenidos, uno por dirección: A es cálida y editorial con un titular serif, B es oscura con un solo acento brillante y números grandes, y C es suave con tarjetas redondeadas y un degradado claro. El titular, el subtítulo y el botón son los mismos en las tres, así que la única variable es el enfoque visual, que es justo lo que decides en esta etapa.

Las tres líneas de estilo son lo que debes reescribir. Si tu marca ya descarta una página oscura, sustituye B por algo realmente distinto, como un layout denso y lleno de datos, en lugar de una segunda variante clara. Conserva el tamaño de 1440×900 y la regla contra las imágenes externas: los elementos visuales del producto dibujados en HTML y CSS siguen siendo editables y no se rompen al mover el archivo.

Juzga las direcciones en conjunto y no una pestaña del navegador cada vez. En un lienzo de Codex Design, los tres archivos quedan lado a lado como HTML en vivo, y las diferencias de jerarquía y densidad se aprecian de un vistazo. Anota la letra que elijas, o las partes que quieras combinar, porque el prompt de la página completa que viene a continuación se refiere a la dirección por su letra.

Más prompts de esta colección

• Prompt de diseño de landing page completa para CodexAmplía la dirección de hero que elegiste a una landing page completa, con ocho secciones con nombre en un orden fijo para que Codex no añada relleno.
• Prompt de sección de funciones de landing page con contenido realReescribe las funciones de una landing page con un titular concreto, un detalle o una cifra específica y un pequeño elemento visual en HTML, sin iconos.
• Prompt de diseño de sección de precios para CodexDiseña una sección de precios con tus planes, un nivel recomendado destacado, un selector mensual/anual y una línea que responda a la objeción principal.
• Prompt de revisión móvil de una landing page para CodexPide a Codex una versión de 390px de tu landing page con la llamada a la acción en la primera pantalla, zonas táctiles de 44px y una lista de lo que recortó.
• Prompt para que una landing page hecha con IA parezca menos genéricaUn prompt de revisión para que Codex detecte qué hace que una página parezca hecha con IA, del centrado total a los textos vagos, y corrija cinco fallos.
• Prompt de landing page de HTML a código de producción para CodexReconstruye la landing page HTML aprobada en tu stack real, como Next.js y Tailwind, con tus propios componentes y los textos tal como están.