De un prompt a una web 3D en 30 segundos: 6 pruebas reales

Muchas bibliotecas de prompts para webs 3D te cobran por el texto del prompt o enseñan un vídeo de demostración sin revelar cómo lo hicieron. Aquí tienes seis prompts completos: puedes pegarlos tal cual en Claude o modificar una línea para usarlos en Lovable, Bolt y Cursor. Los seis pasaron por un modelo en producción; cinco devolvieron páginas Three.js funcionales, y todas las capturas que verás son renders reales, no mockups.

Seis prompts para crear una web 3D y copiarlos ya

Todos piden una página HTML en un único archivo, con Three.js cargado desde un CDN. No es una condición menor: ese archivo se abre localmente en cualquier navegador, se puede entregar fácilmente a un desarrollador o pegar en un bloque de código personalizado. Además, obliga al modelo a mantener la escena autocontenida, en lugar de repartir importaciones por todo un proyecto.

1. Hero con una galaxia de partículas

Create a single-file HTML page with an interactive 3D particle galaxy hero
section using Three.js (load it from a CDN). Requirements: about 50,000
particles forming a spiral galaxy that slowly rotates; particle colors shift
from warm amber at the core to violet at the outer rim; add OrbitControls so
visitors can drag to rotate and zoom; overlay a centered hero headline that
says "Build Beyond Flat" with a short subline and a CTA button; set
pointer-events: none on the overlay container and pointer-events: auto on
the CTA button so the galaxy stays draggable behind the text; dark
background #0a0616; handle window resize. Output ONLY the complete HTML
file in a single code block.

Se generó en 27 segundos y ocupó 3.692 tokens de salida. La galaxia rota, el arrastre para orbitar funciona y el botón sigue siendo clicable pese a la capa superpuesta. Hay un fallo real: el subtítulo queda sobre el núcleo brillante de la galaxia y cuesta leerlo. La solución está en las notas de prueba más abajo.

2. Showcase de producto controlado por scroll

Create a single-file HTML page: a scroll-driven 3D product showcase using
Three.js loaded from a CDN. Requirements: a floating chrome torus-knot
centered in a fixed full-screen canvas; the page has 4 full-screen scroll
sections, and as the user scrolls the camera orbits the object a full 360
degrees while the object material color smoothly transitions per section
(silver, deep blue, emerald, copper); each section shows a headline and
one-line copy pinned to the left over the canvas; smooth interpolation (lerp)
on scroll so motion feels damped; dark studio look with two colored
spotlights and a soft ground shadow; handle resize. Output ONLY the complete
HTML file in a single code block.

Fue la más pesada de las cinco generaciones que funcionaron: 63 segundos y 7.023 tokens de salida. También fue el resultado más impresionante. El scroll mueve la cámara alrededor del objeto, y el material cambia de color en cada sección exactamente como se pidió:

También respetó la interpolación lerp amortiguada: el movimiento transmite esa sensación densa y cara de una web de agencia, no la de una presentación secuestrada por el scroll.

3. Fondo de gradiente fluido con GLSL

Create a single-file HTML page with a full-screen animated WebGL fluid
gradient background using a custom GLSL fragment shader with Three.js loaded
from a CDN. Requirements: slow-moving organic blobs blending deep blue,
purple and coral, driven by a time uniform and simplex-style noise in the
fragment shader; add subtle film grain in the shader; overlay a centered
glass card (backdrop blur) with a white headline "Ship Immersive Sites", one
subline, and two buttons; the animation must stay smooth on a laptop (single
quad, no postprocessing passes); handle resize. Output ONLY the complete HTML
file in a single code block.

31 segundos, 3.830 tokens y correcto al primer intento. La línea «single quad, no postprocessing passes» es la barrera de rendimiento: sin ella, los modelos suelen recurrir a EffectComposer y pases de bloom que hunden los fotogramas por segundo en GPU integradas.

4. Portfolio 3D con recorrido de cámara: el que se resistió

Create a single-file HTML page: a 3D portfolio using Three.js from a CDN.
Six floating project cards (rounded planes with placeholder gradient
textures and project titles rendered onto the card texture) arranged along
a gentle curve in 3D space. As the user scrolls, the camera flies forward
along the curve, bringing each card into focus one at a time; the camera
must keep the focused card fully in frame with comfortable margin and never
pass through a card; the focused card scales up slightly. Neighboring cards
stay partially visible for depth. Add subtle fog, a dark background, damped
scroll interpolation. Clicking a focused card opens a link. Handle resize.
Keep the code compact: reuse one card-building function, no comments.
Output ONLY the complete HTML file in a single code block.

