Cómo crear una web 3D con IA: convierte tu negocio en un mundo que se recorre (con un prompt)

¿Te imaginas que quien entra en tu web no se encontrara un menú con cuatro apartados, sino un pequeño mundo en 3D que puede recorrer? Eso es lo que consigues al crear una web 3D con IA: tu mascota camina entre edificios y cada edificio abre uno de tus servicios.

Hoy puedes hacerlo para tu negocio con un solo prompt, sin saber programar. Rellenas unos corchetes con tus datos, adjuntas tu logo y tus fotos, y la IA escribe todo el código. Tú revisas, pides cambios en lenguaje normal y la publicas.

Además, te contamos los fallos reales que encontramos en las seis versiones del prompt.

Qué es una web 3D con IA y en qué se diferencia de una web normal

Una web interactiva 3D como esta no es un vídeo: es un escenario que el navegador dibuja en tiempo real y que el visitante controla. Toca el suelo y la mascota va andando hasta allí; arrastra y la cámara gira; pellizca y hace zoom.

La vista es isométrica (en diagonal y desde arriba, como en los juegos de construir ciudades), por eso también se llama web isométrica 3D. Tu negocio se convierte en una isla con tu marca en el centro y un distrito por servicio alrededor.

Nuestra referencia es Octonove Odyssey: un pulpo recorre la isla y cada edificio abre un servicio. Está en inglés, pero merece la pena recorrerla un minuto. Por dentro usa Three.js, la librería más usada para 3D en el navegador, mientras que textos, botones y formularios siguen siendo HTML normal.

Si buscas una página única con un personaje que acompaña al bajar, mira cómo crear una landing page con IA en 3D. Esta guía es para negocios con varios servicios que se exploran como en un juego.

Lo que vas a conseguir con el prompt

• Una portada que vende, con titular y botón, y el mundo detrás sin taparlos.
• Tu mascota en 3D, hecha con código a partir de tu logo o tu descripción. Camina y, en reposo, respira y parpadea.
• Un distrito por servicio (de 4 a 6) más uno de contacto, con objetos que recuerdan a cada servicio.
• Paneles que venden: titular, 3 ventajas, botón de contacto y 2 trabajos.
• Contacto a un toque: un formulario que prepara el mensaje para tu WhatsApp o tu email.
• Vista rápida sin 3D, versión móvil y SEO básico, todo en un único archivo index.html.

Qué necesitas antes de empezar

• Una IA que escriba código largo. Nosotros lo probamos con Claude. ChatGPT o Gemini, con su modelo más potente, deberían poder hacerlo, pero no los hemos probado con este prompt. Si dudas, mira qué IA debo usar.
• Tu logo en PNG sin fondo. Es lo más importante: de él salen la mascota y los colores. Si no tienes, puedes encargárselo a un diseñador en Fiverr (enlace de afiliado · sin coste extra para ti).
• Fotos reales del local, del equipo o de tus trabajos. Si son pequeñas o borrosas, puedes mejorar su resolución con Magnific (enlace de afiliado · sin coste extra para ti).
• Tus servicios, con precios si los enseñas, y 3 o 4 opiniones reales de Google.
• Tu web actual, si tienes. Si no, la de un negocio de tu sector: la IA solo la usa como guía de estructura, sin copiar sus textos ni sus imágenes.
• Un hosting con dominio para publicarla. Te recomendamos Hostinger (enlace de afiliado · sin coste extra para ti); en el paso 8 te explicamos qué es cada cosa y qué plan elegir.

Cómo crear una web 3D con IA paso a paso

Paso 1: Elige tu mascota y tus distritos

Decide quién camina por tu mundo y qué servicios serán sus distritos. Para la mascota, escribe «INVÉNTALA A PARTIR DE MI LOGO» o descríbela tú. Elige entre 4 y 6 servicios: con el de contacto, tendrás de 5 a 7 distritos. Así lo hicimos en nuestras pruebas con negocios inventados:

El prompt pide una silueta grande y de 3 a 5 rasgos (colores, cabeza, ojos y un accesorio): con pocos rasgos grandes, la mascota se reconoce mejor que con muchos detalles pequeños.

Paso 2: Rellena los corchetes del bloque «Mi negocio»

