Prompt de landing page de HTML a código de producción para Codex

Reconstruye 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.

Reconstruye landing.html como una página de [Next.js] con [Tailwind CSS] y nuestros componentes de [src/components]. Reproduce el layout, el espaciado y los tamaños de texto del archivo HTML, hazla responsive entre 390px y 1440px y mantén los textos exactamente como están.

Funciona con

Codex

De la colección

Landing pages

Sobre este prompt

Aquí el archivo HTML deja de ser el diseño y pasa a ser la especificación. Codex reconstruye landing.html como una página de tu base de código, con el mismo layout, espaciado y tamaños de texto, usando tus componentes existentes cuando encajan, haciéndola responsive entre 390px y 1440px y conservando cada palabra de los textos.

Sustituye los corchetes por tu framework, tu enfoque de estilos y tu carpeta de componentes; una página de Astro con módulos CSS funciona igual de bien que Next.js con Tailwind. Si tu archivo tiene otro nombre o está en una subcarpeta, indica su ruta real. Menciona también el archivo de 390px de la revisión móvil, para que Codex tenga una referencia del layout en pantallas pequeñas en lugar de adivinarlo.

Con una biblioteca de componentes grande, pide a Codex que construya la página sección por sección y compare cada una con el HTML al mismo ancho antes de continuar. Este paso lee y escribe en tu repositorio, así que ejecútalo en Codex dentro de tu proyecto y no en una ventana de chat.

Más prompts de esta colección

• Prompt de brief de landing page para CodexUn prompt de brief que da a Codex tu producto, audiencia, objetivo y pruebas, y le pide las secciones de la página en orden antes de empezar a diseñar.
• Prompt de diseño de hero con tres direcciones para CodexPide a Codex tres heros a 1440×900, editorial, oscuro y suave, con el mismo texto, para comparar el estilo visual y nada más.
• 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ó.