Vibe Skills

Navega per centenars d'habilitats ja fetes per a Claude, Cursor i més.

Llança un joc 3D a Vercel abans de diumenge a la nit: El Playbook de Desplegament de 48 Hores

Pots passar d'un divendres al vespre buit a un enllaç el-teu-joc.vercel.app abans del sopar de diumenge. La pila és Three.js, Cursor, una habilitat d'IA de Vibe Skills, i el nivell gratuït de Vercel. Cost total del cap de setmana: 0 $. Infraestructura total que has de vigilar: també zero.

Això no és "construir un prototip en el teu portàtil i donar-lo per acabat". Això és una URL pública que qualsevol persona al món pot obrir en un navegador, amb HTTPS, emmagatzematge en memòria cau al perímetre, i un domini personalitzat si en vols un. L'habilitat d'IA lliura l'estructura de Three.js i un vercel.json funcional. Cursor gestiona el bucle d'iteració. Vercel gestiona el desplegament. Tu gestiones el disseny.

Aquesta guia és per a desenvolupadors independents, codificadors d'ambient, participants en hackatons, i qualsevol que estigui cansat de pestanyes a mig acabar a localhost:5173. Expliquem per què aquesta pila funciona, l'anatomia del desplegament de 48 hores, cinc habilitats de jocs 3D construïdes per al flux de treball, i el pas a pas de divendres a diumenge.

Vibe Skills

Navega per centenars d'habilitats ja fetes per a Claude, Cursor i més.

Explora Habilitats

Comença ara gratuïtament

Per què Vercel + Three.js + Habilitats d'IA és la Pila per a Desenvolupadors Solitaris

Vercel és l'objectiu de desplegament més còmode possible per a un joc Three.js. Puja a GitHub, Vercel ho nota, construeix el projecte, i et retorna una URL en menys de 60 segons. No hi ha cap servidor per aprovisionar, cap arxiu Docker, cap configuració NGINX, cap configuració SSL. El paquet de Three.js són només elements HTML, JS i WebGL estàtics, que és exactament el que la xarxa de perímetre de Vercel va ser construïda per servir.

El nivell gratuït cobreix còmodament un llançament de cap de setmana:

100 GB d'amplada de banda al mes. Una construcció de Three.js de 5 MB amb 10.000 reproduccions són 50 GB. Et quedaràs sense cap de setmana abans que et quedis sense amplada de banda.
Desplegaments estàtics il·limitats amb HTTPS i un subdomini *.vercel.app.
Suport de domini personalitzat en el nivell gratuït: porta el teu propi nom-joc.com si en tens un, sinó la URL gratuïta vercel.app és compartible en totes les plataformes socials.
Desplegaments de previsualització per a cada commit - cada push obté la seva pròpia URL, així que pots compartir una construcció amb un amic i continuar iterant sense trencar-la.

Afegeix una habilitat d'IA de Vibe Skills i el codi base desapareix també. La configuració de la escena Three.js, el controlador del jugador, el pipeline de construcció, i un vercel.json preparat per a Vercel es generen amb un sol comandament. Llavors Cursor converteix la resta del cap de setmana en un xat on descrius el joc que vols i ajustes la sortida. Aquesta és la pila completa: una habilitat del mercat per a la base, un editor d'IA per a la iteració, i Vercel per al desplegament. Sol, gratuït i ràpid.

Vibe Skills

Navega per centenars d'habilitats ja fetes per a Claude, Cursor i més.

Explora Habilitats

Comença ara gratuïtament

L'Anatomia de 48 Hores: Concepte de Divendres a Desplegament de Diumenge

Cada llançament de cap de setmana que realment surt a producció segueix els mateixos passos. El truc és planificar el desplegament divendres, no diumenge a la tarda, perquè les últimes sis hores es dediquin a polir en lloc de lluitar contra un error de construcció.

