Cómo escribir un prompt para crear una web completa

Por qué la mayoría de los prompts se quedan en el hero

Un prompt que describe un ambiente devuelve una sola pantalla, porque cada palabra que falta se convierte en la respuesta más común de la herramienta. «Una landing cinematográfica para un estudio de diseño, oscura, elegante, con animaciones suaves» le da 13 palabras para trabajar. El resto lo rellena con lo de siempre: tres tarjetas de funciones, una fila de testimonios, una tabla de precios y un fundido en todo.

La guía de prompts de Lovable (se abre en una pestaña nueva) pide nombrar piezas de interfaz pequeñas y concretas, y la guía de Anthropic (se abre en una pestaña nueva) pide instrucciones explícitas sobre el resultado que quieres. Una web completa necesita más decisiones de las que caben en una frase, así que un buen prompt se lee como una especificación.

Puedes comparar los dos extremos en nuestros ejemplos de sección hero, donde cada página muestra el vídeo y una parte del prompt que hay detrás.

Las seis partes de un prompt para una web completa

Todo prompt para una web completa tiene seis partes: tecnología, identidad, recorrido, movimiento, recursos y móvil. Nuestros 62 prompts difieren en cada decisión visual y comparten esta estructura.

Escribe el texto final en el prompt. La longitud de línea y la jerarquía dependen de lo que dicen las palabras, así que un texto de relleno lleva a un diseño de relleno. También conviene comprobar algunas reglas contándolas, porque es fácil dejárselas fuera.

Qué longitud debe tener el prompt de una web

Cuenta con decenas de miles de caracteres en cuanto la web tenga movimiento propio. Un hero con motor propio puede ocupar tanto como una web completa, porque el código delicado va en el prompt al pie de la letra.

Las medianas quedan cerca del tope porque sacamos datos antes de recortar decisiones. Los textos largos y los catálogos van en archivos JSON en un CDN, y el prompt conserva la URL. Los prompts más cortos funcionan bien en páginas sencillas, donde el valor por defecto suele ser la respuesta correcta.

Escribe el movimiento como disparador, cambio y estado final

Tres datos hacen reproducible un movimiento: qué lo inicia, qué cambia y dónde termina. «Animaciones suaves» no da ninguno.

Trigger: the section reaches 42% of the viewport.
Change: its two nodes go from a 7 px dot to a 17 px ring in 280 ms, ease-out.
End state: ring visible, the previous section's nodes back to rest.
Reduced motion: the state changes without the transition.

El estado final es lo más importante. Le dice a la herramienta dónde debe quedar la página, de modo que un fotograma perdido o una fuente que llega tarde nunca dejan el contenido a medias. Si un movimiento es delicado, como un shader o una secuencia fijada, pega el código y pide que se mantenga tal cual. Los fallos más comunes están en nueve errores que rompen las webs animadas hechas con IA.

Para ver cómo una descripción de movimiento se convierte en código, monta una galería en Gallery Motion, nuestro generador gratis de galerías de imágenes en 3D, y lee el código que exporta.

Recursos y móvil: lo que los prompts suelen olvidar

Da a cada recurso una URL permanente y escribe qué cambia en cada ancho de pantalla. Los enlaces de los servidores de un generador pueden caducar o quedar bloqueados, así que sube los archivos a un almacenamiento que controles. Añade un recorte para móvil y un póster por vídeo, como explicamos en la guía para hacer un vídeo de fondo en bucle. Si aún no tienes recursos, describe la alternativa, porque si no la herramienta inventará un degradado.

En el móvil es donde se rompen las webs generadas, y supone el 60,87 % del uso mundial de la web según los datos de StatCounter de octubre de 2026 (se abre en una pestaña nueva). Indica qué secciones fijadas pasan a scroll normal, qué vídeo cambia a un recorte vertical, cómo se abre el menú y qué hovers necesitan una alternativa táctil. Revisamos cada plantilla a 375, 768, 1440 y 1920 píxeles, y esos cuatro números ocupan una línea en el prompt.

Si trabajas en Claude Code, nuestra guía cómo crear una página web con Claude Code cubre los pasos alrededor del prompt, desde el tablero de dirección de arte hasta la revisión.

Compruébalo reconstruyendo solo con el prompt

Un prompt está terminado cuando una sesión que solo tiene ese prompt puede reconstruir la web. Lo llamamos construcción a ciegas. Se hace en una sesión limpia que nunca ha visto el encargo, la conversación ni el código original, una vez por destino, y comparamos el resultado con la web aceptada en los cuatro anchos.

Buscamos el mismo diseño y comportamiento, y los píxeles pueden variar. Cuando una construcción a ciegas sale peor, el arreglo va en el prompt, porque ese es el archivo que vas a reutilizar. Nuestras plantillas incluyen el prompt que pasó esta prueba, junto con su código y sus recursos.