Cómo crear una landing page con IA en 3D con un solo prompt (paso a paso)

¿Has entrado alguna vez en una web en la que un personaje en 3D te acompaña mientras bajas, te sigue con los ojos y cambia de sitio en cada sección? ¿Y has pensado que algo así cuesta miles de euros y un equipo de desarrolladores?

Hasta hace muy poco, sí. Hoy puedes crear una landing page con IA con ese nivel de efectos para tu propio negocio: en 3D, con estética de cómic y con un personaje que es tuyo, ya sea tu logo convertido en muñeco, la mascota de tu marca o lo que se te ocurra. No hace falta programar. Rellenas unos corchetes, adjuntas tu logo y tus fotos, y la IA escribe todo el código.

En esta guía te enseñamos el proceso entero, del personaje a la web publicada. Lo probamos con webs de negocios inventados (una clínica dental, un gimnasio y una cafetería) y te contamos qué salió bien, qué falló y cómo lo corregimos en el prompt.

Qué es una landing page en 3D y por qué ahora la puede hacer una IA

Una landing page es una página única con un solo objetivo: que quien entra pida cita, reserve, compre o te escriba. No es una web con veinte apartados, sino un recorrido de arriba abajo que va convenciendo al visitante hasta el botón final.

La versión en 3D añade una escena que el navegador dibuja en tiempo real detrás del contenido. El personaje no es un vídeo ni un GIF: es un modelo hecho con código que reacciona al ratón, al dedo en el móvil y al scroll. Por eso da esa sensación de estar vivo que no consigue una web normal.

Por dentro se apoya en tres piezas:

• Three.js, la librería más usada para dibujar 3D en el navegador.
• GSAP con su complemento ScrollTrigger, que ata cada animación a la posición del scroll.
• Lenis, que suaviza el desplazamiento para que todo se mueva sin tirones.

¿Por qué ahora? Porque los modelos actuales, como Claude, ChatGPT o Gemini, ya son capaces de escribir un archivo de miles de líneas que funciona de principio a fin. Lo que antes era un proyecto de semanas para un estudio creativo hoy cabe en un buen prompt y un par de horas de revisión.

Lo que vas a conseguir con el prompt

El prompt está pensado para que el resultado parezca una web premiada, no una plantilla. Esto es lo que incluye:

• Pantalla de carga con tu logo apareciendo estampado como un sello.
• Un personaje 3D propio que te sigue con los ojos, parpadea, respira y reacciona cuando pasas el ratón por el botón principal.
• Estilo cómic tipo Borderlands: sombras planas, tramas de rayas y un contorno de tinta alrededor de todo.
• Secciones animadas con el scroll: titulares que aparecen palabra a palabra, contadores y una sección de proceso que se desplaza en horizontal.
• Escaparate con fichas: cada proyecto o producto abre su propia ficha con galería de imágenes.
• Formulario de contacto que abre WhatsApp con el mensaje ya escrito.
• Versión móvil pensada aparte, con posiciones propias para el personaje.
• SEO básico incluido: título, descripción, etiquetas para redes sociales y datos estructurados de tu tipo de negocio.

Y todo en un único archivo index.html que puedes subir a cualquier hosting.

Qué necesitas antes de empezar

No necesitas saber programar, pero sí tener a mano el material de tu negocio. Cuanto mejor sea lo que le das a la IA, mejor será la web:

• Una IA que escriba código largo. Nosotros hicimos las pruebas con Claude, y también puedes usar ChatGPT o Gemini. Te recomendamos un plan de pago: con los gratuitos es muy probable que la respuesta se corte antes de terminar.
• Tu logo, a poder ser en PNG con fondo transparente. Si aún no tienes, puedes encargárselo a un diseñador en Fiverr (enlace de afiliado · sin coste extra para ti).
• Entre 4 y 10 fotos reales: el local, el equipo, tus trabajos o tus productos.
• Tus textos: la lista de servicios (con precios, si los enseñas), 3 opiniones reales de clientes y las preguntas que más te hacen.
• La dirección de tu web actual, si tienes. Si no, la de una web de tu sector que te sirva de ejemplo.
• Un ordenador. La web la verás en la vista previa de la propia IA, pero descargarla y subirla a tu hosting es mucho más cómodo que desde el móvil.
• Un hosting con dominio para publicarla al final. Te recomendamos Hostinger (enlace de afiliado · sin coste extra para ti); en el paso 7 te explicamos qué plan elegir.

