Vibe Skills

Blaai deur honderde gereed-gemaakte vaardighede vir Claude, Cursor, en meer.

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

Jy kan van Vrydagaand sonder enigiets na jou-speletjie.vercel.app 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 waaroor jy moet omsien: 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, randkasgelde, en 'n pasgemaakte domein as jy een wil hê. Die KI-vaardigheid verskaf die Three.js-skraapwerk en 'n werkende vercel.json. Cursor hanteer die herhalingslus. Vercel hanteer die ontplooiing. Jy hanteer die ontwerp.

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

Vibe Skills

Blaai deur honderde gereed-gemaakte vaardighede vir Claude, Cursor, en meer.

Verken Vaardighede

Begin Nou Gratis

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

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

Die gratis vlak dek 'n naweek se bekendstelling gemaklik:

100 GB bandwydte per maand. 'n 5 MB Three.js-bundel teen 10 000 speel speletjies is 50 GB. Jy sal uit die naweek uitloop voordat jy uit 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.
Voorbeskou ontplooiings vir elke commmit - elke stoot kry sy eie URL, sodat jy 'n bou met 'n vriend kan deel en kan aanhou itereer sonder om dit te breek.

Voeg 'n KI-vaardigheid van Vibe Skills by en die boilerplate verdwyn ook. Three.js-toneelopstelling, spelerbeheerder, boupyplyn, en 'n Vercel-gereed vercel.json word in een opdrag gegenereer. Dan verander Cursor die res van die naweek in 'n klets waar jy die spel beskryf wat jy wil hê en die uitvoer fyn instel. Dit is die volledige stapel: 'n markplek-vaardigheid vir die fondament, 'n KI-redigeerder vir iterasie, en Vercel vir die ontplooiing. Solo, gratis, en vinnig.

Vibe Skills

Blaai deur honderde gereed-gemaakte vaardighede vir Claude, Cursor, en meer.

Verken Vaardighede

Begin Nou Gratis

Die 48-Uur Anatomie: Vrydag Konsep tot Sondag Ontplooiing

Elke naweek se verskeping wat werklik lewe kry, volg dieselfde slae. Die truuk is om die ontplooiing op Vrydag te beplan, nie Sondagmiddag nie, sodat die laaste ses uur gaan na poetswerk in plaas van om 'n boufout te beveg.

Fase	Tydblok	Wat jy doen	Wat word aan die einde van die fase verskeep
Fase 1: Konsep	Vrydag 6nm - 10nm	Kies genre, skryf 1-bladsy-ontwerpdokument, installeer Vibe Skills 3D-speletjie-vaardigheid, stoot beginpunt na GitHub, koppel aan Vercel	Lewende `naam-speletjie.vercel.app` URL met die boilerplate-toneel
Fase 2: Bou	Saterdag 9vm - 8nm	Vervang plekholder met jou kernmeganisme, voeg 1 vlak by, kry wen/verloor-status werkend	Speelbare bou by dieselfde Vercel URL, outomaties ontplooi op elke stoot
Fase 3: Poets	Sondag 10vm - 4nm	Klank, sap, tutoriaal pop-up, foutkontrole, prestasiekontrole op selfoon	'n Bou wat nie binne die eerste 60 sekondes op enige toestel breek nie
Fase 4: Begin	Sondag 4nm - 8nm	Stel pasgemaakte domein op (opsioneel), neem GIF op, skryf itch.io-bladsy, plaas die skakel	Publieke URL + itch.io-bladsy + 'n beginpos op sosiale media

Die rede waarom dit werk, is die Vrydagaand stoot na Vercel. Sodra die URL bestaan, ontplooi elke Saterdag- en Sondag-commmit 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 om op die uitvoer te itereer. 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 lewendige voorbeskou-URL, dan outomaties ontplooi na produksie op main.

'n Vibe-gekodeerde Vercel-speletjie-naweek lyk so:

Maak die vaardigheid se begin-lêergids in Cursor oop.
Beskryf 'n kenmerk in klets: "dubbele sprong as spasie twee keer binne 200ms gedruk word".
Cursor wysig die beheerderlêer. Stoor. pnpm dev herlaai. Jy voel die sprong in die blaaier.
As dit reg voel, git push. Vercel bou 'n voorbeskou URL. Stuur dit vir 'n vriend.
Voeg saam tot main wanneer die gevoel vasgelê is. Produksie URL word binne 60 sekondes opgedateer.

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

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

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

1. Three.js + Vercel Speletjie Starter

