Un solo prompt para un sitio web 3D en 30 segundos (6 probados)

La mayoría de las bibliotecas de prompts para sitios web 3D o bien cobran por el texto del prompt en sí o te muestran un video de demostración y se guardan las palabras para sí mismas. Aquí tienes seis prompts completos: pégalos en Claude tal cual, o adapta una línea para Lovable, Bolt y Cursor. Los seis pasaron por un modelo en vivo; cinco volvieron como páginas funcionales de Three.js, y cada captura de pantalla abajo es una de esas renderizaciones, no un mockup.

Seis prompts de sitios web 3D que puedes copiar ahora mismo

Cada prompt solicita una página HTML de un solo archivo con Three.js cargado desde un CDN. Esa restricción importa: un solo archivo se abre localmente en cualquier navegador y es fácil de entregar a un desarrollador o pegar en un bloque de código personalizado, y obliga al modelo a mantener la escena autocontenida en lugar de dispersar imports por un proyecto.

1. Héroe de galaxia de partículas

Crea una página HTML de un solo archivo con una sección hero interactiva de galaxia de partículas 3D
usando Three.js (cárgalo desde un CDN). Requisitos: alrededor de 50,000
partículas formando una galaxia espiral que gira lentamente; los colores de las partículas cambian
de ámbar cálido en el núcleo a violeta en el borde exterior; añade OrbitControls para que
los visitantes puedan arrastrar para girar y hacer zoom; superpone un titular hero centrado que
diga "Build Beyond Flat" con una breve línea secundaria y un botón CTA; establece
pointer-events: none en el contenedor superpuesto y pointer-events: auto en
el botón CTA para que la galaxia siga siendo arrastrable detrás del texto; fondo
oscuro #0a0616; maneja el redimensionamiento de la ventana. Devuelve SOLO el archivo HTML completo
en un único bloque de código.

Generado en 27 segundos y 3.692 tokens de salida. La galaxia rota, arrastrar para orbitar funciona y el botón sigue siendo clicable a través de la superposición. Un fallo real: la sublínea cae sobre el brillante núcleo galáctico y es difícil de leer. La solución está en las notas de prueba de abajo.

2. Escaparate de productos impulsado por el desplazamiento

Crea una página HTML de un solo archivo: una vitrina de producto 3D impulsada por el scroll usando
Three.js cargado desde un CDN. Requisitos: un torus-knot cromado flotante
centrado en un lienzo fijo de pantalla completa; la página tiene 4 secciones
de pantalla completa con scroll, y a medida que el usuario hace scroll la cámara orbita el objeto
completando 360 grados mientras el color del material del objeto transiciona suavemente por sección
(plateado, azul profundo, esmeralda, cobre); cada sección muestra un titular y
un texto de una sola línea fijado a la izquierda sobre el lienzo; interpolación suave (lerp)
al hacer scroll para que el movimiento se sienta amortiguado; aspecto de estudio oscuro
con dos focos de luz de colores y una sombra suave en el suelo; manejar el redimensionamiento.
Devuelve SOLO el archivo HTML completo en un único bloque de código.

Esta fue la más pesada de las cinco generaciones en funcionamiento (63 segundos, 7,023 tokens de salida) y el resultado más impresionante. El desplazamiento desplaza la cámara alrededor del objeto, y el material cambia de color por sección exactamente como se pidió:

La interpolación lerp amortiguada también se respetó; el movimiento tiene la sensación pesada y costosa de un sitio de una agencia, en lugar de una presentación de diapositivas controlada por el desplazamiento.

3. Fondo de gradiente fluido GLSL

Crea una página HTML de un solo archivo con un fondo de gradiente fluido
WebGL animado a pantalla completa usando un shader de fragmento GLSL personalizado con Three.js cargado
desde un CDN. Requisitos: manchas orgánicas de movimiento lento que fusionen azul oscuro,
púrpura y coral, impulsadas por una uniform de tiempo y ruido de estilo simplex en el
shader de fragmento; añade un sutil grano de película en el shader; superpone una tarjeta de vidrio centrada (blur de fondo)
con un encabezado blanco "Ship Immersive Sites", una
sublínea y dos botones; la animación debe mantenerse fluida en una laptop (un solo
quad, sin pases de postprocesado); manejar el redimensionamiento. Devuelve SOLO el archivo HTML completo
en un único bloque de código.

31 seconds, 3,830 tokens, primer intento aprobado. La línea "single quad, no postprocessing passes" es el límite de rendimiento: sin ella, los modelos tienden a recurrir a EffectComposer y a pases de bloom que hunden las tasas de fotogramas en GPUs integradas.