Si dudas entre una IA y otra, en qué IA debo usar te ayudamos a elegir según lo que necesitas.

Cómo crear una landing page con IA paso a paso

Paso 1: Elige tu personaje (la decisión que más cambia el resultado)

El personaje es lo que hace que tu web se recuerde, así que merece cinco minutos de reflexión. Tienes dos caminos:

1. Convertir tu logo en personaje. Escribes «INVÉNTALO A PARTIR DE MI LOGO» y adjuntas el logo. Funciona muy bien cuando el logo ya tiene una forma reconocible.
2. Describirlo tú. Un objeto de tu sector con cara y un accesorio que lo haga único.

En nuestras pruebas vimos que los personajes que mejor salen son objetos con cara, no personas ni animales realistas. La IA construye el personaje con formas sencillas, y un diente o una taza se reconocen perfectamente con esas piezas; una persona, no tanto. Algunas ideas por sector:

Paso 2: Rellena los corchetes del prompt

El prompt empieza con un bloque llamado «Mi negocio» lleno de corchetes. Es lo único que tienes que escribir tú; todo lo demás ya está resuelto. Así quedaría para una peluquería inventada de Sevilla:

## 1. MI NEGOCIO

- Marca: Tijeras Locas
- A qué me dedico: peluquería unisex de barrio en Triana, Sevilla
- Mi cliente ideal: gente joven que quiere un corte con estilo sin pagar precios de centro
- Qué quiero que haga quien entre: pedir cita por WhatsApp
- Web de la que sacar la información: no tengo web, trabaja con lo que te adjunto
- Mi personaje: unas tijeras con tupé, gafas redondas y una sonrisa enorme
- Colores de marca: SÁCALOS DE MI LOGO
- Tono: cercano, con humor y sin tecnicismos
- Contacto: WhatsApp 600 000 000 · Email hola@ejemplo.com · Dirección Calle Ejemplo 12, Sevilla
- Idioma de la web: español

Junto a este mensaje te adjunto: mi logo, 6 fotos del local y de cortes, la lista de servicios con precios y 3 opiniones reales de Google.

💡 ¿Y cuando quieras ampliar la web o convertirla en algo más grande? La carta El Vibe Coder de Invokard convierte a la IA en un compañero que construye contigo paso a paso, y es gratis — consíguela.

Tres consejos al rellenarlo:

• Una sola acción principal. Pedir cita, reservar o comprar. Si pones tres, la web no empujará hacia ninguna.
• Si no tienes web, dilo. También puedes poner la de un negocio de tu sector como referencia: el prompt le prohíbe copiar sus textos, su marca y sus imágenes, y solo la usa para entender la estructura.
• No te inventes datos. Lo que no tengas, la IA lo escribirá como texto de ejemplo marcado con (EJEMPLO: CAMBIAR) para que lo encuentres después.

Paso 3: Adjunta tu material

En el mismo mensaje del prompt, adjunta todo lo que reuniste: el logo, las fotos y un documento o texto con tus servicios, precios y opiniones. En Claude y ChatGPT basta con arrastrar los archivos al chat o pulsar el clip; en Gemini, el botón «+».

Hay un detalle técnico que conviene saber: la IA no puede enlazar las fotos que le adjuntas, porque no tienen dirección en internet. Por eso el prompt le pide que las ponga con rutas del tipo assets/nombre.jpg y que al final te diga qué archivos tienes que meter en esa carpeta. Mientras no los pongas, en su lugar verás un panel de cómic con el texto de lo que va ahí, nunca un icono de imagen rota.

Paso 4: Pega el prompt y deja que escriba

Copia el prompt completo del final de esta guía (solo necesitas una cuenta gratuita), pégalo con tus corchetes rellenos y envíalo. La IA no empieza por el código: primero te da un resumen de 10 líneas con cómo será el personaje, la paleta de colores y qué hará en cada sección.

Después escribirá el archivo index.html. Es largo, así que es normal que se corte a mitad. Cuando pase, escribe simplemente «continúa»: el prompt le indica que pare siempre al terminar una función y que retome justo desde ese punto.