Die verstek keuse. Genereer 'n Three.js-toneel met 'n spelerbeheerder, derdepersoonskamera, beligtingsinstallasie, skybox, en 'n grondvlak met botsings. Verskaf 'n vercel.json wat die regte kasopsies vir Three.js-bates bundels stel. pnpm dev loop plaaslik; een klik in die Vercel-dashboard koppel die GitHub-repo en jy het 'n lewendige URL.

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

2. Eerstepersoon Vercel Walker

'n Geboë eerstepersoonsbeheerder (WASD + muisaanwyser slot + swaartekrag + sprint + sprong) met voetstap-haakies, kop-skudding, en 'n vercel.json wat die aanwyser-slot CSP-opskrifte korrek hanteer. Hierdie een laat baie solo-ontwikkelaars in produksie struikel. Die vaardigheid los dit vir jou op.

Beste vir: stap-simulasies, gruwel prototipes, narratiewe speletjies, museum uitstallings.

3. Blaaier Arena Skieter Kit

'n Top-down arena (dubbelstok-beheerder, golfaanjaer, basiese vyand KI, projektiel stelsel, puntetelling HUD) met 'n Vercel-gestemde bou wat bates gzip, die KI kode-splits, en musiek lui-laai. Multiplayer-haakies ingesluit; die naweek verskaf enkelspeletjie.

Beste vir: arcade skieters, koeëlhel, jam inskrywings wat vinnig op selfone moet laai.

4. Vercel Legkaart Platformer

'n Derdepersoons platformer (veranderlike sprong, coyote-tyd, rand opsporing), kontrolepunte, drie stomvlakke wat jy in Blender of in kode kan wysig, en 'n respawn-lus. Die vercel.json is gekonfigureer vir onmiddellike rand-gekas vlak herlaai, sodat toetsing vinnig op 'n foon voel.

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

5. Vercel Ry Sandbak

Arcade-ry-gevoel (versnellingskurwe, dryf fisika, kamera vertraging, basiese terrein) met 'n lae-poligoon motor, 'n baan sjabloon, en 'n ontplooiing gestem vir groot terrein-nette. Vooraf ingestelde HTTP-opskrifte laat die WebGL-konteks vinniger begin op Safari, histories die stadigste blaaier vir Three.js.

Beste vir: arcade resies, veldryry, motor-gevoel demos 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 behou die volgorde. Die sleutel mylpaal is die Vrydagaand Vercel ontplooiing. Alles daarna is iterasie.

Vrydag 6nm - 8nm: Kies Vaardigheid, Stoot na GitHub, Koppel Vercel

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

Stap 2: Skep 'n GitHub repo en stoot. git init, git remote add, git push. Gebruik die slak van jou speletjie as die repo-naam (crystal-runner, lunar-fishing, wat ook al). Die repo-naam word dikwels jou URL.

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

Vrydag 8nm - 10nm: Skryf die Ontwerpdokument

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

Wat doen die speler elke 5 sekondes? (die kernlus)
Wat is die wen-kondisie en die verlies-kondisie?
Hoe lank is een rondte of een vlak?
Wat is die visuele haak? (palet, beligting, styl verwysing)
Wat is die een kenmerk wat hierdie een gedenkwaardig maak in 30 sekondes?

Stap 5: Committeer die ontwerpdokument. Stoot dit na die repo. Vercel sal weer ontplooi. Die dissipline van elke betekenisvolle verandering te stoot hou die lewendige URL eerlik.

Saterdag 9vm - 1nm: Bou die Kern Meganisme

Stap 6: Vervang die plekholder-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 nabygeleë vyande vir 2 sekondes en speel 'n klankie"). Itereer plaaslik met pnpm dev. Wanneer dit reg voel, stoot.

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

Saterdag 1nm - 8nm: Voeg Een Vlak By

Stap 8: Bou een gepoleerde vlak. Nie drie half-gebakte nie. Gebruik plekholder-blokkies vir geometrie. Gebruik die vaardigheid se voorraad karakter. Stel die gevoel in - spronghoogte, kamera-vertraging, deeltjie-intensiteit.

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

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

Sondag 10vm - 4nm: Poets

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

Stap 12: Voeg sap by. Deeltjies by treffer, skermskudding by impak, nommer-pop-ups by telling. Sap is wat 'n 48-uur bou soos 'n 6-maande een in 'n GIF laat lyk. Vra Cursor om 'n "skermskudding 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 foon oop en voer Chrome DevTools Lighthouse uit. Three.js-bundels is gewoonlik ongeveer 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: Fout-pas. Speel jou lewendige URL vyf keer agtereenvolgens. Los enigiets wat twee keer breek. Ignoreer enigiets wat een keer breek.