Fase	Bloc de temps	Què fas	Què es lliura al final de la fase
Fase 1: Concepte	Divendres 18:00 - 22:00	Trieu gènere, escriviu document de disseny d'una pàgina, instal·leu l'habilitat de joc 3D de Vibe Skills, pugeu l'iniciador a GitHub, connecteu a Vercel	URL `nom-joc.vercel.app` en directe amb la escena base
Fase 2: Construcció	Dissabte 9:00 - 20:00	Reemplaceu el marcador de posició amb la vostra mecànica principal, afegiu 1 nivell, feu que l'estat guanyar/perdre funcioni	Construcció jugable a la mateixa URL de Vercel, desplegada automàticament amb cada push
Fase 3: Poliment	Diumenge 10:00 - 16:00	So, efectes, popup de tutorial, revisió d'errors, comprovació de rendiment en mòbil	Una construcció que no es trenca en els primers 60 segons en cap dispositiu
Fase 4: Llançament	Diumenge 16:00 - 20:00	Configureu domini personalitzat (opcional), graveu GIF, escriviu pàgina d'itch.io, publiqueu l'enllaç	URL pública + pàgina d'itch.io + una publicació de llançament a les xarxes socials

La raó per la qual això funciona és el push de divendres a Vercel. Un cop existeix la URL, cada commit de dissabte i diumenge es desplega automàticament. No hi ha "pànic de desplegament de diumenge a la nit" perquè el desplegament ja va passar divendres i ha estat funcionant en mode automàtic tot el cap de setmana.

Com es veu "Codificar amb Ambient" un Joc 3D a Vercel

Codificar amb ambient significa descriure el que vols en llenguatge planer i deixar que un editor d'IA escrigui el codi, i després iterar sobre la sortida. Per a un joc Three.js a Vercel, el bucle és inusualment net: cada canvi a Cursor està a un pnpm dev de la retroalimentació local, després a un git push d'una URL de previsualització en directe, i després desplegat automàticament a producció a main.

Un cap de setmana de joc Vercel codificat amb ambient es veu així:

Obriu la carpeta d'inici de l'habilitat a Cursor.
Descriviu una funció en xat: "doble salt si es prem la barra espaiadora dues vegades en menys de 200 ms".
Cursor edita el fitxer del controlador. Guardeu. pnpm dev es recarrega. Sentiu el salt al navegador.
Si us sembla bé, git push. Vercel construeix una URL de previsualització. Envieu-la a un amic.
Feu un merge a main quan el tacte estigui bloquejat. La URL de producció s'actualitza en menys de 60 segons.

L'IA fa l'escriptura. Vercel fa el desplegament. Vós feu el tacte i el disseny.

5 Habilitats d'IA per a Jocs 3D que Ho Fan Possible a Vibe Skills

Aquestes habilitats estan construïdes per al flux de treball de cap de setmana de Vercel + Three.js + Cursor. Cadascuna lliura un projecte Three.js basat en Vite, un vercel.json funcional, un pnpm build que produeix un paquet estàtic que Vercel pot servir des del perímetre, i un camí de desplegament provat. Totes es troben a la categoria 3D Games a Vibe Skills.

1. Iniciador de Joc Three.js + Vercel

L'elecció per defecte. Genera una escena Three.js amb un controlador de jugador, càmera en tercera persona, aparell d'il·luminació, skybox, i un pla de terra amb col·lisions. Lliura amb un vercel.json que estableix les capçaleres de memòria cau correctes per als paquets d'actius de Three.js. pnpm dev s'executa localment; un clic al tauler de Vercel connecta el repositori de GitHub i teniu una URL en directe.

Ideal per: qualsevol gènere excepte 2D pur. Utilitzeu-ho si encara no sabeu què esteu construint.

2. Caminador en Primera Persona per a Vercel

Un controlador pulit en primera persona (WASD + bloqueig del punter del ratolí + gravetat + córrer + salt) amb ganxos per als passos, mareig del cap, i un vercel.json que gestiona correctament les capçaleres CSP del bloqueig del punter. Aquest punt fa ensopegar a molts desenvolupadors solitaris en producció. L'habilitat ho resol per a tu.

Ideal per: simuladors de caminar, prototips de terror, jocs narratius, exposicions de museus.

3. Kit de Tirador d'Arena per a Navegador

Una arena des de dalt (controlador de doble pal, generador d'ones, IA bàsica d'enemics, sistema de projectils, HUD de puntuació) amb una construcció sintonitzada per a Vercel que comprimeix els actius, divideix el codi de la IA, i carrega música de forma diferida. Inclou connexions multijugador; el cap de setmana lliura un jugador sol.

Ideal per: tiradors arcade, bullet hell, entrades de jam que necessiten carregar ràpidament en mòbil.

4. Plataformador de Puzles per a Vercel

