Vibe Skills

Explora cientos de habilidades listas para usar para Claude, Cursor y más.

Envía un juego 3D en Vercel para el domingo por la noche: El manual de despliegue de 48 horas

Puedes pasar de una noche de viernes en blanco a un enlace tu-juego.vercel.app para la cena del domingo. La pila es Three.js, Cursor, una habilidad de IA de Vibe Skills y el nivel gratuito de Vercel. Costo total del fin de semana: $0. Infraestructura total que tienes que vigilar: también cero.

Esto no es "construir un prototipo en tu portátil y darlo por terminado". Es una URL pública que cualquiera en el mundo puede abrir en un navegador, con HTTPS, caché de borde y un dominio personalizado si lo deseas. La habilidad de IA envía el andamiaje de Three.js y un vercel.json funcionando. Cursor se encarga del bucle de iteración. Vercel se encarga del despliegue. Tú te encargas del diseño.

Esta guía es para desarrolladores independientes, codificadores de ambiente, participantes de hackathones y cualquiera que esté harto de pestañas de localhost:5173 a medio terminar. Cubrimos por qué esta pila funciona, la anatomía del despliegue de 48 horas, cinco habilidades de juegos 3D creadas para el flujo de trabajo y el paso a paso de viernes a domingo.

Vibe Skills

Explora cientos de habilidades listas para usar para Claude, Cursor y más.

Explorar Habilidades

Comenzar Gratis Ahora

Por qué Vercel + Three.js + Habilidades de IA es la pila para desarrolladores solitarios

Vercel es el objetivo de despliegue más vago posible para un juego Three.js. Envía a GitHub, Vercel se da cuenta, compila el proyecto y te devuelve una URL en 60 segundos. No hay servidor que aprovisionar, ningún archivo Docker, ninguna configuración de NGINX, ninguna configuración SSL. El paquete de Three.js son solo activos estáticos HTML, JS y WebGL, que es exactamente lo que la red de borde de Vercel fue construida para servir.

El nivel gratuito cubre un lanzamiento de fin de semana cómodamente:

100 GB de ancho de banda por mes. Una compilación de Three.js de 5 MB con 10.000 reproducciones son 50 GB. Te quedarás sin fin de semana antes de quedarte sin ancho de banda.
Despliegues estáticos ilimitados con HTTPS y un subdominio *.vercel.app.
Soporte de dominio personalizado en el nivel gratuito - trae tu propio nombre-juego.com si tienes uno, de lo contrario, la URL gratuita vercel.app es compartible en todas las plataformas sociales.
Despliegues de vista previa para cada commit - cada envío obtiene su propia URL, por lo que puedes compartir una compilación con un amigo y seguir iterando sin romperla.

Añade una habilidad de IA de Vibe Skills y el código repetitivo desaparece también. La configuración de la escena Three.js, el controlador del jugador, el pipeline de compilación y un vercel.json listo para Vercel se generan en un comando. Luego, Cursor convierte el resto del fin de semana en un chat donde describes el juego que quieres y ajustas la salida. Esa es la pila completa: una habilidad de mercado para la base, un editor de IA para la iteración y Vercel para el despliegue. Solitario, gratuito y rápido.

Vibe Skills

Explora cientos de habilidades listas para usar para Claude, Cursor y más.

Explorar Habilidades

Comenzar Gratis Ahora

La anatomía de 48 horas: Concepto del viernes a despliegue del domingo

Cada envío de fin de semana que realmente sale en vivo sigue los mismos pasos. El truco es planificar el despliegue el viernes, no el domingo por la tarde, para que las últimas seis horas se dediquen a pulir en lugar de luchar contra un error de compilación.