Sondag 4nm - 8nm: Begin

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

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

Stap 17: Skep 'n itch.io-bladsy (opsioneel maar met hoë hefboom). Titel, een-lyn slagspreuk, drie skermkiekies, die GIF, kontroles, krediete, en 'n inbedding van jou *.vercel.app iframe (itch.io ondersteun iframe inbeddings 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 dev-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 devlog-pos - ander ontwikkelaars wat saamlees sal dieselfde beginpunt 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-minute oplossings as jy dit op Vrydagaand vang, en 5-uur konyn-gate as jy dit Sondag om 7nm ontdek.

Verkeerde bou uitvoerdigitaliseerder. Vite verstek na dist/. Vercel outo-bespeur Vite en gebruik dist/. As jy die uitvoer aangepas het, stel outputDirectory in vercel.json of die projekinstellings, anders sal jou ontplooiing 'n 404 wees.
Batespaaie wat plaaslik werk maar in produksie 404 word. Gebruik relatiewe paaie of die Vite import.meta.env.BASE_URL hulp vir enige runtime-gelaaide GLB, tekstuur, of klanklêer. Vaste /assets/... paaie werk gewoonlik, maar kopie-geplakte absolute Windows-paaie sal absoluut nie.
CSP-opskrifte wat aanwyser-slot of klankkonteks blokkeer. Eerstepersoon-speletjies benodig aanwyser-slot. Klank benodig gebruikers-gebaar aktivering. Enige vaardigheid uit die 3D Games kategorie verskaf die regte headers blok in vercel.json om dit te hanteer. As jy jou eie van voor af geskryf het, kopieer die konfigurasie van die vaardigheid se repo.

Die ontplooiing werk op Vrydag, so wanneer dit Sondag breek, is dit altyd as gevolg van 'n onlangse verandering. git bisect is jou vriend. Nog beter: hou aan om elke 30 minute te stoot sodat die gebroke commmit klein is.

Gereelde Vrae

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

Ja, vir 'n naweek bekendstelling en die eerste paar weke. Gratis vlak gee jou 100 GB bandwydte per maand, wat ongeveer 20 000 speel van 'n 5 MB Three.js-bundel is. As jy daardie plafon tref, is die Pro plan $20/maand en verhoog dit na 1 TB. Vir 'n naweek-verskeping is gratis meer as genoeg. Vaardighede op Vibe Skills verskaf boukonfigurasies wat die bondelgrootte 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-wedstryd inskrywing?

Ja, en dit is een van die beste stapels vir wedstryd inskrywings. Die meeste wedstryde (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 wedstryd wenners verskeep na beide - itch.io vir die gamer-gehoor, Vercel as die vinnige kanonieke URL.

Moet ek Three.js ken voordat ek begin?

Jy benodig genoeg JavaScript om te lees wat Cursor skryf en waardes in te stel. Jy hoef nie Three.js van voor af te skryf nie. Die vaardighede op Vibe Skills genereer die enjin opstelling, kamera, beheerder, en boukonfigurasie. Cursor hanteer die spelkode uit jou beskrywings.

Wat gebeur as my Vercel bou Sondag om 7nm misluk?

Die mees algemene oorsaak is 'n TypeScript-fout of 'n ontbrekende omgewingsveranderlike. Vercel wys die bou-logboek met die mislukkende lyn uitgelig. Een klik in die dashboard rol terug na die laaste werkende ontplooiing en bevorder dit na produksie. Omdat elke stoot 'n voorbeskou ontplooiing is, is jy nooit meer as een commmit weg van 'n werkende bou nie. Dit is hoekom stoot elke 30 minute op Saterdag en Sondag belangrik is.

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 speletjie 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 itereer op die Three.js-skraapwerk van 'n Vibe Skills-vaardigheid. Die vaardigheid self is redigeerder-agnosties.

Begin Dit Hierdie Naweek

Die rede waarom die meeste solo-ontwikkelaars nooit 'n 3D-speletjie begin nie, is nie die enjin, die genre, of die vaardigheidsplafon nie. Dit is die Vrydagaand waar hulle "net 'n bietjie meer 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, stoot na GitHub, koppel Vercel, ontplooi teen Vrydag 8nm, spandeer dan Saterdag en Sondag om op 'n lewendige URL te itereer.

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

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

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