4. Recorrido en vuelo por el portafolio 3D (el que se resistió)

Crea una página HTML de un solo archivo: un portafolio 3D usando Three.js desde un CDN.
Seis tarjetas de proyectos flotantes (planos redondeados con texturas de degradado
de marcador de posición y títulos de proyecto renderizados sobre la textura de la tarjeta) dispuestas a lo largo de
una suave curva en el espacio 3D. A medida que el usuario desplaza, la cámara avanza
a lo largo de la curva, llevando cada tarjeta al foco una a la vez; la cámara
debe mantener la tarjeta enfocada completamente encuadrada con un margen cómodo y nunca
atravesar una tarjeta; la tarjeta enfocada se agranda ligeramente. Las tarjetas vecinas
permanecen parcialmente visibles para dar sensación de profundidad. Añade una niebla sutil, un fondo oscuro, interpolación de desplazamiento amortiguada.
Al hacer clic en una tarjeta enfocada se abre un enlace. Gestiona el cambio de tamaño.
Mantén el código compacto: reutiliza una sola función para construir tarjetas, sin comentarios.
Devuelve SOLO el archivo HTML completo en un único bloque de código.

Esta necesitó tres ejecuciones y aun así no está lista para producción, y la captura de pantalla de arriba muestra por qué la publicamos de todos modos: la tarjeta se renderiza, pero la cámara queda detrás de ella, así que el título se ve invertido. La primera ejecución desbordó nuestro límite de salida de 16.000 tokens a mitad del archivo. La segunda ejecución (con la línea "mantén el código compacto", que es por eso que esa línea está en el prompt) renderizó tarjetas pero hizo pasar la cámara directamente a través de ellas. La tercera ejecución corrigió el recorte y perdió el acoplamiento del desplazamiento de la cámara. La coreografía de la ruta de la cámara más las texturas por tarjeta es realmente más difícil para los modelos que las escenas anteriores; reserva una sesión de depuración, o simplifícalo a una cuadrícula curva estática con estados de hover.

5. Visor interactivo de productos

Crea una página HTML de un solo archivo: un visor de producto 3D interactivo utilizando
Three.js desde un CDN. Centra un sustituto geométrico estilizado y sin alambre
(cubo biselado o cápsula) sobre un pedestal. Panel del lado derecho con
tres muestras de color y un interruptor metal/mate que actualicen el material en vivo;
OrbitControls limitado a la rotación horizontal; iluminación suave de estudio de tres puntos
y una sombra de contacto. Mantén el panel como una superposición sencilla de HTML/CSS sobre el
canvas. Gestiona el redimensionamiento. Devuelve SOLO el archivo HTML completo en un único bloque de código.

Aprobado al primer intento, 66 segundos, 7,719 tokens. Las muestras de color y el interruptor metal/mate actualizan el material en vivo, y el modelo añadió un detalle no solicitado: una nota al pie que explica que la rotación está bloqueada al eje horizontal para mantener el producto encuadrado.

6. Sitio web comercial 3D de una sola página

Crea una página HTML de un solo archivo: un sitio de una sola página para un estudio de diseño con
Three.js desde un CDN. Secciones: hero, servicios, trabajos, contacto. Una sola
forma abstracta low-poly flota en la parte superior derecha del hero y gira lentamente;
a medida que el usuario hace scroll hacia cada sección, la forma transforma su escala y color
para coincidir con el acento de esa sección. Las secciones, por lo demás, usan HTML/CSS limpio
(sin 3D pesado por sección) para que la página siga siendo rápida. Scroll suave, apto para móviles,
manejar el cambio de tamaño. Devuelve SOLO el archivo HTML completo en un único
bloque de código.

62 segundos, 7.419 tokens. El modelo inventó el nombre de un estudio, construyó las cuatro secciones y colocó un icosaedro de bajo poligonaje exactamente donde se pidió. Nuestro primer intento con este prompt alcanzó un límite de salida de 8.000 tokens y llegó truncado — si llamas a un modelo a través de una API, establece el límite de salida en 16.000 tokens o más para prompts de página completa.

Lo que ocurrió cuando los ejecutamos