Fase	Bloque de tiempo	Qué haces	Qué se envía al final de la fase
Fase 1: Concepto	Viernes 18:00 - 22:00	Elegir género, escribir documento de diseño de 1 página, instalar habilidad de juego 3D de Vibe Skills, enviar inicio a GitHub, conectar a Vercel	URL `nombre-juego.vercel.app` en vivo con la escena de código repetitivo
Fase 2: Construcción	Sábado 9:00 - 20:00	Reemplazar marcador de posición con tu mecánica principal, añadir 1 nivel, hacer funcionar el estado de ganar/perder	Compilación jugable en la misma URL de Vercel, desplegada automáticamente en cada envío
Fase 3: Pulido	Domingo 10:00 - 16:00	Sonido, "jugo", pop-up de tutorial, pase de errores, verificación de rendimiento en móvil	Una compilación que no falla en los primeros 60 segundos en ningún dispositivo
Fase 4: Lanzamiento	Domingo 16:00 - 20:00	Configurar dominio personalizado (opcional), grabar GIF, escribir página de itch.io, publicar el enlace	URL pública + página de itch.io + publicación de lanzamiento en redes sociales

La razón por la que esto funciona es el envío del viernes a Vercel. Una vez que existe la URL, cada commit del sábado y domingo se despliega automáticamente. No hay "pánico de despliegue del domingo por la noche" porque el despliegue ya ocurrió el viernes y ha estado funcionando en piloto automático todo el fin de semana.

Cómo es "codificar con ambiente" un juego 3D en Vercel

Codificar con ambiente significa describir lo que quieres en inglés claro y dejar que un editor de IA escriba el código, y luego iterar sobre la salida. Para un juego Three.js en Vercel, el bucle es inusualmente limpio: cada cambio en Cursor está a un pnpm dev de la retroalimentación local, luego a un git push de una URL de vista previa en vivo, y luego se despliega automáticamente a producción en main.

Un fin de semana de juego en Vercel codificado con ambiente se ve así:

Abre la carpeta de inicio de la habilidad en Cursor.
Describe una característica en el chat: "doble salto si se presiona espacio dos veces en 200 ms".
Cursor edita el archivo del controlador. Guarda. pnpm dev se recarga. Sientes el salto en el navegador.
Si se siente bien, git push. Vercel compila una URL de vista previa. Envíala a un amigo.
Fusiona a main cuando la sensación esté bloqueada. La URL de producción se actualiza en 60 segundos.

La IA hace la escritura. Vercel hace el despliegue. Tú haces la sensación y el diseño.

5 Habilidades de juegos 3D de IA que lo hacen posible en Vibe Skills

Estas habilidades están creadas para el flujo de trabajo de fin de semana Vercel + Three.js + Cursor. Cada una viene con un proyecto Three.js basado en Vite, un vercel.json que funciona, un pnpm build que produce un paquete estático que Vercel puede servir desde el borde, y una ruta de despliegue probada. Todas están en la categoría Juegos 3D en Vibe Skills.

1. Inicio de juego Three.js + Vercel

La opción predeterminada. Genera una escena Three.js con un controlador de jugador, cámara en tercera persona, configuración de iluminación, skybox y un plano de tierra con colisiones. Viene con un vercel.json que establece las cabeceras de caché correctas para los paquetes de activos de Three.js. pnpm dev se ejecuta localmente; un clic en el panel de control de Vercel conecta el repositorio de GitHub y tienes una URL en vivo.

Mejor para: cualquier género excepto 2D puro. Usa esto si aún no sabes lo que estás construyendo.

2. Caminante Vercel en primera persona

Un controlador pulido en primera persona (WASD + bloqueo de puntero de ratón + gravedad + sprint + salto) con ganchos para pasos, movimiento de cabeza y un vercel.json que maneja correctamente las cabeceras CSP de bloqueo de puntero. Este detalle confunde a muchos desarrolladores solitarios en producción. La habilidad lo resuelve por ti.

Mejor para: simuladores de caminar, prototipos de terror, juegos narrativos, exposiciones de museos.

3. Kit de tirador de arena para navegador

Una arena de arriba hacia abajo (controlador de doble stick, generador de oleadas, IA básica de enemigos, sistema de proyectiles, HUD de puntuación) con una compilación ajustada para Vercel que comprime activos, divide el código de la IA y carga música de forma diferida. Se incluyen ganchos multijugador; el fin de semana se envía un jugador individual.

Mejor para: tiradores arcade, bullet hell, participaciones en jams que necesiten cargar rápido en móvil.

4. Plataforma de rompecabezas Vercel

