Vibe Skills

Claude, Cursor, ଏବଂ ଅଧିକ ପାଇଁ ଶହ ଶହ ପ୍ରସ୍ତୁତ କୌଶଳ ବ୍ରାଉଜ୍ କରନ୍ତୁ |

Laad 'n 3D-speletjie op Vercel teen Sondagaand: Die 48-uur-ontplooiingsplan

Jy kan van Vrydagaand op 'n leë blad na jou-speletjie.vercel.app skakel teen Sondagete. Die stapel is Three.js, Cursor, 'n KI-vaardigheid van Vibe Skills, en die Vercel-gratis vlak. Totale koste vir die naweek: $0. Totale infrastruktuur wat jy hoef te oppas: ook nul.

Dit is nie "bou 'n prototipe op jou skootrekenaar en noem dit klaar nie". Dit is 'n publieke URL wat enigiemand in die wêreld in 'n blaaier kan oopmaak, met HTTPS, randkas, en 'n pasgemaakte domein as jy een wil hê. Die KI-vaardigheid laai die Three.js-afskrif en 'n werkende vercel.json. Cursor hanteer die herhalingslus. Vercel hanteer die ontplooiing. Jy hanteer die ontwerp.

Hierdie gids is vir indie-ontwikkelaars, vibe-kodeerders, hackathon-deelnemers, en enigiemand wat moeg is vir halfvoltooide localhost:5173-oortjies. Ons dek hoekom hierdie stapel werk, die 48-uur-ontplooiingsanatomie, vyf 3D-speletjie-vaardighede wat vir die werkstroom gebou is, en die Vrydag-tot-Sondag stap-vir-stap.

Vibe Skills

Claude, Cursor, ଏବଂ ଅଧିକ ପାଇଁ ଶହ ଶହ ପ୍ରସ୍ତୁତ କୌଶଳ ବ୍ରାଉଜ୍ କରନ୍ତୁ |

କୌଶଳ ଅନୁସନ୍ଧାନ କରନ୍ତୁ

ଏବେ ମାଗଣା ଆରମ୍ଭ କରନ୍ତୁ

Hoekom Vercel + Three.js + KI-vaardighede Die Solo Ontwikkelaar Stapel Is

Vercel is die lui moontlike ontplooiingsdoelwit vir 'n Three.js-speletjie. Stuur na GitHub, Vercel merk op, bou die projek, en gee jou 'n URL terug binne 60 sekondes. Geen bediener om te voorsien nie, geen Docker-lêer nie, geen NGINX-konfigurasie nie, geen SSL-opstelling nie. Die Three.js-pakket is net statiese HTML, JS, en WebGL-bates, wat presies is waarvoor Vercel se randnetwerk gebou is om te bedien.

Die gratis vlak dek 'n naweekbekendstelling gemaklik:

100 GB bandwydte per maand. 'n 5 MB Three.js-bou by 10,000 speletjies is 50 GB. Jy sal uit die naweek uitloop voordat jy uit die bandwydte uitloop.
Onbeperkte statiese ontplooiings met HTTPS en 'n *.vercel.app-subdomein.
Pasgemaakte domein ondersteuning op die gratis vlak - bring jou eie naam-speletjie.com as jy een het, andersins is die gratis vercel.app URL deelbaar op elke sosiale platform.
Voorskou-ontplooiings vir elke toewyding - elke druk kry sy eie URL, sodat jy 'n bou met 'n vriend kan deel en kan aanhou herhaal sonder om dit te breek.

Voeg 'n KI-vaardigheid van Vibe Skills by en die voorafgemaakte kode verdwyn ook. Three.js-toneelopstelling, spelerbeheerder, boupyplyn, en 'n Vercel-gereed vercel.json word in een opdrag gegenereer. Dan draai Cursor die res van die naweek in 'n klets waar jy die spel beskryf wat jy wil hê en die uitset aanpas. Dit is die volledige stapel: 'n markplekvaardigheid vir die fondament, 'n KI-redigeerder vir herhaling, en Vercel vir die ontplooiing. Alleen, gratis en vinnig.