Un platformador en tercera persona (salt variable, temps de coyote, detecció de cornisa), punts de control, tres nivells de stub que podeu editar a Blender o en codi, i un bucle de respawn. El vercel.json està configurat per a recàrregues de nivell de memòria cau del perímetre instantànies, de manera que la prova se sent ràpida en un telèfon.

Ideal per: platformadors de puzles, prototips de parkour, experiments de disseny de nivells.

5. Sandbox de Conducció per a Vercel

Sensació arcade de conducció (corba d'acceleració, física de derrapada, retard de la càmera, terreny bàsic) amb un cotxe de baix poligonatge, una plantilla de pista, i un desplegament sintonitzat per a grans malles de terreny. Les capçaleres HTTP preestablertes fan que el context WebGL comenci més ràpid a Safari, històricament el navegador més lent per a Three.js.

Ideal per: carreres arcade, conducció tot terreny, demostracions de sensació de cotxe per a un portafoli.

Navega per totes les habilitats de jocs 3D a Vibe Skills →

Pas a Pas de Divendres a Diumenge

Aquest és l'horari exacte. Ajusteu l'hora d'inici, però mantingueu l'ordre. La fita clau és el desplegament de Vercel divendres a la nit. Tot el que vingui després és iteració.

Divendres 18:00 - 20:00: Trieu l'Habilitat, Pugeu a GitHub, Connecteu Vercel

Pas 1: Trieu una habilitat de joc 3D a Vibe Skills. Navegueu per la categoria 3D Games, trieu la que coincideixi amb el vostre gènere, i instal·leu l'iniciador en una carpeta nova. Obriu-la a Cursor. Haureu de veure una escena Three.js amb un jugador en moviment cap a les 19:00.

Pas 2: Creeu un repositori GitHub i pugeu. git init, git remote add, git push. Utilitzeu el slug del vostre joc com a nom del repositori (corredor-cristall, pesca-lunar, el que sigui). El nom del repositori sovint es converteix en la vostra URL.

Pas 3: Connecteu el repositori a Vercel. Inicieu sessió a Vercel amb GitHub (gratuït), feu clic a "Add New Project", trieu el repositori. Vercel detecta automàticament Vite i configura la construcció. Feu clic a Deploy. En menys de 60 segons teniu una URL corredor-cristall.vercel.app. Obriu-la al vostre telèfon. Compartiu-la amb un amic. La barra de desplegament ara és zero per a la resta del cap de setmana.

Divendres 20:00 - 22:00: Escriviu el Document de Disseny

Pas 4: Respon cinc preguntes en llenguatge planer. Obriu una pàgina de Notion o un fitxer markdown dins del repositori i responeu:

Què fa el jugador cada 5 segons? (el bucle principal)
Quina és la condició de victòria i la condició de derrota?
Quant dura una partida o un nivell?
Quin és l'element visual atractiu? (paleta, il·luminació, referència d'estil)
Quina és la característica que fa que sigui memorable en 30 segons?

Pas 5: Confirmeu el document de disseny. Pugeu-lo al repositori. Vercel tornarà a desplegar. La disciplina de pujar cada canvi significatiu manté la URL en directe honesta.

Dissabte 9:00 - 13:00: Construïu la Mecànica Principal

Pas 6: Reemplaceu la mecànica del marcador de posició amb la vostra característica. Aquesta és l'única característica que importa. Utilitzeu el xat de Cursor per descriure-la ("quan el jugador recull un cristall, congela els enemics propers durant 2 segons i reprodueix un timbre"). Utilitzeu localment amb pnpm dev. Quan us sembli bé, pugeu.

Pas 7: Connecteu l'estat de guanyar/perdre. Una construcció de 60 segons amb un final real se sent com un joc. Una construcció de 60 minuts sense final se sent com una demo tecnològica. Sempre connecteu primer la pantalla de victòria, després tot el que vingui després.

Dissabte 13:00 - 20:00: Afegiu un Nivell

Pas 8: Construïu un nivell pulit. No tres a mig fer. Utilitzeu cubs de marcador de posició per a la geometria. Utilitzeu el personatge d'estoc de l'habilitat. Ajusteu la sensació: alçada del salt, retard de la càmera, intensitat de les partícules.

Pas 9: Afegiu una superposició de tutorial. Un popup de dues frases "WASD per moure's, clic per disparar" en el primer llançament salva el vostre llançament de jugadors confosos que es rendeixen en 8 segons. Cursor pot generar la superposició de React (o DOM simple) en 30 segons.