Copia el prompt de la tarjeta del final (solo necesitas una cuenta gratuita) y pégalo en un documento o en el Bloc de notas. Arriba del todo está el bloque «1. MI NEGOCIO»: es lo único que escribes tú. Cambia cada corchete entero, ejemplo incluido, por tu dato. Así quedaría para una floristería inventada:

## 1. MI NEGOCIO

- Marca: Raíces Floristería
- A qué me dedico: floristería de barrio con reparto a domicilio en Valencia
- Mi cliente ideal: gente que quiere regalar flores bonitas sin complicarse
- Qué quiero que haga quien entre: pedir un ramo por WhatsApp
- Web de la que sacar la información: https://www.floristeria-de-ejemplo.com (no es mía: úsala solo como guía de estructura)
- Mi mascota: INVÉNTALA A PARTIR DE MI LOGO
- Colores de marca: SÁCALOS DE MI LOGO
- Tono: cercano, alegre y sin cursilerías
- Mis servicios o productos, entre 4 y 6 (serán los distritos): Ramos a domicilio · Bodas y eventos · Plantas de interior · Suscripción semanal · Talleres
- Contacto: WhatsApp 34600000000 · Email hola@ejemplo.com · Dirección Calle Ejemplo 12, Valencia
- Idioma de la web: español

Junto a este mensaje te adjunto: mi logo, 8 fotos de ramos y del local, mi lista de precios y 3 opiniones reales de Google. Úsalo todo: mi logo manda sobre la mascota y los colores; mis fotos y mis textos mandan sobre el contenido.

Pon una sola acción principal y el WhatsApp con prefijo y sin espacios. Y no te inventes datos: lo que falte, la IA lo escribirá como ejemplo marcado con (EJEMPLO: CAMBIAR).

💡 ¿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.

Paso 3: Adjunta tu material en el mismo mensaje

Junto al prompt, adjunta el logo, las fotos y un documento con servicios, precios y opiniones (con el botón de adjuntar o «+» junto a la caja de texto de tu IA). La IA no puede enlazar esas fotos porque no tienen dirección en internet, así que las pone como assets/nombre.jpg. Mientras no estén, el prompt pide que se vea un bloque de color con el título en lugar de una imagen rota.

Paso 4: Elige el modelo más potente y envía el prompt

Un mundo 3D pide mucho código: elige el modelo más avanzado de tu IA. Pega en el chat el prompt completo, ya con tu bloque «Mi negocio» relleno, adjunta tu material y envíalo. No te hará preguntas.

En los planes gratuitos, el modelo más potente puede no estar disponible y puedes llegar al límite de mensajes a mitad del código. Si pasa, espera a que se renueve el límite y escribe «continúa» en el mismo chat: no empieces uno nuevo.

Primero verás un resumen de la mascota, los colores y los distritos: léelo, es el mejor momento para corregir. Luego llega el index.html. Si se corta, escribe también «continúa».

Al terminar, guárdalo en tu ordenador. En Claude, usa el botón de descargar del artefacto. Si solo tienes el código, cópialo entero, pégalo en el Bloc de notas y usa Archivo > Guardar como: en Tipo elige «Todos los archivos», en Nombre escribe index.html y en Codificación elige UTF-8 (así las tildes se ven bien). Comprueba que el archivo no se llama «index.html.txt».

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

No hace falta subir nada para verla:

• En Claude, aparece como artefacto (una ventana junto al chat donde se ve la web funcionando), también en el plan gratuito. Si no aparece, revisa en la configuración de Claude que tengas activados los artefactos. Según tu plan, también podrás publicarlo con un enlace y abrirlo en tu móvil.
• En Gemini, antes de enviar el prompt activa Canvas, el botón que aparece bajo la caja de texto: es su ventana de vista previa.
• En ChatGPT, según el modelo y el plan, podría mostrarte una vista previa. Si no, abre el archivo descargado en Chrome.

Paso 6: Pide cambios concretos, de uno en uno

Casi nunca sale perfecta a la primera. Pide los cambios de uno en uno, en el mismo chat y solo el trozo que cambia. Por ejemplo:

Haz la mascota un 30 % más grande. Devuélveme solo la función que la construye.

En el distrito de Bodas y eventos, pon un arco de flores con luces que parpadean. Devuélveme solo el código de ese distrito.