Vibe Skills

Claude, Cursor, ଏବଂ ଅଧିକ ପାଇଁ ଶହ ଶହ ପ୍ରସ୍ତୁତ କୌଶଳ ବ୍ରାଉଜ୍ କରନ୍ତୁ |

କୌଶଳ ଅନୁସନ୍ଧାନ କରନ୍ତୁ

ଏବେ ମାଗଣା ଆରମ୍ଭ କରନ୍ତୁ

Die 48-uur Anatomie: Vrydag Konsep tot Sondag Ontplooiing

Elke naweekbekendstelling wat werklik regstreeks gaan, volg dieselfde slae. Die truuk is om die ontplooiing op Vrydag te beplan, nie Sondagmiddag nie, sodat die laaste ses uur aan poetswerk gaan in plaas van om met 'n boufout te baklei.

Fase	Tydblok	Wat jy doen	Wat word teen die einde van die fase verskaf
Fase 1: Konsep	Vrydag 18:00 - 22:00	Kies genre, skryf 1-bladsy ontwerp dokument, installeer Vibe Skills 3D-speletjie vaardigheid, stuur beginnel aan na GitHub, koppel aan Vercel	Regstreekse `naam-speletjie.vercel.app` URL met die voorafgemaakte toneel
Fase 2: Bou	Saterdag 09:00 - 20:00	Vervang plekhouer met jou kernmeganisme, voeg 1 vlak by, kry wen/verloor toestand werkend	Speelbare bou op dieselfde Vercel URL, outomaties ontplooi op elke druk
Fase 3: Poets	Sondag 10:00 - 16:00	Klank, juig, leser-opspringer, foutpas, prestasie-tjek op selfoon	'n Bou wat nie binne die eerste 60 sekondes op enige toestel breek nie
Fase 4: Bekendstelling	Sondag 16:00 - 20:00	Stel pasgemaakte domein (opsioneel), neem GIF op, skryf itch.io-blad, plaas die skakel	Publieke URL + itch.io-blad + 'n bekendstellingspos op sosiale media

Die rede waarom dit werk, is die Vrydagaand-druk na Vercel. Sodra die URL bestaan, ontplooi elke Saterdag- en Sondag-toewyding outomaties. Daar is geen "Sondagaand ontplooiingspaniek" nie, want die ontplooiing het reeds op Vrydag plaasgevind en het die hele naweek op outopilot geloop.

Hoe "Vibe Kodering" 'n 3D-speletjie op Vercel Lyk

Vibe kodering beteken om te beskryf wat jy wil hê in gewone Engels en 'n KI-redigeerder die kode te laat skryf, dan die uitset te herhaal. Vir 'n Three.js-speletjie op Vercel is die lus ongewoon skoon: elke verandering in Cursor is 'n pnpm dev weg van plaaslike terugvoer, dan 'n git push weg van 'n regstreekse voorskou URL, dan outomaties ontplooi na produksie op main.

'n Vibe-gekodeerde Vercel-speletjie naweek lyk soos volg:

Maak die vaardigheid se beginlêergids in Cursor oop.
Beskryf 'n kenmerk in die klets: "dubbel sprong as spasie twee keer gedruk word binne 200ms".
Cursor wysig die beheerderlêer. Stoor. pnpm dev laai weer. Jy voel die sprong in die blaaier.
As dit reg voel, git push. Vercel bou 'n voorskou URL. Stuur dit na 'n vriend.
Voeg saam na main wanneer die gevoel vasgelê is. Produksie URL werk binne 60 sekondes op.

Die KI doen die tikwerk. Vercel doen die ontplooiing. Jy doen die gevoel en die ontwerp.

5 KI 3D-speletjie-vaardighede Wat Dit Moontlik Maak op Vibe Skills