Un plataformas en tercera persona (salto variable, tiempo de coyote, detección de salientes), puntos de control, tres niveles de sustitución que puedes editar en Blender o en código, y un bucle de reaparición. El vercel.json está configurado para recargas de nivel instantáneas con caché de borde, por lo que las pruebas de juego se sienten ágiles en un teléfono.

Mejor para: plataformas de rompecabezas, prototipos de parkour, experimentos de diseño de niveles.

5. Sandbox de conducción Vercel

Sensación arcade de conducción (curva de aceleración, física de derrape, retardo de cámara, terreno básico) con un coche de baja poligonización, una plantilla de pista y un despliegue sintonizado para mallas de terreno grandes. Las cabeceras HTTP preestablecidas hacen que el contexto WebGL se inicie más rápido en Safari, históricamente el navegador más lento para Three.js.

Mejor para: carreras arcade, conducción todoterreno, demostraciones de sensación de coche para un portafolio.

Explora todas las habilidades de juegos 3D en Vibe Skills →

Paso a paso de viernes a domingo

Este es el horario exacto. Ajusta la hora de inicio, pero mantén el orden. El hito clave es el despliegue de Vercel del viernes por la noche. Todo lo que venga después es iteración.

Viernes 18:00 - 20:00: Elegir habilidad, enviar a GitHub, conectar Vercel

Paso 1: Elige una habilidad de juego 3D en Vibe Skills. Navega por la categoría Juegos 3D, elige la que coincida con tu género e instala el inicio en una carpeta nueva. Ábrela en Cursor. Deberías ver una escena Three.js con un jugador en movimiento a las 19:00.

Paso 2: Crea un repositorio de GitHub y envíalo. git init, git remote add, git push. Usa el slug de tu juego como nombre del repositorio (crystal-runner, lunar-fishing, lo que sea). El nombre del repositorio a menudo se convierte en tu URL.

Paso 3: Conecta el repositorio a Vercel. Inicia sesión en Vercel con GitHub (gratis), haz clic en "Add New Project", elige el repositorio. Vercel detecta automáticamente Vite y configura la compilación. Haz clic en Deploy. En 60 segundos tienes una URL crystal-runner.vercel.app. Ábrela en tu teléfono. Compártela con un amigo. La barra de despliegue ahora es cero por el resto del fin de semana.

Viernes 20:00 - 22:00: Escribe el documento de diseño

Paso 4: Responde cinco preguntas en inglés claro. Abre una página de Notion o un archivo markdown dentro del repositorio y responde:

¿Qué hace el jugador cada 5 segundos? (el bucle principal)
¿Cuál es la condición de victoria y la condición de derrota?
¿Cuánto dura una partida o un nivel?
¿Cuál es el gancho visual? (paleta, iluminación, referencia de estilo)
¿Cuál es la característica única que hace que esto sea memorable en 30 segundos?

Paso 5: Haz commit del documento de diseño. Envíalo al repositorio. Vercel volverá a desplegar. La disciplina de enviar cada cambio significativo mantiene la URL en vivo honesta.

Sábado 9:00 - 13:00: Construye la mecánica principal

Paso 6: Reemplaza la mecánica de marcador de posición con tu única característica. Esta es la única característica que importa. Usa el chat de Cursor para describirla ("cuando el jugador recoja un cristal, congela a los enemigos cercanos durante 2 segundos y reproduce un tintineo"). Itera localmente con pnpm dev. Cuando se sienta bien, envía.

Paso 7: Conecta el estado de ganar/perder. Una compilación de 60 segundos con un final real se siente como un juego. Una compilación de 60 minutos sin final se siente como una demostración tecnológica. Siempre conecta la pantalla de victoria primero, luego todo lo demás.

Sábado 13:00 - 20:00: Añade un nivel

Paso 8: Construye un nivel pulido. No tres a medio hornear. Usa cubos de marcador de posición para la geometría. Usa el personaje de stock de la habilidad. Ajusta la sensación: altura del salto, retardo de la cámara, intensidad de las partículas.

Paso 9: Añade una superposición de tutorial. Una ventana emergente de dos frases "WASD para moverte, haz clic para disparar" al primer lanzamiento salva tu lanzamiento de jugadores confundidos que se rinden en 8 segundos. Cursor puede generar la superposición de React (o DOM vainilla) en 30 segundos.