¿Y qué haces con ese trozo? En Claude, la IA suele aplicarlo ella misma sobre el artefacto y la vista previa se actualiza. En las demás, no toques el código a mano: cuando termines con los cambios, escribe «Dame ahora el index.html completo con todos los cambios aplicados» y guarda esa versión final. Pedir solo el trozo sirve para que la IA no se corte ni rehaga lo que ya estaba bien.

Paso 7: Cambia los textos de ejemplo y coloca tus fotos

Al final, la IA te lista los textos marcados con (EJEMPLO: CAMBIAR) y las imágenes que van en assets. Pásale tus datos reales en el mismo chat para que sustituya los textos y te devuelva el archivo completo.

Luego crea una carpeta llamada assets junto al index.html y mete tus fotos con los nombres exactos. Redúcelas a unos 1.600 píxeles de ancho (en Windows, ábrelas con Paint > Cambiar tamaño > Píxeles) para que la web no tarde en cargar.

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

El hosting es el espacio en internet donde vive tu web, y el dominio es su dirección (tunegocio.com). Para tenerla ahí, te recomendamos Hostinger (enlace de afiliado · sin coste extra para ti): panel en español y certificado de seguridad incluido.

Te basta el plan Premium contratado por 12 meses o más, con el que el dominio es gratis el primer año: lo eliges al contratar. Si al configurarlo te propone crear la web con WordPress o con su Creador con IA, omite ese paso.

Después entra en hPanel, el panel de control de Hostinger, busca tu web y abre el Administrador de archivos. Verás una carpeta llamada public_html: todo lo que pongas dentro es lo que se ve en tu dominio.

1. Prepara el .zip. Selecciona a la vez el index.html y la carpeta assets (no la carpeta que los contiene), haz clic derecho y elige «Comprimir en archivo ZIP» (en algunos Windows, «Enviar a > Carpeta comprimida»).
2. Súbelo. En el Administrador de archivos, abre public_html, pulsa «Cargar archivos» y sube el .zip.
3. Descomprímelo con clic derecho y «Extraer», para que el index.html quede directamente en public_html. Si al extraer aparece una carpeta nueva, entra en ella, mueve su contenido a public_html y borra la carpeta vacía. Si hay un default.php (la página de bienvenida de Hostinger), bórralo.
4. Compruébala en el ordenador y en el móvil (un dominio nuevo puede tardar unas horas) y prueba que el formulario abre tu WhatsApp.

Qué resultado esperar: lo que aprendimos en 6 versiones del prompt

En cada versión, una IA generó la web en una sola respuesta y un test automático la abrió en ordenador y en móvil. Estos son los fallos reales que encontramos y corregimos en el prompt:

• Un mundo invisible: la niebla empezaba antes que la cámara y tapaba la isla. Ahora niebla y luces llevan valores exactos.
• Una mascota encerrada entre edificios o dentro del núcleo, sin llegar a ningún distrito. Ahora empieza en la calle y el código comprueba que llega a todos.
• Un código que arrancaba antes de declarar sus variables, y el mundo no cargaba. Ahora el arranque va en la última línea.
• Un menú móvil «oculto» que tapaba toda la web. Ahora una regla obliga a esconderlo de verdad.
• Unas comillas que rompían el script dentro de un aviso de imagen rota. Ahora el prompt lo prohíbe.

Con la versión final probamos dos negocios inventados sin tocar una línea de lo que devolvió la IA. En ambos, la web cargó, aparecieron las etiquetas de todos los distritos, el panel que probamos se abrió al hacer clic y se cerró con Escape, y en el móvil nada se salía por los lados. La versión anterior ya había funcionado con una inmobiliaria de 7 distritos.

En el móvil, el mundo es una franja táctil y la barra de distritos se desliza en horizontal: es normal que algunos botones no se vean al principio. Si un dispositivo no puede con el 3D, el prompt pide que la web active la vista rápida y siga funcionando.

Si algo falla, pídeselo así a la IA

La IA puede saltarse alguna instrucción. Copia la frase que corresponda en el mismo chat y, cuando esté arreglado, pídele el index.html completo como en el paso 6:

EL MUNDO SE VE NEGRO O NO SE VE:
Revisa la niebla y las luces con los valores exactos del apartado 4 del prompt: la niebla tiene que empezar en 76, más lejos que la cámara. Devuélveme solo lo que cambies.

LA MASCOTA NO CAMINA O NO LLEGA A UN DISTRITO:
La mascota no llega al distrito [NOMBRE]. Comprueba que empieza en la calle y no dentro de una caja, y calcula el punto approach por celdas como dice el apartado 5. Devuélveme solo las funciones que cambies.

ALGO TAPA TODA LA WEB:
Hay un elemento que tapa la web aunque debería estar oculto. Añade la regla [hidden] { display: none !important; } y revisa el menú móvil.

SALE UN ERROR EN LA CONSOLA:
Al abrir la web, la consola muestra este error: [PEGA AQUÍ EL TEXTO EN ROJO]. Corrígelo y dime qué has cambiado.

Los errores se ven en Chrome con F12, pestaña «Console». Si solo avisa de archivos que no encuentra, suelen ser tus fotos sin colocar.

Errores comunes al crear una web 3D con IA (y cómo evitarlos)

1. Meter demasiados servicios. Con más de 6, el mundo se satura: agrupa los parecidos.
2. Pedirla en mensajes sueltos. «Una web», luego «hazla 3D», luego «ponle mascota»: cada parte ignora a las demás.
3. Publicar con textos de ejemplo. Un «(EJEMPLO: CAMBIAR)» a la vista delata las prisas.
4. Inventarse opiniones. Las reseñas falsas están prohibidas por la normativa de consumo europea.
5. Revisarla solo en el ordenador. Muchas visitas llegarán desde el móvil.

¿Para qué negocios tiene sentido un mundo 3D en su web?

Un mundo 3D para tu web brilla si tienes varios servicios y quieres que te recuerden: clínicas, talleres, academias, inmobiliarias o estudios creativos. A cambio, pesa más que una web normal (el prompt pide bajar la calidad si el dispositivo va justo) y no sustituye a un blog.

Si prefieres una web corporativa clásica sin tocar archivos, prueba el Creador con IA de Hostinger (enlace de afiliado · sin coste extra para ti), incluido en el mismo plan Premium, que admite hasta 3 webs. Te lo contamos en nuestra experiencia con el Creador de páginas web con IA de Hostinger.

Preguntas frecuentes

¿Necesito saber programar para crear una web 3D con IA?

No. Rellenas los corchetes, adjuntas tu material, revisas el resultado y pides cambios en lenguaje normal. Lo más técnico es subir el archivo a tu hosting, y te lo explicamos en el paso 8.

¿Qué IA funciona mejor para este prompt?

Una que escriba archivos muy largos sin perder el hilo, con su modelo más potente. Lo probamos con Claude; con ChatGPT y Gemini debería funcionar, pero no lo hemos medido. Aquí comparamos qué IA escribe mejor código.

¿Cuánto cuesta crear una web 3D con IA?

El prompt es gratis. Con el plan gratuito de tu IA puedes intentarlo, aunque sus límites pueden cortar un archivo tan largo; con un plan de pago y el modelo más potente irá más holgado. Y el hosting: en Hostinger, el plan Premium contratado por 12 meses o más incluye el dominio gratis el primer año.

¿Una página web 3D hecha con inteligencia artificial se posiciona en Google?

Puede hacerlo: los textos son HTML que Google lee y el prompt pide título, descripción y datos estructurados. Eso sí, cuida el peso de tus fotos.

¿Puedo usarla para mi negocio o para clientes?

Sí, puedes usar y modificar el código. Lo que metas dentro (fotos, textos, logos y opiniones) tiene que ser tuyo o de tu cliente.

🛠️ Herramientas para crear una web 3D con IA

¿Quieres el prompt para crear una web 3D que usamos?

Justo debajo tienes la tarjeta con el prompt para crear una web 3D con tu mascota y tus servicios, la misma versión que probamos. Para copiarlo solo necesitas una cuenta gratuita: al registrarte recibes además 5 puntos de bienvenida para desbloquear prompts premium.

Rellena el bloque «Mi negocio» y pégalo en tu IA con tu logo y tus fotos. Y si quieres más, en nuestra biblioteca de prompts gratis tienes cientos listos para usar.