Hierdie vaardighede is gebou vir die Vercel + Three.js + Cursor naweek werkstroom. Elkeen verskaf 'n Vite-gebaseerde Three.js-projek, 'n werkende vercel.json, 'n pnpm build wat 'n statiese pakket lewer wat Vercel vanaf die rand kan bedien, en 'n getoetste ontplooiingspad. Almal is in die 3D Speletjies-kategorie op Vibe Skills.

1. Three.js + Vercel Speletjie Starter

Die standaard keuse. Genereer 'n Three.js-toneel met 'n spelerbeheerder, derde-persoon kamera, beligtingstelsel, lugboks, en 'n grondvlak met botsings. Verskaf 'n vercel.json wat die regte kas-opskrifte vir Three.js batepakkette stel. pnpm dev loop plaaslik; een klik in die Vercel-kontrolepaneel koppel die GitHub-bewaarplek en jy het 'n regstreekse URL.

Beste vir: enige genre behalwe suiwer 2D. Gebruik hierdie as jy nog nie weet wat jy bou nie.

2. Eerste-Persoon Vercel Walker

'n Gepoetste eerste-persoon beheerder (WASD + muis wyser slot + swaartekrag + sprint + sprong) met voetstap hakies, kop-bob, en 'n vercel.json wat die wyser-slot CSP opskrifte korrek hanteer. Hierdie een laat baie alleenlopende ontwikkelaars in produksie struikel. Die vaardigheid los dit vir jou op.

Beste vir: loop simulator, gruwel prototipes, narratiewe speletjies, museum uitstallings.

3. Blaaier Arena Skieter Kit

'n Bo-na-onder arena (dubbele-stok beheerder, golf skepper, basiese vyand KI, projektiel stelsel, telling HUD) met 'n Vercel-gestemde bou wat bates saampers, die KI-kode splits, en musiek met lui laai. Multiplayer hakies ingesluit; die naweek verskaf enkellopend.

Beste vir: arcade skieters, koeël hel, jam inskrywings wat vinnig op selfoon moet laai.

4. Vercel Puzzel Platformer

'n Derde-persoon platformer (veranderlike sprong, coyote tyd, kant opsporing), kontrolepunte, drie stom vlakke wat jy in Blender of in kode kan wysig, en 'n herstel lus. Die vercel.json is gekonfigureer vir onmiddellike rand-gekas vlak herlaai, so speel toetsing voel flitsend op 'n telefoon.

Beste vir: puzzel platformers, parkour prototipes, vlak-ontwerp eksperimente.

5. Vercel Bestuur Sandbox

Arcade bestuursgevoel (versnellingskurwe, dryf fisika, kamera vertraging, basiese terrein) met 'n lae-polig kar, 'n baansjabloon, en 'n ontplooiing gestem vir groot terrein messe. Vooraf ingestelde HTTP-opskrifte laat die WebGL-konteks vinniger begin op Safari, histories die stadigste blaaier vir Three.js.

Beste vir: arcade wedrenne, veldry, kar-gevoel demo's vir 'n portefeulje.

Blaai deur alle 3D-speletjie vaardighede op Vibe Skills →

Vrydag-tot-Sondag Stap-vir-Stap

Dit is die presiese skedule. Pas die begin tyd aan, maar hou die volgorde. Die sleutel mylpaal is die Vrydagaand Vercel-ontplooiing. Alles daarna is herhaling.

Vrydag 18:00 - 20:00: Kies Vaardigheid, Stuur na GitHub, Koppel Vercel

Stap 1: Kies 'n 3D-speletjie vaardigheid op Vibe Skills. Blaai deur die 3D Speletjies-kategorie, kies die een wat by jou genre pas, en installeer die beginnel in 'n vars gids. Maak dit oop in Cursor. Jy moet teen 19:00 'n Three.js-toneel met 'n bewegende speler sien.

Stap 2: Skep 'n GitHub-bewaarplek en stuur. git init, git remote add, git push. Gebruik die slug van jou speletjie as die bewaarplek naam (kristal-jaer, maan-visvang, wat ook al). Die bewaarplek naam word dikwels jou URL.