Paso 10: Envía cada hora. Cada envío obtiene una URL de vista previa de Vercel. Envíala a un amigo. El bucle de retroalimentación es el arma secreta de esta pila.

Domingo 10:00 - 16:00: Pulido

Paso 11: Añade tres sonidos. Bucle de pasos, sonido ambiental, música de victoria. Incluso tres sonidos elevan drásticamente un prototipo de fin de semana. Fuentes gratuitas: freesound.org, opengameart.org.

Paso 12: Añade "jugo". Partículas al golpear, sacudida de pantalla al impactar, pop-ups numéricos en la puntuación. El "jugo" es lo que hace que una compilación de 48 horas parezca una de 6 meses en un GIF. Pídele a Cursor que añada una "sacudida de pantalla de intensidad 0.3 durante 150 ms cuando el jugador reciba daño" - escribirá el gancho de sacudida de cámara en cinco segundos.

Paso 13: Ejecuta un pase de Lighthouse. Abre la URL de Vercel en un teléfono y ejecuta Chrome DevTools Lighthouse. Los paquetes de Three.js suelen rondar los 400 KB a 1.5 MB. Si superas los 3 MB, pídele a Cursor que habilite la división de código en los módulos pesados. El gzip y brotli de Vercel se encargarán del resto.

Paso 14: Pase de errores. Juega tu URL en vivo cinco veces seguidas. Corrige cualquier cosa que falle dos veces. Ignora cualquier cosa que falle una vez.

Domingo 16:00 - 20:00: Lanzamiento

Paso 15: (Opcional) Configura un dominio personalizado. Si compraste un nombre-juego.com con antelación, añádelo en la configuración del proyecto de Vercel. SSL es automático. De lo contrario, la URL *.vercel.app está bien - tiene HTTPS, es compartible y carga en todas partes.

Paso 16: Graba un GIF de 15 segundos del mejor momento. Usa la URL en vivo, no localhost. El GIF es lo que se hace clic en Twitter, Bluesky y Reddit.

Paso 17: Crea una página de itch.io (opcional pero de alta palanca). Título, eslogan de una línea, tres capturas de pantalla, el GIF, controles, créditos y una incrustación de tu iframe de *.vercel.app (itch.io admite incrustaciones de iframes para juegos HTML5). Ahora tienes dos URL: una para compartir casualmente y otra para la audiencia de jugadores.

Paso 18: Publica el enlace. Twitter, Bluesky, tu Discord de comunidad de desarrolladores, r/IndieDev, r/threejs, r/WebGames. Siempre empieza con el GIF. Siempre incluye la URL. Si usaste una habilidad de Vibe Skills, menciónala en la publicación del devlog - otros desarrolladores que te sigan querrán el mismo inicio.

Cómo evitar los tres fallos de despliegue de Vercel más comunes

Tres cosas fallan en casi todos los fines de semana de Three.js + Vercel en solitario. Las tres son soluciones de 5 minutos si las detectas el viernes por la noche, y agujeros de conejo de 5 horas si las descubres el domingo a las 7 p.m.

Directorio de salida de compilación incorrecto. Vite por defecto usa dist/. Vercel detecta automáticamente Vite y usa dist/. Si personalizaste la salida, configura outputDirectory en vercel.json o en la configuración del proyecto o tu despliegue será un 404.
Rutas de activos que funcionan localmente pero fallan en producción. Usa rutas relativas o el ayudante import.meta.env.BASE_URL de Vite para cualquier archivo GLB, textura o audio cargado en tiempo de ejecución. Las rutas codificadas /assets/... suelen funcionar, pero las rutas absolutas de Windows copiadas y pegadas definitivamente no funcionarán.
Cabeceras CSP que bloquean el bloqueo de puntero o el contexto de audio. Los juegos en primera persona necesitan bloqueo de puntero. El audio necesita activación por gesto del usuario. Cualquier habilidad de la categoría Juegos 3D viene con el bloque headers correcto en vercel.json para manejar esto. Si escribiste el tuyo desde cero, copia la configuración del repositorio de la habilidad.

El despliegue funciona el viernes, por lo que cuando estas cosas fallan el domingo, siempre es debido a un cambio reciente. git bisect es tu amigo. Mejor aún: sigue enviando cada 30 minutos para que el commit fallido sea pequeño.

