Antes abría Blender y no sabía ni por dónde empezar. Ahora puedo conectarlo con Claude Code, explicarle qué quiero hacer y revisar los cambios directamente en la escena. Eso no significa que todo salga perfecto a la primera. Significa que puedo avanzar sin tener que aprender cada menú antes de empezar.
El proyecto es una web de escapadas de naturaleza con un colibrí en 3D como protagonista. El ave aletea continuamente y cambia de posición mientras bajamos por la página. Al final, la web queda publicada con una dirección que podemos compartir.
Lo interesante no es solo conseguir que el colibrí se mueva. Hay que conectar las herramientas, preparar un modelo que funcione en el navegador, integrarlo sin estropear el diseño y comprobar que siga viéndose bien en una pantalla pequeña.
También hay una decisión importante por el camino: cuándo dejar de insistir con un modelo generado desde cero y usar uno que ya venga trabajado. En mi caso, esa decisión mejoró bastante el resultado.
Tabla de contenido
- 🧩 Qué hace cada herramienta en esta web 3D
- 🔌 Conectar Claude Code con Blender mediante MCP
- 🐦 Crear primero el colibrí quieto y después animarlo
- 📦 Preparar el modelo para el navegador: del proyecto al GLB
- 🎨 Preparar el diseño y los recursos antes de pedir la página
- 🌐 Construir la web 3D con Claude Code
- 🔄 Cuándo conviene usar un modelo 3D ya trabajado
- 🔍 Revisar el GLB, no solo el aspecto en Blender
- 🛠️ Integrar el nuevo colibrí sin reconstruir la página
- 🚀 Preparar el ZIP y publicar la web en Hostinger
- 📱 Comprobar el resultado en escritorio y móvil
- 🌿 El resultado y los recursos para seguir creando
🧩 Qué hace cada herramienta en esta web 3D
Para seguir este proceso necesitamos Claude Code y Blender. Cada uno tiene una función distinta, y entender esa separación ayuda a pedir las cosas con más claridad.
- Blender: es donde trabajamos el objeto, sus materiales y su animación.
- Claude Code: recibe las instrucciones, se comunica con Blender y construye los archivos de la página.
- MCP for Blender: es el complemento que permite conectar ambos programas.
- Three.js: es la librería que utiliza la web para trabajar con el objeto 3D en el navegador.
- Hostinger: es donde publicamos los archivos de la web estática.
Yo sigo haciendo los pedidos desde el chat. No necesito editar código para cada ajuste, pero sí necesito abrir Blender o la página y comprobar qué pasó. La respuesta de Claude no sustituye la revisión del resultado.
Además, hay dos movimientos diferentes. Uno pertenece al modelo: el aleteo, la flotación del cuerpo y el movimiento de la cola. El otro pertenece a la página: el recorrido que hace el colibrí al desplazarnos entre secciones. Los vamos a preparar por separado.
🔌 Conectar Claude Code con Blender mediante MCP
La conexión se prepara con las instrucciones de instalación de MCP for Blender. Conviene entrar directamente en la sección de inicio rápido y seguir la opción correspondiente al equipo.
Hay una parte que se instala en Blender y otra que permite que Claude se comunique con él. No basta con tener los dos programas abiertos: necesitamos ese puente funcionando.
Instalar y configurar la conexión
En la página del proyecto aparecen las instrucciones para Mac y Windows. Copien el comando de su sistema, abran la terminal y ejecútenlo. El instalador prepara uv, que permite arrancar el servidor, y ofrece la selección de la aplicación que queremos conectar. En este caso elegimos Claude Code.
Si ya tienen uv instalado, también está disponible el comando corto de configuración. Es mejor seguir esas instrucciones que reutilizar a ciegas un comando pensado para otro sistema.
Después abrimos Blender y entramos en Preferencias > Complementos. Buscamos MCP for Blender y comprobamos que esté activado. Volvemos a la escena, abrimos el panel lateral con la tecla N y entramos en la pestaña del complemento.
Ahí tiene que estar iniciado el servidor. Si aparece el botón para iniciarlo, lo activamos. Blender debe permanecer abierto mientras trabajamos con Claude: si lo cerramos, ya no hay una escena disponible donde aplicar los cambios.
Preparar la carpeta del proyecto
Creo una carpeta para guardar la web y la abro en Claude Code. La conexión del proyecto queda descrita en un archivo llamado .mcp.json. Ahí se indica qué servidor debe iniciarse y cómo encontrar uvx.
No hace falta empezar pidiendo un personaje complejo. Primero conviene demostrar que la conexión realmente puede modificar algo sencillo.
La prueba del cubo turquesa
Utilizo el cubo que aparece al crear una escena de Blender y envío una instrucción pequeña:
Conecta este proyecto con Blender mediante MCP y verifica la conexión cambiando el material del cubo a turquesa.
La comprobación está en Blender, no en el mensaje de confirmación. Si el cubo cambia de color, ya tenemos una prueba visible de que las instrucciones están llegando.
Esta prueba separa dos posibles problemas. Si el cubo no cambia, todavía estamos resolviendo la conexión. Si cambia, podemos pasar al modelado sin mezclar la instalación con la calidad del personaje.
🐦 Crear primero el colibrí quieto y después animarlo
Con la conexión funcionando, el primer intento es crear un colibrí desde cero. Pero no le pido de entrada el modelo, la animación, la exportación y la web completa. Primero quiero revisar la forma.
La petición combina el sujeto, el aspecto y el uso que va a tener:
Crea en Blender un colibrí elegante, con proporciones naturales y plumas definidas. Usa turquesa y azul iridiscente con pequeños detalles violetas. Será el protagonista de una web de naturaleza y debe funcionar visualmente de cerca. Prepara primero una versión quieta con las alas abiertas y guarda el proyecto.
Decir que será el protagonista de una web da contexto. No estamos preparando un objeto que apenas se verá al fondo: va a ocupar una parte importante de la composición y su forma tendrá bastante presencia.
También pido que lo guarde. Tener una versión anterior permite probar cambios sin perder el punto de partida. Si la siguiente modificación no mejora el resultado, podemos volver atrás.
Una animación breve que pueda repetirse
Cuando termina el modelo quieto, paso al movimiento. Le pido un aleteo rápido y natural en bucle, una flotación ligera del cuerpo y movimientos suaves de la cola. Quiero comprobarlo en Blender antes de llevarlo a la web.
Que esté en bucle significa que la secuencia vuelve a empezar y puede seguir funcionando. No necesitamos animar un vuelo largo atravesando toda la escena, porque la posición del colibrí se controlará después desde la página.
Separar estas dos cosas simplifica la revisión. Podemos preguntarnos si las alas se mueven bien sin preocuparnos todavía por dónde aparecerá el personaje en cada sección.
Claude también puede dejar un vídeo corto para revisar el aleteo. Ese archivo sirve para comprobar el movimiento y el encuadre. Si las alas se cortan, pedimos que abra un poco la cámara.
Pero hay una distinción importante: ese vídeo de prueba no es el personaje que vamos a insertar en la web. Para eso necesitamos exportar el objeto 3D con su animación.
📦 Preparar el modelo para el navegador: del proyecto al GLB
El archivo de Blender nos sirve para seguir editando. La versión destinada a la página debe prepararse en un formato que podamos cargar en el navegador, como glTF o GLB.
En esta parte le pido a Claude que conserve el aleteo, los materiales, el detalle y los colores, pero con un peso razonable para la web. No se trata simplemente de guardar otro archivo: queremos mantener lo que hace reconocible al personaje.
La separación queda así:
- Proyecto de Blender: es la versión editable que conservamos para futuros cambios.
- Archivo exportado para la web: es la versión que cargará la página y que puede reunir el objeto, los materiales y la animación.
- Vídeo de revisión: es una referencia para comprobar el movimiento, no el recurso 3D final.
Conviene pedir explícitamente que se mantenga la animación al exportar. El objetivo no es tener únicamente un colibrí que se vea bien quieto, sino el mismo personaje con su aleteo funcionando.
Y todavía no damos esta fase por terminada. Que algo se vea bien dentro de Blender no garantiza que se vea igual en el navegador. Esa diferencia será importante cuando probemos el segundo modelo.
🎨 Preparar el diseño y los recursos antes de pedir la página
Para la parte visual parto de una base de diseño y unos recursos preparados. La adapto a AIRA, una marca ficticia de escapadas de naturaleza.
La base describe la composición y el recorrido de la página. Los fondos, los textos y los colores están separados. Esto permite conservar una estructura que ya me interesa y cambiar el contenido para este proyecto.
No le estoy pidiendo a Claude que invente toda la dirección visual al mismo tiempo que integra el modelo. Le estoy dando materiales concretos con los que trabajar.
Antes de construir la web, dejo preparados:
- La base con la composición y el recorrido entre secciones.
- Los textos de la marca y de cada bloque.
- La paleta de colores.
- Las imágenes de fondo y los elementos vegetales.
- El modelo 3D exportado.
Si ustedes quieren una web de otro tema, este es el momento de cambiar imágenes y contenido. Es más claro definir esos recursos antes de construir que pedir una página y después intentar transformarla por completo.
Este tipo de bases también las preparo para Dínamo Sites, donde reúno diseños que utilizo como punto de partida para estos proyectos.
La idea no es que todas las webs terminen siendo iguales. La base ayuda a mantener una composición y un recorrido, mientras los recursos y el protagonista cambian la identidad del resultado.
🌐 Construir la web 3D con Claude Code
Con los archivos ordenados y el modelo exportado, ahora sí pido la página. La instrucción señala qué base debe usar, qué tiene que conservar y qué debe sustituir.
Construye la web de AIRA usando la base de la carpeta de recursos. Mantén su composición, tipografía y animaciones, e incorpora nuestro colibrí con los textos, fondos y paleta preparados. Adapta únicamente lo necesario para el modelo y deja una web estática lista para publicar en Hostinger.
Claude crea los archivos de la página e integra el modelo con el recorrido. En este proyecto utiliza Three.js para trabajar con el objeto 3D dentro del navegador.
La petición de mantenerla estática también importa. Estamos preparando una web con HTML, CSS y JavaScript que no necesita un servidor de una aplicación Node para publicarse.
Comprobar dos comportamientos distintos
Abro la página en Chrome y recorro sus secciones. Compruebo, por un lado, que el aleteo se repita y, por otro, que el colibrí cambie de posición con el desplazamiento.
Que funcione una cosa no demuestra que funcione la otra. El ave puede moverse correctamente, pero quedarse en el mismo sitio. O puede seguir el recorrido de la página y haber perdido la animación de las alas.
En el primer intento consigo integrar el modelo. El problema es que, sinceramente, el colibrí queda horrible. La parte técnica funciona, pero la calidad visual no me convence para un elemento con tanto protagonismo.
Podría seguir ajustando forma y plumas, gastar un montón de tokens y probar nuevas versiones. Pero el objetivo acá es avanzar con una web que se vea bien. Así que cambio de estrategia.
🔄 Cuándo conviene usar un modelo 3D ya trabajado
Para el segundo intento utilizo el colibrí de huykhoi2407 en CGTrader. En su ficha podemos revisar el autor, los archivos disponibles y que se trata de un modelo animado.
No estoy empezando otra vez toda la web. Estoy sustituyendo el recurso que aparece dentro de ella. La composición, los fondos y el recorrido siguen siendo útiles.
Esta es una de las decisiones más prácticas del proceso: crear con IA no obliga a generar desde cero cada elemento. También podemos usarla para preparar e integrar un recurso que ya tiene el nivel de detalle que necesitamos.
Trabajar sobre una copia y separar las pruebas
El archivo descargado se puede abrir en Blender. Le pido a Claude que abra una copia mediante MCP, sin ejecutar los scripts del archivo, y que conserve el original.
Después añado los objetivos de exportación:
- Preparar un GLB para la web que conserve el aleteo.
- Usar texturas de hasta 4096 píxeles.
- Buscar un peso cercano a 5 MB.
- Guardar las pruebas en una carpeta aparte.
- No modificar todavía el sitio principal.
El peso y el tamaño de las texturas son objetivos para esta preparación, no una garantía de que cualquier modelo quedará perfecto con esos valores. Hay que comprobar el resultado.
La frase “no cambies la web” delimita el trabajo. Ahora estamos evaluando una exportación, no autorizando una nueva versión de toda la página.
Con el original conservado y las pruebas separadas, podemos comparar sin confundir cuál es el archivo descargado, cuál es el optimizado y cuál está integrado en el sitio.
🔍 Revisar el GLB, no solo el aspecto en Blender
Después de exportar, reviso el modelo en Blender para comprobar sus materiales y el aleteo. Luego abro una prueba del GLB en Chrome. Necesitamos las dos comprobaciones.
Un render de Blender y un GLB no siempre se ven iguales. En este caso, el modelo tiene pelo por partículas que no pasa directamente a ese formato. Por eso no basta con aprobar su aspecto dentro del programa.
Lo que nos interesa es la versión que realmente cargará la web. Ahí reviso si el personaje mantiene una apariencia convincente y si el movimiento sigue funcionando.
Esta comprobación evita elegir únicamente por tamaño de archivo. Un GLB más pequeño no resuelve nada si pierde demasiado detalle o deja de verse como necesitamos.
La evaluación tiene que equilibrar tres cosas:
- Aspecto: que el cuerpo, las plumas y los colores funcionen en el navegador.
- Movimiento: que el aleteo se conserve después de exportar.
- Peso: que el recurso tenga un tamaño razonable para este proyecto.
No estamos buscando que una captura de Blender sea bonita y nada más. Estamos preparando un personaje para otro entorno. La prueba en Chrome es parte de la preparación, no un trámite posterior.
🛠️ Integrar el nuevo colibrí sin reconstruir la página
Cuando la versión optimizada me convence, le pido a Claude que la integre en el sitio principal. La instrucción vuelve a ser concreta: usar el colibrí rojo de la carpeta de pruebas, conservar el aleteo y mantener el recorrido existente.
También le pido que guarde antes la versión anterior y que abra una copia del modelo en Blender mediante MCP, con los scripts automáticos desactivados, para poder revisarlo.
No hace falta reconstruir toda la página para cambiar su protagonista. Conservamos el diseño y sustituimos el recurso 3D. Esa separación evita rehacer partes que ya estaban funcionando.
Actualizo Chrome y recorro otra vez la web. El cambio se nota en las plumas y en los colores del pecho. Pero además de apreciar esa mejora, compruebo que el ave siga aleteando y complete todo el recorrido.
Ajustar el personaje dentro de la composición
El nuevo modelo tiene más presencia, pero está grande y en algunos momentos las alas se cruzan con los textos. También quiero cambiar la tipografía y dar más color a las secciones claras.
En lugar de pedir algo abierto como “mejora el diseño”, describo los cambios:
- Cambiar la tipografía a Sora y usar peso 700 en los títulos.
- Bajar un poco el colibrí para despejar el título sin reducir su tamaño.
- Dar a las secciones claras un tono agua suave más marcado.
- Mantener la composición, las imágenes y todo el movimiento.
El personaje puede moverse por delante de elementos de la composición, pero hay que revisar cómo afecta eso a la lectura. No quiero resolver cualquier cruce haciéndolo diminuto: quiero acomodarlo mejor.
Por eso importa observar varios momentos del aleteo. Con las alas recogidas puede parecer que hay espacio de sobra y, un instante después, una de ellas puede atravesar un título o un botón.
La integración no termina cuando el archivo carga. Termina cuando el personaje funciona junto con el contenido de la página.
🚀 Preparar el ZIP y publicar la web en Hostinger
Con la página lista, le pido a Claude una copia de producción para Hostinger. La condición principal es que index.html quede en la raíz del ZIP, acompañado de las carpetas necesarias.
También solicito una nota con el autor y la licencia del modelo. Esa información debe formar parte de la preparación del recurso, no perderse al pasar del archivo descargado al sitio publicado.
Antes de subirlo, abro el paquete y compruebo que contiene la página y sus recursos. No queremos publicar únicamente el HTML y dejar fuera el colibrí o las imágenes.
Los pasos de publicación
- Entramos en el panel de Hostinger y abrimos la sección de sitios web.
- Elegimos crear una web y seleccionamos la opción PHP y HTML.
- Continuamos con la configuración manual.
- Elegimos un dominio temporal para publicar ahora.
- Seleccionamos la opción de subir archivos y cargamos el ZIP.
- Esperamos a que termine la carga y creamos el sitio.
- Abrimos la página desde la dirección pública que nos ofrece el panel.
Elegimos PHP y HTML porque esta página utiliza HTML, CSS y JavaScript y no necesita un servidor de una aplicación Node. No hay que añadir una infraestructura distinta a la que requiere el proyecto.
Si quieren publicar sus webs con este servicio, pueden usar mi enlace de descuento de Hostinger, con el código RODRIGO aplicado. Si contratan desde ahí, también apoyan mi contenido.
Una vez procesados los archivos, ya tenemos una dirección pública. Pero todavía falta abrirla y revisar la versión publicada completa.
📱 Comprobar el resultado en escritorio y móvil
Primero recorro todas las secciones desde el enlace público. Compruebo que carguen los fondos, que aparezca el colibrí y que el aleteo y el desplazamiento sigan funcionando.
Después abro las herramientas de Chrome y activo la vista móvil. Para este ejemplo utilizo un ancho de 390 píxeles.
No es una prueba en un teléfono real. Es una vista que permite comprobar cómo se reorganiza la página cuando hay menos espacio disponible. Esa diferencia conviene tenerla clara.
En una pantalla angosta hay menos margen para el modelo. Reviso el título, los textos laterales y los botones en distintas posiciones de la página y durante varios momentos del aleteo.
La revisión final incluye estas preguntas:
- ¿Se leen los títulos sin que el personaje los tape demasiado?
- ¿Los textos y botones mantienen su espacio?
- ¿Las alas provocan cruces que no se notan cuando están recogidas?
- ¿El colibrí conserva su movimiento en todas las secciones?
- ¿Los fondos y las imágenes aparecen también en la versión publicada?
Si encuentro un problema, vuelvo a Claude y pido ese ajuste concreto. Después preparo la nueva versión y la publico otra vez. No necesito reiniciar el proyecto para corregir una posición o un cruce puntual.
🌿 El resultado y los recursos para seguir creando
Pueden recorrer la web 3D de AIRA para explorar el resultado: un colibrí animado que acompaña el desplazamiento entre secciones de naturaleza.
El proceso completo va de una instrucción en Claude a un cambio en Blender, de ahí a un modelo probado en el navegador y, finalmente, a una página publicada. Lo que hace manejable el trabajo es revisar cada etapa antes de sumar la siguiente.
Mi conclusión no es que Claude vaya a crear siempre el modelo perfecto. El primer colibrí demuestra justamente lo contrario. Lo útil es poder probar, detectar qué no funciona y cambiar de estrategia sin tirar todo lo demás.
Para seguir trabajando con instrucciones para proyectos, también tienen los prompts profesionales de Primera App. Y si quieren compartir este tipo de procesos, pueden unirse a mi comunidad de creación de apps con IA.
No hace falta dominar Blender para empezar, pero sí mirar con criterio lo que estamos construyendo. La conexión abre posibilidades; guardar versiones, probar la exportación y revisar la web es lo que permite convertir esas posibilidades en un resultado que podamos compartir.
Aviso: este artículo puede incluir enlaces promocionales. Si realizas una compra, puedo recibir una comisión sin costo adicional para ti.