Tres ejecuciones en un solo modelo por prompt es una anécdota, no un benchmark; léalo como una comprobación puntual de dónde se encuentra la generación de prompt a 3D a mediados de 2026. Notas metodológicas: claude-sonnet-5 a través de su API el 17 de julio de 2026, configuración predeterminada, sin prompt del sistema, resultados renderizados en Chrome de escritorio a 1280×720 en un MacBook con Apple Silicon; en las ejecuciones exitosas el modelo eligió por sí mismo la compilación UMD de Three.js r128 desde un CDN público.

El único defecto visual entre las cinco páginas funcionales: la sublínea del prompt 1 se sitúa sobre la parte más brillante de la galaxia y se vuelve casi ilegible. Una línea de seguimiento lo solucionó — Give the subline a subtle dark text-shadow and raise its font weight so it stays readable over the bright galaxy core. Ese es el patrón en estas ejecuciones: la propia escena 3D suele salir bien, y el presupuesto de iteración se destina a la tipografía, el contraste de los elementos superpuestos y, en el caso del portafolio, a la coreografía de la cámara.

El coste no es un problema a esta escala. La ejecución completa de pruebas — nueve generaciones, incluidas las reintentos de la cartera, unos 46.000 tokens de salida — costó bastante menos de un dólar; lo ejecutamos a través de AIReiter, que revende el acceso a la API de Claude a una quinta parte del precio oficial por token, así que incluso una sesión de iteración obstinada se mantiene en el terreno del cambio suelto.

Cómo escribir tu propio prompt para un sitio web 3D

Los prompts que aprobaron comparten cinco partes. Mantén las cinco y tus probabilidades de aprobar al primer intento aumentan considerablemente.

1. Un solo sujeto de escena. Una galaxia, un nudo de toro, un campo de gradiente. En nuestras ejecuciones y en la mayoría de los ejemplos compartidos por la comunidad, los prompts que piden varias características 3D no relacionadas en una sola página son donde los modelos empiezan a omitir requisitos. 2. Un motor de movimiento. Ya sea tiempo (gira lentamente, impulsado por una uniformidad de tiempo) o desplazamiento (a medida que el usuario hace scroll, la cámara orbita). Indica cuál de los dos explícitamente; "animated" por sí solo deja que el modelo elija algo aburrido. Nota sobre el fallo del portfolio: desplazar por scroll un objeto es fiable, desplazar por scroll una cámara a lo largo de una ruta entre objetos es donde las cosas se rompen. 3. La interacción. OrbitControls para arrastrar y rotar funcionó en todas las ejecuciones exitosas de nuestra prueba. Si superpones texto sobre el canvas, pide pointer-events: none en el contenedor de la superposición y pointer-events: auto en los botones — de lo contrario la capa de texto absorbe los arrastres y clics destinados a la escena. 4. El contenido de la superposición. Da el texto exacto del titular entre comillas. Los modelos rellenan el texto no especificado con eslóganes genéricos que de todos modos tendrás que reemplazar. 5. Guardrails de rendimiento y tamaño. El recuento de partículas, single quad, no postprocessing, o low-poly mantiene la página rápida; keep the code compact mantiene la salida dentro de los límites de tokens de la API — dos de nuestras nueve ejecuciones murieron por un límite de salida antes de que apareciera cualquier problema de calidad del código.

Vocabulario que empuja al modelo hacia un 3D real en lugar de una imitación plana de CSS: Three.js, particle system, GLSL fragment shader, OrbitControls, scroll-driven camera, torus-knot, lerp, fog, point lights. Las palabras importan porque corresponden a nombres reales de API, así que el modelo escribe usando bibliotecas que vio en entrenamiento en lugar de improvisar.

El atajo para pegar código

Para efectos que van más allá de lo que puedes describir, existe una segunda técnica. Encuentra un efecto de Three.js terminado en CodePen, pega el código sin procesar en tu herramienta de IA y solicita solo Add this 3D animation to the hero. El modelo traduce el fragmento a tu stack — componentes de React, tu configuración de compilación, la estructura de tu sección — que normalmente es la parte tediosa. Builder.io documentó el truco con una animación de planeta de 50.000 partículas, incluida la misma corrección de superposición de pointer-events: none, en their walkthrough.

Esta es la ruta de mayor impacto cuando quieres un acabado digno de un sitio premiado: las matemáticas del shader vienen de una persona que lo afinó, y la AI solo se encarga de la integración.

Qué herramientas utilizan estos prompts

Las seis indicaciones anteriores son independientes de la herramienta; cualquier cosa que escriba y previsualice HTML/JS las ejecutará. Donde las herramientas difieren es en el formato de salida y la propiedad del código (verificado el 17 de julio de 2026):