Pas 10: Pugeu cada hora. Cada push obté una URL de previsualització de Vercel. Envieu cadascuna a un amic. El bucle de retroalimentació és l'arma secreta d'aquesta pila.

Diumenge 10:00 - 16:00: Poliment

Pas 11: Afegiu tres sons. Bucle de passos, pad ambiental, so de victòria. Fins i tot tres sons eleva un prototip de cap de setmana de manera dràstica. Fonts gratuïtes: freesound.org, opengameart.org.

Pas 12: Afegiu efectes. Partícules en colpejar, vibració de pantalla en impacte, nombres emergents a la puntuació. Els efectes són el que fan que una construcció de 48 hores sembli una de 6 mesos en un GIF. Demaneu a Cursor que afegeixi "vibració de pantalla d'intensitat 0.3 durant 150 ms quan el jugador rep dany" - escriurà el ganxo de vibració de la càmera en cinc segons.

Pas 13: Executeu una passada de Lighthouse. Obriu la URL de Vercel en un telèfon i executeu les eines de desenvolupament de Chrome Lighthouse. Els paquets Three.js solen tenir entre 400 KB i 1.5 MB. Si teniu més de 3 MB, demaneu a Cursor que activi la divisió de codi en els mòduls pesats. La compressió gzip i brotli de Vercel s'encarregarà de la resta.

Pas 14: Revisió d'errors. Jugueu la vostra URL en directe cinc vegades seguides. Corregiu qualsevol cosa que es trenqui dues vegades. Ignoreu qualsevol cosa que es trenqui una vegada.

Diumenge 16:00 - 20:00: Llançament

Pas 15: (Opcional) Configureu un domini personalitzat. Si heu comprat un nom-joc.com per endavant, afegiu-lo a la configuració del projecte de Vercel. SSL és automàtic. Si no, la URL *.vercel.app està bé: té HTTPS, és compartible i es carrega a tot arreu.

Pas 16: Graveu un GIF de 15 segons del millor moment. Utilitzeu la URL en directe, no localhost. El GIF és el que obté clics a Twitter, Bluesky i Reddit.

Pas 17: Creeu una pàgina d'itch.io (opcional però altament rendible). Títol, una frase de reclam, tres captures de pantalla, el GIF, controls, crèdits, i un embed del vostre iframe *.vercel.app (itch.io admet embeds iframe per a jocs HTML5). Ara teniu dues URLs: una per compartir casualment i una per al públic de jugadors.

Pas 18: Publiqueu l'enllaç. Twitter, Bluesky, el vostre Discord de la comunitat de desenvolupadors, r/IndieDev, r/threejs, r/WebGames. Sempre comenceu amb el GIF. Incloeu sempre la URL. Si heu utilitzat una habilitat de Vibe Skills, mencioneu-ho a la publicació del diari de desenvolupament; altres desenvolupadors que llegeixin també voldran el mateix iniciador.

Com Evitar els Tres Errors Més Comuns de Desplegament a Vercel

Tres coses trenquen gairebé tots els jocs Three.js + Vercel de caps de setmana solitaris. Les tres són correccions de 5 minuts si les atrapeu divendres a la nit, i caus de conill de 5 hores si les descobriu diumenge a les 19:00.

Directori de sortida de construcció incorrecte. Vite per defecte és dist/. Vercel detecta automàticament Vite i utilitza dist/. Si heu personalitzat la sortida, definiu outputDirectory a vercel.json o a la configuració del projecte, o el vostre desplegament serà un 404.
Rutes d'actius que funcionen localment però que donen 404 en producció. Utilitzeu rutes relatives o l'ajudant import.meta.env.BASE_URL de Vite per a qualsevol fitxer GLB, textura o àudio carregat en temps d'execució. Les rutes codificades /assets/... normalment funcionen, però les rutes absolutes de Windows copiades i enganxades absolutament no ho faran.
Capçaleres CSP que bloquegen el bloqueig del punter o el context d'àudio. Els jocs en primera persona necessiten bloqueig del punter. L'àudio necessita activació per gest d'usuari. Qualsevol habilitat de la categoria 3D Games lliura amb el bloc headers correcte a vercel.json per gestionar-ho. Si heu escrit el vostre des de zero, copieu la configuració del repositori de l'habilitat.