Cuando termine, guarda el archivo: si la IA te muestra un botón para descargarlo, úsalo; si no, copia todo el código en un archivo de texto y guárdalo como index.html. Si usas el Bloc de notas, elige «Todos los archivos» y la codificación UTF-8 para que las tildes se vean bien. Si te lo ha dado en varios trozos, pégalos uno detrás de otro sin dejarte nada.

Paso 5: Mírala en la vista previa de la IA y revísala

No hace falta subir nada a internet para echarle un primer vistazo: normalmente la propia IA donde la has creado te la enseña. Si te dio el código en varios trozos, la vista previa de un trozo suelto saldrá en blanco: en ese caso, júntalos en tu index.html como te contamos en el paso 4 y ábrelo con doble clic en Chrome.

• En Claude, la web aparece como artefacto junto al chat, también en el plan gratuito. Si no la ves, activa en Configuración > Capacidades la opción de ejecución de código y creación de archivos. Desde ahí puedes publicar el artefacto y abrir el enlace en tu móvil.
• En Gemini, activa Canvas en las herramientas antes de enviar el prompt y, cuando termine, pulsa «Vista previa».
• En ChatGPT, si sobre el bloque de código aparece el botón de vista previa («Preview»), úsalo. Depende del modelo y del plan: si no lo ves, abre el archivo descargado con doble clic en Chrome.

Con la web delante, repasa:

1. El personaje. Que se vea entero en la portada y que, al bajar, no tape ningún titular ni botón.
2. El móvil. En Claude, abre en tu teléfono el enlace del artefacto publicado y comprueba lo mismo. Con otra IA, haz esta comprobación en el móvil cuando la publiques (paso 7).
3. Los textos de ejemplo. Busca «EJEMPLO: CAMBIAR» en la vista previa (Ctrl + F) y pásale a la IA tus datos reales para que los sustituya.
4. Los errores. Si algo se queda en blanco o no se mueve en la vista previa, abre primero el archivo descargado con doble clic en Chrome: a veces es la vista previa la que bloquea el 3D y en tu ordenador funciona bien. Si también falla ahí, pulsa F12 y pásale a la IA los errores en rojo de la pestaña «Console».

Paso 6: Pide cambios concretos, de uno en uno

Casi nunca sale perfecta a la primera, y no pasa nada. La clave está en pedir los cambios de uno en uno y con precisión, y en pedir solo el trozo modificado, no el archivo entero otra vez. Dos ejemplos que funcionan:

En el móvil, el personaje tapa el titular de la sección de servicios. Colócalo debajo del texto y reduce su altura a 0,20 del alto de la pantalla. Devuélveme solo el objeto POSES modificado.

Los ojos del personaje no siguen el dedo en el móvil. Añade la lectura del evento touchmove y devuélveme solo la función que lo gestiona.

Fíjate en que usan el mismo vocabulario que el prompt («objeto POSES», «alto de la pantalla»). Así la IA sabe exactamente qué tocar sin romper lo demás.

Paso 7: Publícala en Hostinger con tu propio dominio

Cuando te guste cómo queda, toca publicarla con una dirección propia, del tipo tunegocio.com. Nuestra recomendación es Hostinger (enlace de afiliado · sin coste extra para ti): tiene el panel en español, todos sus planes de hosting incluyen el certificado de seguridad (el candado del navegador) y una web de un solo archivo como esta se sube en unos minutos.

Para una landing te basta con el plan Premium contratado por 12 meses o más: así el dominio te sale gratis el primer año. El plan Single es más barato, pero no incluye dominio y tendrías que comprarlo aparte.

Al configurar el plan, elige tu dominio gratis y, si Hostinger te propone crear la web con WordPress o con su Creador con IA, omite ese paso: tu web ya está hecha. Después, súbela así:

1. Prepara el archivo .zip. Junto al index.html, crea una carpeta llamada assets y mete dentro tus fotos con los nombres exactos que te indicó la IA. Luego selecciona juntos el index.html y la carpeta assets, haz clic derecho y comprímelos en un .zip («Comprimir en archivo ZIP» en Windows, «Comprimir» en Mac).
2. Súbelo. En el panel de Hostinger (hPanel), entra en el Administrador de archivos, abre la carpeta public_html, pulsa «Cargar archivos» y sube el .zip.
3. Descomprímelo. Haz clic derecho sobre el .zip y elige «Extraer», para que el index.html quede directamente dentro de public_html. Si en esa carpeta hay un archivo default.php (la página de bienvenida que pone Hostinger), bórralo con clic derecho sobre él: si no, podrías seguir viendo esa página en lugar de tu web.
4. Compruébala. Abre tu dominio en el ordenador y en el móvil (si el dominio es nuevo, puede tardar unas horas en funcionar): ahora sí deberían verse tus fotos. Rellena el formulario y comprueba que abre WhatsApp con tu número y el mensaje bien escrito.

Si ya tienes hosting en otra empresa, el proceso es casi siempre el mismo: sube el index.html y la carpeta assets directamente a public_html (o a la carpeta principal de tu web) desde su administrador de archivos o por FTP. Al ser una web sin base de datos, funciona en cualquier sitio.

Cómo funciona por dentro (para que sepas qué pedirle)

No necesitas entender el código, pero conocer las técnicas que usa te ayuda a pedir cambios con las palabras adecuadas:

Hay una quinta técnica que marcó la diferencia en nuestras pruebas: las posiciones del personaje se escriben en coordenadas de pantalla. En lugar de decir «ponlo en el punto 2,5 del mundo 3D», el prompt dice «ponlo al 75 % del ancho, con una altura de 0,35 de la pantalla». La web convierte esa posición a 3D y mide el tamaño real del personaje, así que queda igual de bien en un portátil que en un monitor enorme.

Si lo que te interesa es un objeto 3D para descargar o imprimir, y no una web, en nuestra guía para crear modelos 3D con IA tienes otro enfoque.

Lo que aprendimos probándolo con negocios de ejemplo

Antes de publicar el prompt lo pusimos a prueba con webs de negocios inventados, y cada fallo que encontramos se convirtió en una instrucción nueva. Te los contamos porque, si decides modificar el prompt, son justo los puntos que no conviene tocar:

• Imágenes rotas. En la primera versión, las fotos que no cargaban dejaban el icono de imagen rota. Solución: cada imagen lleva un plan B que la sustituye por un panel de cómic.
• Un personaje gigante detrás de los titulares. Con las posiciones en unidades 3D, en pantallas anchas el personaje crecía y tapaba el texto. Solución: las coordenadas de pantalla que acabas de ver.
• «applyPose is not defined». La web se quedaba congelada porque una función estaba declarada donde el resto del código no podía verla. Solución: todo el JavaScript en un único bloque, con las funciones en el nivel superior.
• Un personaje irreconocible. Con descripciones largas, la IA mezclaba piezas pequeñas y el resultado no se parecía a nada. Solución: la receta de mascota de juguete, con un cuerpo grande y de 3 a 5 rasgos generosos.
• La cabecera desbordada en el móvil y una columna de texto demasiado estrecha en el ordenador. Solución: en el móvil, solo logo y menú; en escritorio, el texto ocupa entre el 45 % y el 50 % del ancho.

Errores comunes al crear una landing page con IA (y cómo evitarlos)

1. Pedirla en muchos mensajes sueltos. Si primero pides «una web», luego «añade 3D» y después «ponle un personaje», cada parte se escribe sin tener en cuenta las demás. Un único prompt completo mantiene la coherencia.
2. Publicar con los textos de ejemplo. Nada delata más una web hecha con prisas que un «(EJEMPLO: CAMBIAR)» a la vista. Búscalos todos antes de publicar.
3. Inventarse opiniones o cifras. Además de restarte credibilidad, publicar reseñas falsas está prohibido por la normativa de consumo de la Unión Europea. Usa solo opiniones reales.
4. Subir las fotos tal cual salen del móvil. Una foto de varios megas ralentiza la web. Redúcela a unos 1.600 píxeles de ancho y guárdala en WebP o en JPG comprimido.
5. Copiar la web de otro. La web de referencia sirve para el estilo, no para el contenido. Y «tipo Borderlands» describe una estética: no uses personajes, logos ni nombres de ese videojuego.
6. Revisarla solo en el ordenador. Buena parte de tus visitas, si no la mayoría, llegarán desde el móvil. Revisa siempre la vista de teléfono antes de dar la web por terminada.