Dos de estos merecen una nota. La propuesta de VULK es que genera código real de React Three Fiber — escenas WebGL interactivas en lugar de un encabezado de video en bucle — y sus sitios de demostración lo respaldan. La diferencia entre generar código real y un encabezado de video es בדיוק la distinción que hay que comprobar antes de pagar por cualquier "AI 3D website builder." Y si prefieres explorar prompts en lugar de escribirlos, MotionSites mantiene una biblioteca categorizada dirigida a Lovable, Bolt, Cursor y Claude. Una parte se puede copiar gratis, el resto está detrás de una suscripción:

Donde los prompts alcanzan su límite

Una pregunta recurrente en los hilos de r/lovable y r/web_design es si el prompt correcto puede reproducir sitios como mont-fort.com o las páginas de laboratorios de Noomo Agency. La respuesta honesta: no solo con un prompt. Esos sitios están construidos sobre modelos GLTF personalizados, iluminación dirigida artísticamente y trabajo de shaders a medida: activos que un prompt de texto no puede conjurar. Lo que un prompt sí te da es la *mecánica* de esos sitios (cámaras impulsadas por el scroll, fondos con shaders, movimiento amortiguado) con geometría de marcador de posición. Sustituirlo por un archivo de modelo real cierra parte de esa brecha, pero la iluminación, los materiales y las alternativas para móviles siguen siendo trabajo de diseño real. Nuestro fallo anterior en el recorrido flotante de portfolio es la misma lección en miniatura: cuanto más se acerca un prompt a escenas coreografiadas de múltiples objetos, más iteración humana requiere.

Tres modos de fallo cubren la mayoría de las generaciones defectuosas, cada uno con una solución de una línea:

• Pantalla negra, sin errores visibles. Normalmente es una falta de coincidencia en la importación de un módulo ES/CDN. Indicador de corrección: Use a single non-module script tag with the Three.js r128 UMD build from a CDN, no import maps. (r128 es la versión que nuestras pruebas eligieron sin indicación previa, y todavía funciona; las versiones más nuevas de Three.js eliminaron la ruta UMD, así que fijar la versión evita la falta de coincidencia.)
• Suave en escritorio, con tirones en teléfonos. Cantidades de partículas que estaban bien en una laptop. Indicador de corrección: Halve the particle count on screens narrower than 768px and cap devicePixelRatio at 2.
• La escena 3D funciona, pero nada en la página es clicable. El canvas o una superposición está absorbiendo los eventos. Indicador de corrección: Set pointer-events: none on the full-screen overlay and re-enable pointer-events: auto on buttons and links.

Y uno de nuestras propias pruebas: el texto en una tarjeta 3D se muestra en espejo. La cámara está mirando la cara posterior del plano. Instrucción de corrección: Make card materials double-sided with the texture mirrored correctly, or rotate cards to always face the camera.

Preguntas frecuentes

¿Hay prompts gratuitos para sitios web 3D?

Sí. Los seis de esta publicación están completos y son gratuitos para copiar, y DocsBot y el plan gratuito de MotionSites ofrecen más. Las bibliotecas de pago principalmente te ofrecen volumen y variedad preprobada, no un tipo diferente de prompt.

¿Funcionan estos prompts en Lovable o Bolt?

Sí, con un ajuste: elimina el requisito de "single-file HTML", ya que esas plataformas generan proyectos de React. Mantén todo lo demás: el sujeto de la escena, el controlador de movimiento, la interacción y la protección de rendimiento se transfieren directamente.

¿Necesito conocer Three.js para usar un prompt de sitio web 3D?

No para generar, un poco para iterar. Los prompts anteriores incorporan el vocabulario necesario de Three.js. Saber qué es OrbitControls o un fragment shader ayuda a pedir cambios precisos en lugar de regenerar a ciegas.

¿Cuál es la mejor herramienta de IA para un sitio web 3D?

Para un efecto de un solo archivo o una sección hero, Claude directamente: conservas el código fuente y pagas por token. Para un sitio alojado con un backend, Lovable o Bolt en sus niveles gratuitos, o VULK si específicamente quieres código exportado de React Three Fiber.

¿Un héroe 3D afectará el rendimiento o el SEO?

Solo si lo permites. Mantén el 3D en una sola escena, añade las barandillas de seguridad para móviles de arriba y mantén tu titular y el texto del cuerpo en HTML real sobre el lienzo, como hacen los seis prompts. Los rastreadores leen la capa de texto, y Core Web Vitals dependen sobre todo de qué más carga la página.