Este necesitó tres ejecuciones y sigue sin estar listo para publicar. La captura explica por qué lo incluimos de todos modos: la tarjeta se renderiza, pero la cámara queda detrás de ella y el título se lee invertido. La primera ejecución superó a mitad de archivo nuestro límite de 16.000 tokens de salida. La segunda, ya con la línea «keep the code compact» —de ahí que esté en el prompt—, renderizó las tarjetas pero hizo pasar la cámara directamente a través de ellas. La tercera corrigió el recorte, pero perdió el vínculo entre la cámara y el scroll. La coreografía de una ruta de cámara junto con texturas individuales por tarjeta es realmente más difícil para los modelos que las escenas anteriores. Cuenta con una sesión de depuración o simplifica el diseño a una cuadrícula curva estática con estados hover.

5. Visor de producto interactivo

Create a single-file HTML page: an interactive 3D product viewer using
Three.js from a CDN. Center a stylized wireframe-free geometric product
stand-in (a beveled cube or capsule) on a pedestal. Right-side panel with
three color swatches and a metal/matte toggle that update the material live;
OrbitControls limited to horizontal rotation; soft three-point studio
lighting and a contact shadow. Keep the panel plain HTML/CSS overlaying the
canvas. Handle resize. Output ONLY the complete HTML file in a single code
block.

Correcto al primer intento: 66 segundos y 7.719 tokens. Las muestras y el interruptor metal/mate actualizan el material en tiempo real, y el modelo añadió un detalle no solicitado: una nota al pie que explica que la rotación está limitada al eje horizontal para mantener el producto encuadrado.

6. Web corporativa 3D de una sola página

Create a single-file HTML page: a one-page site for a design studio with
Three.js from a CDN. Sections: hero, services, work, contact. A single
low-poly abstract shape floats top-right of the hero and slowly rotates;
as the user scrolls into each section the shape morphs its scale and color
to match that section accent. Sections otherwise use clean HTML/CSS
(no heavy 3D per section) so the page stays fast. Smooth scroll, mobile
friendly, handle resize. Output ONLY the complete HTML file in a single
code block.

62 segundos y 7.419 tokens. El modelo inventó el nombre del estudio, construyó las cuatro secciones y colocó un icosaedro low-poly flotante exactamente donde se indicó. Nuestro primer intento con este prompt topó con un límite de salida de 8.000 tokens y llegó truncado. Si llamas a un modelo mediante API, fija un límite de salida de 16.000 tokens o más para prompts de páginas completas.

Qué ocurrió al ejecutarlos

Tres ejecuciones en un mismo modelo por prompt son una anécdota, no un benchmark. Tómatelo como una comprobación puntual del estado de la generación de 3D a partir de prompts a mediados de 2026. Notas de metodología: claude-sonnet-5 mediante su API el 17 de julio de 2026, configuración predeterminada, sin prompt de sistema y resultados renderizados en Chrome de escritorio a 1280×720 en un MacBook con Apple silicon. En las ejecuciones exitosas, el modelo eligió por su cuenta la compilación UMD r128 de Three.js desde un CDN público.

El único defecto visual entre las cinco páginas funcionales está en el prompt 1: el subtítulo se asienta sobre la zona más luminosa de la galaxia y resulta casi ilegible. Bastó una línea de seguimiento para arreglarlo: 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 de estas pruebas: la escena 3D en sí suele salir bien; el presupuesto de iteración se va en tipografía, contraste de las capas superpuestas y, en el caso del portfolio, coreografía de cámara.

El coste no importa a esta escala. La prueba completa —nueve generaciones, incluidos los reintentos del portfolio, y unos 46.000 tokens de salida— costó bastante menos de un dólar. La ejecutamos mediante AIReiter, que revende acceso a la API de Claude por una quinta parte del precio oficial por token; incluso una sesión de iteración obstinada sigue costando calderilla.

Cómo redactar tu propio prompt para una web 3D

Los prompts que superaron la prueba comparten cinco ingredientes. Mantén los cinco y aumentarán mucho tus opciones de acertar al primer intento.

1. Un único elemento central en la escena. Una galaxia, un torus-knot, un campo de gradiente. En nuestras pruebas y en la mayoría de ejemplos compartidos por la comunidad, los prompts que piden varias funciones 3D inconexas en una misma página son los que hacen que los modelos empiecen a omitir requisitos.
2. Un motor de movimiento. Puede ser el tiempo (slowly rotates, driven by a time uniform) o el scroll (as the user scrolls, the camera orbits). Indica cuál de forma explícita: decir solo «animated» deja que el modelo elija algo aburrido. Una lección del fallo del portfolio: controlar con scroll un objeto es fiable; controlar con scroll una cámara a lo largo de una ruta entre objetos es donde empiezan los problemas.
3. La interacción. OrbitControls para rotar arrastrando funcionó en todas las ejecuciones exitosas de nuestra prueba. Si superpones texto sobre el canvas, pide pointer-events: none en el contenedor de la capa y pointer-events: auto en los botones; de lo contrario, la capa de texto capturará los arrastres y clics destinados a la escena.
4. El contenido de la capa superpuesta. Especifica el titular exacto entre comillas. Los modelos rellenan el copy no definido con eslóganes genéricos que tendrás que sustituir de todos modos.
5. Límites de rendimiento y tamaño. Un número de partículas, single quad, no postprocessing o low-poly mantienen la página rápida; keep the code compact ayuda a que la salida no supere 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 orienta al modelo hacia 3D real en vez de una imitación plana hecha con CSS: Three.js, particle system, GLSL fragment shader, OrbitControls, scroll-driven camera, torus-knot, lerp, fog, point lights. Estas palabras importan porque corresponden a nombres reales de API: el modelo escribe para bibliotecas que vio durante su entrenamiento en vez de improvisar.