El desplegament funciona divendres, així que quan aquests fallin diumenge, sempre serà degut a un canvi recent. git bisect és el vostre amic. Encara millor: seguiu pujant cada 30 minuts perquè el commit defectuós sigui petit.

Preguntes Freqüents

La nivell gratuït de Vercel realment aguantarà si el meu joc rep trànsit?

Sí, per a un llançament de cap de setmana i les primeres setmanes. El nivell gratuït us proporciona 100 GB d'amplada de banda al mes, que són aproximadament 20.000 reproduccions d'un paquet Three.js de 5 MB. Si arribeu a aquest sostre, el pla Pro costa 20 $/mes i us augmenta a 1 TB. Per a un llançament de cap de setmana, el gratuït és més que suficient. Les habilitats a Vibe Skills lliuren amb configuracions de construcció que minimitzen la mida del paquet, la qual cosa estira més el nivell gratuït.

Puc utilitzar un domini personalitzat al nivell gratuït de Vercel?

Sí. El nivell gratuït admet dominis personalitzats amb HTTPS automàtic. Compreu un domini (Namecheap, Cloudflare Registrar, Porkbun), apunteu-lo a Vercel, i Vercel s'encarrega del certificat SSL. La configuració triga uns 10 minuts. Si no teniu domini, la URL nom-joc.vercel.app és prou curta per compartir en qualsevol plataforma.

És aquesta pila adequada per a una submissió de jam de jocs?

Sí, i és una de les millors piles per a submissions de jams. La majoria de jams (Ludum Dare, GMTK, js13k, GitHub Game Off) accepten qualsevol URL jugable web. Un enllaç *.vercel.app funciona exactament com una URL d'itch.io per als jutges. Molts guanyadors de jams envien a ambdós: itch.io per al públic de jugadors, Vercel com la URL canònica ràpida.

Necessito saber Three.js abans de començar?

Necessites prou JavaScript per llegir el que escriu Cursor i ajustar valors. No necessites escriure Three.js des de zero. Les habilitats de Vibe Skills generen la configuració del motor, la càmera, el controlador i la configuració de construcció. Cursor s'encarrega del codi de joc a partir de les vostres descripcions.

Què passa si la meva construcció de Vercel falla diumenge a les 19:00?

La causa més comuna és un error de TypeScript o una variable d'entorn que falta. Vercel mostra el registre de construcció amb la línia defectuosa ressaltada. Un clic al tauler de control torna a l'última construcció funcional i la promociona a producció. Com que cada push és un desplegament de previsualització, mai no esteu a més d'un commit d'una construcció funcional. Per això importa pujar cada 30 minuts dissabte i diumenge.

Puc vendre o modificar el codi d'una habilitat de joc 3D de Vibe Skills?

Sí. Les habilitats a Vibe Skills lliuren amb una llicència amigable per a ús comercial que us permet publicar el codi en el vostre propi joc a Vercel, itch.io, Steam, o qualsevol altre lloc. Els creadors conserven la propietat intel·lectual de l'habilitat, vosaltres conserveu la propietat intel·lectual del joc construït a sobre.

Què passa si no vull utilitzar Cursor?

Qualsevol editor d'IA que pugui editar fitxers de projecte funciona. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline: qualsevol d'ells pot iterar sobre l'estructura Three.js d'una habilitat de Vibe Skills. L'habilitat en si és independent de l'editor.

Llança'l Aquest Cap de Setmana

La raó per la qual la majoria de desenvolupadors solitaris mai llancen un joc 3D no és el motor, el gènere, o el sostre d'habilitat. És el divendres a la nit on "només investiguen una mica més" i mai comencen. El proper cap de setmana lliure que tingueu, seguiu el pla de quatre fases: instal·leu una habilitat de joc 3D de Vibe Skills, pugeu a GitHub, connecteu Vercel, desplegueu abans de divendres a les 20:00, i després passeu dissabte i diumenge iterant en una URL en directe.

El vostre portafoli de deu jocs llançats de cap de setmana a Vercel val més que el vostre projecte hipotètic de sis mesos de motor de somni. El que s'ha llançat sempre guanya. La URL gratuïta de Vercel és la prova.

Navega per habilitats de jocs 3D a Vibe Skills →

Eviteu la marató de codi base Three.js. Instal·leu una habilitat de joc 3D a Vibe Skills, pugeu a Vercel, i tingueu una URL en directe abans de diumenge a la nit.