Preguntas Frecuentes

¿El nivel gratuito de Vercel realmente aguantará si mi juego recibe tráfico?

Sí, para un lanzamiento de fin de semana y las primeras semanas. El nivel gratuito te da 100 GB de ancho de banda al mes, lo que equivale a aproximadamente 20.000 reproducciones de una compilación de Three.js de 5 MB. Si alcanzas ese límite, el plan Pro cuesta 20 $/mes y te sube a 1 TB. Para un envío de fin de semana, gratis es más que suficiente. Las habilidades en Vibe Skills vienen con configuraciones de compilación que minimizan el tamaño del paquete, lo que estira el nivel gratuito aún más.

¿Puedo usar un dominio personalizado en el nivel gratuito de Vercel?

Sí. El nivel gratuito admite dominios personalizados con HTTPS automático. Compra un dominio (Namecheap, Cloudflare Registrar, Porkbun), apúntalo a Vercel y Vercel se encarga del certificado SSL. La configuración tarda unos 10 minutos. Si no tienes un dominio, la URL nombre-juego.vercel.app es lo suficientemente corta como para compartirla en cualquier plataforma.

¿Es esta pila adecuada para una entrega de jam de juegos?

Sí, y es una de las mejores pilas para entregas de jams. La mayoría de las jams (Ludum Dare, GMTK, js13k, GitHub Game Off) aceptan cualquier URL jugable en web. Un enlace *.vercel.app funciona exactamente como una URL de itch.io para los jueces. Muchos ganadores de jams envían a ambos: itch.io para la audiencia de jugadores, Vercel como la URL canónica rápida.

¿Necesito saber Three.js antes de empezar?

Necesitas suficiente JavaScript para leer lo que escribe Cursor y ajustar valores. No necesitas escribir Three.js desde cero. Las habilidades en Vibe Skills generan la configuración del motor, la cámara, el controlador y la configuración de compilación. Cursor se encarga del código de juego a partir de tus descripciones.

¿Qué pasa si mi compilación de Vercel falla el domingo a las 7 p.m.?

La causa más común es un error de TypeScript o una variable de entorno faltante. Vercel muestra el registro de compilación con la línea fallida resaltada. Un clic en el panel revierte al último despliegue que funcionó y lo promueve a producción. Como cada envío es un despliegue de vista previa, nunca estás a más de un commit de una compilación funcional. Por eso importa enviar cada 30 minutos el sábado y el domingo.

¿Puedo vender o modificar el código de una habilidad de juego 3D de Vibe Skills?

Sí. Las habilidades en Vibe Skills vienen con una licencia amigable para uso comercial que te permite lanzar el código en tu propio juego en Vercel, itch.io, Steam o cualquier otro lugar. Los creadores conservan la propiedad intelectual de la habilidad, tú conservas la propiedad intelectual del juego construido sobre ella.

¿Qué pasa si no quiero usar Cursor?

Cualquier editor de IA que pueda editar archivos de proyecto funciona. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - cualquiera de ellos puede iterar sobre el andamiaje Three.js de una habilidad de Vibe Skills. La habilidad en sí es independiente del editor.

Envíalo este fin de semana

La razón por la que la mayoría de los desarrolladores solitarios nunca envían un juego 3D no es el motor, el género o el techo de habilidad. Es la noche del viernes en la que "solo investigan un poco más" y nunca empiezan. El próximo fin de semana libre que tengas, sigue el plan de cuatro fases: instala una habilidad de juego 3D de Vibe Skills, envía a GitHub, conecta Vercel, despliega para el viernes a las 8 p.m., y luego pasa el sábado y el domingo iterando sobre una URL en vivo.

Tu portafolio de diez juegos de fin de semana enviados en Vercel vale más que tu proyecto de motor de ensueño hipotético de seis meses. El que se envía siempre gana. La URL gratuita de Vercel es la prueba.

Explora habilidades de juegos 3D en Vibe Skills →

Evita la maratón de código repetitivo de Three.js. Instala una habilidad de juego 3D en Vibe Skills, envía a Vercel y ten una URL en vivo para el domingo por la noche.