El atajo de pegar código

Para efectos que van más allá de lo que puedes describir, hay una segunda técnica. Busca un efecto Three.js terminado en CodePen, pega el código sin procesar en tu herramienta de IA y pide solo Add this 3D animation to the hero. El modelo adapta el snippet a tu stack —componentes de React, configuración de compilación y estructura de secciones—, que suele ser la parte tediosa. Builder.io documentó este truco con una animación de planeta de 50.000 partículas, incluida la misma solución de capas con pointer-events: none, en su guía.

Es la vía con mayor retorno cuando buscas el acabado de una web premiada: las matemáticas del shader vienen de una persona que las ajustó, y la IA solo se encarga de la integración.

Qué herramientas aceptan estos prompts

Los seis prompts anteriores no dependen de una herramienta concreta: funcionarán con cualquier plataforma que escriba y previsualice HTML/JS. Las diferencias están en el formato de salida y la propiedad del código, comprobado el 17 de julio de 2026:

Dos de ellas merecen una nota. La propuesta de VULK es generar código real de React Three Fiber —escenas WebGL interactivas en lugar de una cabecera de vídeo en bucle—, y sus sitios de muestra lo respaldan. Código real frente a una cabecera de vídeo: esa es precisamente la diferencia que conviene comprobar antes de pagar por cualquier «constructor de webs 3D con IA». Y si prefieres explorar prompts antes que escribirlos, MotionSites mantiene una biblioteca categorizada para Lovable, Bolt, Cursor y Claude. Una parte se puede copiar gratis; el resto requiere suscripción:

Hasta dónde llegan los prompts

En los hilos de r/lovable y r/web_design se repite una pregunta: ¿puede el prompt adecuado reproducir sitios como mont-fort.com o las páginas de laboratorio de Noomo Agency? La respuesta honesta es no, no solo a partir de un prompt. Esos sitios se construyen con modelos GLTF personalizados, iluminación dirigida artísticamente y shaders a medida: activos que un prompt de texto no puede conjurar. Lo que sí consigue un prompt es la mecánica de esas webs —cámaras controladas por scroll, fondos con shaders, movimiento amortiguado— usando geometría de marcador de posición. Sustituirla por un archivo de modelo real reduce parte de la distancia, pero su iluminación, materiales y alternativas para móvil siguen siendo trabajo de diseño real. El fallo del portfolio con recorrido condensa la misma lección: cuanto más se acerca un prompt a escenas coreografiadas con varios objetos, más iteración humana necesita.

Tres patrones explican la mayoría de generaciones rotas, y cada uno tiene una solución de una línea:

• Pantalla negra, sin errores a la vista. Lo habitual es una incompatibilidad entre importaciones de módulos ES y CDN. Prompt 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 eligieron sin indicación nuestras ejecuciones de prueba y sigue funcionando; las versiones más recientes de Three.js eliminaron la vía UMD, así que fijarla evita el desajuste).
• Fluida en escritorio, con tirones en móvil. El número de partículas era razonable para un portátil, pero no para un teléfono. Prompt de corrección: Halve the particle count on screens narrower than 768px and cap devicePixelRatio at 2.
• La escena 3D funciona, pero no se puede clicar nada en la página. El canvas o una capa superpuesta está capturando los eventos. Prompt 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 de una tarjeta 3D aparece invertido. La cámara está mirando la cara trasera del plano. Prompt 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 webs 3D?

Sí. Los seis de este artículo están completos y se pueden copiar gratis; DocsBot y el plan gratuito de MotionSites ofrecen más. Las bibliotecas de pago compran sobre todo volumen y variedad ya probada, no una clase distinta 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 React. Mantén todo lo demás: el elemento de la escena, el motor de movimiento, la interacción y el límite de rendimiento se trasladan directamente.

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

No para generarla, aunque sí 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 vez de regenerar a ciegas.

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

Para un efecto en un solo archivo o una sección hero, Claude directamente: conservas el código fuente y pagas por token. Para una web alojada con backend, Lovable o Bolt en sus planes gratuitos, o VULK si buscas específicamente código React Three Fiber exportable.

¿Un hero 3D perjudicará al rendimiento o al SEO?

Solo si se lo permites. Limita el 3D a una escena, aplica las medidas para móvil anteriores y mantén el titular y el texto en HTML real sobre el canvas, como hacen los seis prompts. Los rastreadores leen la capa de texto, y las Core Web Vitals dependen principalmente de todo lo demás que cargue la página.