Stap 3: Koppel die bewaarplek aan Vercel. Teken in op Vercel met GitHub (gratis), klik "Add New Project", kies die bewaarplek. Vercel opspoor Vite outomaties en konfigureer die bou. Klik Deploy. Binne 60 sekondes het jy 'n kristal-jaer.vercel.app URL. Maak dit oop op jou telefoon. Deel met een vriend. Die ontplooiingsbalk is nou nul vir die res van die naweek.

Vrydag 20:00 - 22:00: Skryf die Ontwerp Dokument

Stap 4: Beantwoord vyf vrae in gewone Engels. Maak 'n Notion-blad of 'n markdown-lêer binne die bewaarplek oop en beantwoord:

Wat doen die speler elke 5 sekondes? (die kernlus)
Wat is die wenkondisie en die verloorkondisie?
Hoe lank is een rondte of een vlak?
Wat is die visuele haak? (palet, beligting, styl verwysing)
Wat is die een kenmerk wat dit onvergeetlik maak in 30 sekondes?

Stap 5: Voeg die ontwerp dokument by. Stuur dit na die bewaarplek. Vercel sal weer ontplooi. Die dissipline om elke betekenisvolle verandering te stuur hou die regstreekse URL eerlik.

Saterdag 09:00 - 13:00: Bou die Kernmeganisme

Stap 6: Vervang die plekhouer meganisme met jou een kenmerk. Dit is die enigste kenmerk wat saak maak. Gebruik Cursor klets om dit te beskryf ("wanneer die speler 'n kristal optel, vries nabye vyande vir 2 sekondes en speel 'n klokkie"). Herhaal plaaslik met pnpm dev. Wanneer dit reg voel, stuur.

Stap 7: Koppel die wen/verloor toestand. 'n 60-sekonde bou met 'n regte einde voel soos 'n speletjie. 'n 60-minuut bou sonder 'n einde voel soos 'n tegnologie demonstrasie. Koppel altyd eers die wen-skerm, dan alles anders.

Saterdag 13:00 - 20:00: Voeg Een Vlak By

Stap 8: Bou een gepoetste vlak. Nie drie halfgebakte vlakke nie. Gebruik plekhouer blokkies vir meetkunde. Gebruik die vaardigheid se voorraad karakter. Stem die gevoel - spring hoogte, kamera vertraging, deeltjie intensiteit.

Stap 9: Voeg 'n leser-oorleg by. 'n Twee-sin "WASD om te beweeg, klik om te vuur" opspringer by die eerste bekendstelling red jou bekendstelling van verwarde spelers wat binne 8 sekondes opgee. Cursor kan die React (of suiwer DOM) oorleg in 30 sekondes genereer.

Stap 10: Stuur elke uur. Elke druk kry 'n Vercel voorskou URL. Stuur elkeen na 'n vriend. Die terugvoerlus is die geheime wapen van hierdie stapel.

Sondag 10:00 - 16:00: Poets

Stap 11: Voeg drie klanke by. Voetstap lus, omringende vloer, wen klank. Selfs drie klanke lig 'n naweek prototipe dramaties op. Gratis bronne: freesound.org, opengameart.org.

Stap 12: Voeg juig by. Deeltjies by tref, skermskud by impak, nommer opspringers by telling. Juig is wat 'n 48-uur bou laat lyk soos 'n 6-maande een in 'n GIF. Vra Cursor om 'n "skermskud van intensiteit 0.3 vir 150ms wanneer die speler skade opdoen" by te voeg - dit sal die kamera-skud haak in vyf sekondes skryf.

Stap 13: Voer 'n Lighthouse pas uit. Maak die Vercel URL op 'n telefoon oop en voer Chrome DevTools Lighthouse uit. Three.js pakkette is gewoonlik rondom 400 KB tot 1.5 MB. As jy oor 3 MB is, vra Cursor om kode-splitsing op die swaar modules te aktiveer. Vercel se gzip en brotli sal die res hanteer.