¿Una web en 3D se posiciona bien en Google?

Sí, si está bien hecha, y el prompt ya la prepara para ello. Lo importante es que el texto de la web es HTML normal: el 3D se dibuja en un lienzo por detrás, pero los titulares, los párrafos y los botones son contenido que Google lee sin problema. Además incluye título, meta descripción, etiquetas para compartir en redes y datos estructurados de tu tipo de negocio.

Ahora bien, conviene tener claras dos cosas:

• Pesa más que una web normal. Las librerías de 3D y las animaciones tienen un coste. El prompt limita la resolución, reduce las partículas en el móvil, pausa el dibujo cuando la pestaña no se ve y carga las imágenes de forma diferida, pero no esperes la velocidad de una página de solo texto.
• Es una landing, no un blog. Brilla como página de campaña o de presentación de tu negocio. Si tu estrategia se basa en publicar artículos, mantén el blog en WordPress y enlázalo desde la landing.

Por último, respeta a quien prefiere menos movimiento: si el visitante tiene activada en su sistema la opción de reducir animaciones, la web la tiene en cuenta.

Y si lo que quieres es la web corporativa completa, con varias páginas y sin tocar archivos, prueba el Creador con IA de Hostinger (enlace de afiliado · sin coste extra para ti). Desde agosto de 2026 reúne su antiguo creador de webs y Horizons: la IA te propone la web y tú la ajustas con un editor visual. Va incluido en el mismo plan Premium del paso 7, que admite hasta 3 webs, así que puedes tener la landing y la web corporativa en el mismo plan, cada una con su dominio o subdominio. Te contamos cómo funciona en nuestra experiencia con el creador de páginas web con IA de Hostinger, y en la comparativa de plataformas para crear páginas web con IA tienes más alternativas sin tocar código.

Preguntas frecuentes

¿Necesito saber programar para crear una landing page con IA?

No. Tu trabajo es rellenar los corchetes, adjuntar tu material, revisar el resultado con la lista del paso 5 y pedir los cambios en lenguaje normal. Eso sí, ayuda perderle el miedo a guardar un archivo y a subirlo a tu hosting, que te explicamos en el paso 7.

¿Qué IA funciona mejor?

Necesitas un modelo capaz de escribir archivos muy largos sin perder el hilo. Nosotros hicimos las pruebas con Claude, y ChatGPT y Gemini también pueden hacerlo. Más que la marca, importa el plan: con los gratuitos es fácil que la respuesta se corte antes de terminar.

¿Cuánto cuesta?

El prompt es gratis. El coste real es tu plan de la IA durante el mes en que lo uses y el hosting para publicarla: en Hostinger (enlace de afiliado · sin coste extra para ti), el plan Premium contratado por 12 meses o más incluye el dominio gratis el primer año, así que no tienes que comprarlo aparte.

¿Puedo usar la web para mi negocio o hacerla para clientes?

Sí. El código que genera la IA puedes usarlo y modificarlo como quieras. Solo ten cuidado con lo que metes dentro: las fotos, los textos y las marcas tienen que ser tuyos o de tu cliente.

¿Puedo editarla después o combinarla con WordPress?

Es un único archivo HTML, así que puedes editarlo con cualquier editor o pedirle los cambios a la IA. Para que conviva con WordPress, lo más sencillo es subirla a una subcarpeta o a un subdominio de tu hosting (por ejemplo, tudominio.com/landing/) y enlazarla desde tu web.

¿Funciona en el móvil y en ordenadores antiguos?

Sí. El personaje tiene posiciones pensadas para el móvil y, si el dispositivo no puede mostrar 3D, la web oculta el lienzo y sigue funcionando entera sobre su fondo de papel.

🛠️ Herramientas para crear una landing page con IA

¿Quieres el prompt exacto que usamos?

Justo debajo tienes la tarjeta con el prompt completo para crear tu landing page en 3D con tu propio personaje. Para copiarlo solo necesitas una cuenta gratuita: si aún no la tienes, al registrarte recibes además 5 puntos de bienvenida para desbloquear prompts premium de la biblioteca.

Después, rellena los corchetes y pégalo en Claude, ChatGPT o Gemini junto a tu logo y tus fotos. También puedes guardarlo en la extensión Simplify Prompts AI para tenerlo siempre a mano.