Stap 14: Foutpas. Speel jou regstreekse URL vyf keer in 'n ry. Herstel enigiets wat twee keer breek. Ignoreer enigiets wat een keer breek.

Sondag 16:00 - 20:00: Bekendstelling

Stap 15: (Opsioneel) Stel 'n pasgemaakte domein in. As jy vooraf 'n naam-speletjie.com gekoop het, voeg dit by in Vercel se projekinstellings. SSL is outomaties. Andersins is die *.vercel.app URL goed - dit het HTTPS, dit is deelbaar, en dit laai oral.

Stap 16: Neem 'n 15-sekonde GIF op van die beste oomblik. Gebruik die regstreekse URL, nie localhost nie. Die GIF is wat op Twitter, Bluesky en Reddit geklik word.

Stap 17: Skep 'n itch.io-blad (opsioneel maar hoë hefboomwerking). Titel, een-lyn slagspreuk, drie skermkiekies, die GIF, kontroles, krediete, en 'n ingebedde van jou *.vercel.app iframe (itch.io ondersteun iframe ingebed vir HTML5-speletjies). Nou het jy twee URL's - een vir toevallige deel en een vir die gamer gehoor.

Stap 18: Plaas die skakel. Twitter, Bluesky, jou ontwikkelaar gemeenskap Discord, r/IndieDev, r/threejs, r/WebGames. Lei altyd met die GIF. Sluit altyd die URL in. As jy 'n Vibe Skills vaardigheid gebruik het, noem dit in die ontwikkelaarsdagboek pos - ander ontwikkelaars wat saam lees, sal dieselfde beginner wil hê.

Hoe om die Drie Mees Algemene Vercel Ontplooiingsmislukkings te Vermy

Drie dinge breek byna elke solo Three.js + Vercel naweek. Al drie is 5-minuut oplossings as jy dit op Vrydagaand vang, en 5-uur keldergate as jy dit Sondag om 19:00 ontdek.

Verkeerde bou uitvoer gids. Vite verstek na dist/. Vercel opspoor Vite outomaties en gebruik dist/. As jy die uitvoer aangepas het, stel outputDirectory in vercel.json of die projekinstellings of jou ontplooiing sal 'n 404 wees.
Bate paaie wat plaaslik werk maar in produksie 404 is. Gebruik relatiewe paaie of die Vite import.meta.env.BASE_URL hulp vir enige looptyd-gelaaide GLB, tekstuur, of klanklêer. Hardgekodeerde /assets/... paaie werk gewoonlik, maar kopieer-en-plak absolute Windows-paaie sal absoluut nie.
CSP opskrifte wat wyser slot of klank konteks blokkeer. Eerste-persoon speletjies benodig wyser slot. Klank benodig gebruikers-gebaar aktivering. Enige vaardigheid van die 3D Speletjies-kategorie verskaf die regte headers blok in vercel.json om dit te hanteer. As jy jou eie van nuuts af geskryf het, kopieer die konfigurasie van die vaardigheid se bewaarplek.

Die ontplooiing werk op Vrydag, so wanneer dit Sondag breek, is dit altytyd as gevolg van 'n onlangse verandering. git bisect is jou vriend. Nog beter: bly elke 30 minute stuur sodat die gebroke toewyding klein is.

Dikwels Gevraagde Vrae

Sal die Vercel gratis vlak regtig hou as my speletjie verkeer kry?

Ja, vir 'n naweekbekendstelling en die eerste paar weke. Gratis vlak gee jou 100 GB bandwydte per maand, wat ongeveer 20,000 speletjies van 'n 5 MB Three.js-bou is. As jy daardie plafon bereik, is die Pro-plan $20/maand en verhoog jou na 1 TB. Vir 'n naweekbekendstelling is gratis meer as genoeg. Vaardighede op Vibe Skills verskaf boukonfigurasies wat pakketgroottes minimaliseer, wat die gratis vlak verder rek.

Kan ek 'n pasgemaakte domein op die gratis Vercel vlak gebruik?

Ja. Die gratis vlak ondersteun pasgemaakte domeine met outomatiese HTTPS. Koop 'n domein (Namecheap, Cloudflare Registrar, Porkbun), wys dit na Vercel, en Vercel hanteer die SSL-sertifikaat. Die opstelling neem ongeveer 10 minute. As jy nie 'n domein het nie, is die naam-speletjie.vercel.app URL kort genoeg om op enige platform te deel.

Is hierdie stapel goed vir 'n speletjie jam inskrywing?

Ja, en dit is een van die beste stapels vir jam inskrywings. Die meeste jams (Ludum Dare, GMTK, js13k, GitHub Game Off) aanvaar enige web-speelbare URL. 'n *.vercel.app skakel werk presies soos 'n itch.io URL vir beoordelaars. Baie jam wenners laai na albei - itch.io vir die gamer gehoor, Vercel as die vinnige kanoniese URL.

Moet ek Three.js ken voordat ek begin?

Jy benodig genoeg JavaScript om te lees wat Cursor skryf en waardes aan te pas. Jy hoef nie Three.js van nuuts af te skryf nie. Die vaardighede op Vibe Skills genereer die enjin opstelling, kamera, beheerder, en bou konfigurasie. Cursor hanteer die spel kode van jou beskrywings.

Wat gebeur as my Vercel bou Sondag om 19:00 misluk?

Die mees algemene oorsaak is 'n TypeScript-fout of 'n ontbrekende omgewingsvariabele. Vercel wys die boulogboek met die mislukte lyn uitgelig. Een klik in die kontrolepaneel rol terug na die laaste werkende ontplooiing en bevorder dit na produksie. Omdat elke druk 'n voorskou ontplooiing is, is jy nooit meer as een toewyding van 'n werkende bou af nie. Dit is hoekom stuur elke 30 minute op Saterdag en Sondag saak maak.

Kan ek die kode van 'n Vibe Skills 3D-speletjie vaardigheid verkoop of wysig?

Ja. Vaardighede op Vibe Skills verskaf 'n kommersieel vriendelike lisensie wat jou toelaat om die kode in jou eie speletjie op Vercel, itch.io, Steam, of enige ander plek vry te stel. Skeppers behou die IP van die vaardigheid, jy behou die IP van die spel wat daarop gebou is.

Wat as ek nie Cursor wil gebruik nie?

Enige KI-redigeerder wat projeklêers kan wysig, werk. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - enige van hulle kan die Three.js voorafgemaakte kode van 'n Vibe Skills vaardigheid herhaal. Die vaardigheid self is redigeerder-agnosties.

Laai Dit Hierdie Naweek

Die rede waarom die meeste solo-ontwikkelaars nooit 'n 3D-speletjie laai nie, is nie die enjin, die genre, of die vaardigheid-plafon nie. Dit is die Vrydagaand waar hulle "net nog 'n bietjie navorsing doen" en nooit begin nie. Die volgende gratis naweek wat jy het, volg die vier-fase plan: installeer 'n Vibe Skills 3D-speletjie vaardigheid, stuur na GitHub, koppel Vercel, ontplooi teen Vrydag 20:00, spandeer dan Saterdag en Sondag om op 'n regstreekse URL te herhaal.

Jou portefeulje van tien naweek-gelaaide speletjies op Vercel is meer werd as jou hipotetiese ses-maande droom enjinprojek. Die gelaaide een wen altyd. Die gratis Vercel URL is die bewys.

Blaai deur 3D-speletjie vaardighede op Vibe Skills →

Slaan die Three.js voorafgemaakte marathon oor. Installeer 'n 3D-speletjie vaardigheid op Vibe Skills, stuur na Vercel, en het 'n regstreekse URL teen Sondagaand.