Vibe Skills

Prezrite si stovky pripravených zručností pre Claude, Cursor a ďalšie.

Spustite 3D hru na Vercel do nedele večer: Príručka na nasadenie za 48 hodín

Od piatkového večera bez ničoho až po odkaz your-game.vercel.app do nedeľného obeda. Použitý stack je Three.js, Cursor, AI schopnosť z Vibe Skills a bezplatná úroveň Vercel. Celkové náklady na víkend: 0 $. Celková infraštruktúra, ktorú musíte kontrolovať: tiež nula.

Toto nie je "postavte prototyp na svojom notebooku a nazvite to hotovým". Toto je verejný URL, ktorý si ktokoľvek na svete môže otvoriť v prehliadači, s HTTPS, okrajovým ukladaním do vyrovnávacej pamäte a vlastnou doménou, ak ju chcete. AI schopnosť poskytuje kostru Three.js a funkčný súbor vercel.json. Cursor sa stará o iteráciu. Vercel sa stará o nasadenie. Vy sa staráte o dizajn.

Tento návod je určený pre nezávislých vývojárov, vibe kódovačov, účastníkov hackathonov a každého, koho unavujú nedokončené karty localhost:5173. Pokryjeme, prečo tento stack funguje, anatómiu nasadenia za 48 hodín, päť AI schopností pre 3D hry vytvorených pre tento pracovný postup a postup krok za krokom od piatku do nedele.

Vibe Skills

Prezrite si stovky pripravených zručností pre Claude, Cursor a ďalšie.

Objavte zručnosti

Začnite teraz zadarmo

Prečo je Vercel + Three.js + AI schopnosti stack pre sólo vývojárov

Vercel je najlenivejší možný cieľ pre nasadenie hry Three.js. Pošlite do GitHubu, Vercel si to všimne, zostaví projekt a do 60 sekúnd vám vráti URL. Žiadny server na zaobstaranie, žiadny Docker súbor, žiadna konfigurácia NGINX, žiadne nastavenie SSL. Balík Three.js je len statické HTML, JS a WebGL prostriedky, čo je presne to, na čo bola sieť Vercel edge postavená.

Bezplatná úroveň pohodlne pokryje víkendové spustenie:

100 GB pásma mesačne. 5 MB zostava Three.js pri 10 000 prehraniach je 50 GB. Skôr vám dôjde víkend, ako vám dôjde pásmo.
Neobmedzené statické nasadenia s HTTPS a poddomenu *.vercel.app.
Podpora vlastných domén na bezplatnej úrovni - prinesiete si vlastnú name-game.com, ak ju máte, inak je bezplatný URL vercel.app zdieľateľný na každej sociálnej platforme.
Ukážkové nasadenia pre každý commit - každý push dostane svoj vlastný URL, takže môžete zdieľať zostavu s priateľom a pokračovať v iterácii bez toho, aby ste ju pokazili.

Pridajte AI schopnosť z Vibe Skills a nadbytočný kód tiež zmizne. Nastavenie scény Three.js, ovládač hráča, zostavovací pipeline a súbor vercel.json pripravený pre Vercel sa generujú jedným príkazom. Potom Cursor premení zvyšok víkendu na konverzáciu, kde popisujete hrateľnosť, ktorú chcete, a ladíte výstup. To je plný stack: trhová schopnosť pre základy, AI editor pre iteráciu a Vercel pre nasadenie. Sólo, zadarmo a rýchlo.

Vibe Skills

Prezrite si stovky pripravených zručností pre Claude, Cursor a ďalšie.

Objavte zručnosti

Začnite teraz zadarmo

Anatómia za 48 hodín: Od piatkového konceptu po nedeľné nasadenie

Každé víkendové nasadenie, ktoré sa skutočne uskutoční, sleduje rovnaké kroky. Trik spočíva v naplánovaní nasadenia na piatok, nie na nedeľné popoludnie, aby posledných šesť hodín pripadlo na leštenie namiesto boja s chybou zostavy.

Fáza	Časový blok	Čo robíte	Čo je dodané na konci fázy
Fáza 1: Koncept	Piatok 18:00 - 22:00	Vyberte žáner, napíšte 1-stránkový dizajn dokument, nainštalujte AI schopnosť pre 3D hry Vibe Skills, pošlite štartér do GitHubu, pripojte k Vercel	Živý URL `name-game.vercel.app` s kostrou scény
Fáza 2: Zostava	Sobota 9:00 - 20:00	Nahraďte zástupný symbol svojou základnou mechanikou, pridajte 1 úroveň, rozbehnite stav víťazstva/prehry	Hrateľná zostava na rovnakom URL Vercel, automaticky nasadená pri každom puši
Fáza 3: Leštenie	Nedeľa 10:00 - 16:00	Zvuk, efekty, vyskakovacie okno s návodom, kontrola chýb, kontrola výkonu na mobile	Zostava, ktorá sa do 60 sekúnd nezlomí na žiadnom zariadení
Fáza 4: Spustenie	Nedeľa 16:00 - 20:00	Nastavte vlastnú doménu (voliteľné), nahrajte GIF, napíšte stránku itch.io, zverejnite odkaz	Verejný URL + stránka itch.io + spúšťací príspevok na sociálnych sieťach

Dôvodom, prečo to funguje, je piatkový push na Vercel. Akonáhle existuje URL, každý sobotný a nedeľný commit sa automaticky nasadí. Neexistuje žiadna "panika z nasadenia v nedeľu večer", pretože nasadenie sa už uskutočnilo v piatok a celý víkend bežalo na autopilota.

Ako vyzerá "Vibe kódovanie" 3D hry na Vercel

Vibe kódovanie znamená opisovať, čo chcete, v bežnej angličtine a nechať AI editor písať kód, potom iterovať na výstupe. Pre hru Three.js na Vercel je cyklus neobvykle čistý: každá zmena v Cursore je vzdialená pnpm dev od lokálnej spätnej väzby, potom git push od živého náhľadového URL a potom automaticky nasadená do produkcie na main.

Víkend hry vibe-kódovanej na Vercel vyzerá takto:

Otvorte štartovací priečinok schopnosti v Cursore.
Opíšte funkciu v chate: "dvojitý skok, ak je stlačená medzerník dvakrát do 200 ms".
Cursor upraví súbor ovládača. Uložiť. pnpm dev sa znovu načíta. Cítite skok v prehliadači.
Ak sa to zdá správne, git push. Vercel zostaví náhľadový URL. Pošlite ho priateľovi.
Zlúčte do main, keď je pocit uzamknutý. Produkčný URL sa aktualizuje do 60 sekúnd.

AI vykonáva písanie. Vercel vykonáva nasadenie. Vy vykonávate pocit a dizajn.

5 AI schopností pre 3D hry, ktoré to umožňujú na Vibe Skills

Tieto schopnosti sú vytvorené pre víkendový pracovný postup Vercel + Three.js + Cursor. Každá z nich dodáva projekt Three.js založený na Vite, funkčný vercel.json, zostavu pnpm build, ktorá produkuje statický balík, ktorý môže Vercel slúžiť z okraja, a otestovanú cestu nasadenia. Všetky sú v kategórii 3D Games na Vibe Skills.

1. Three.js + Vercel Game Starter

Predvolená voľba. Generuje scénu Three.js s ovládačom hráča, kamerou z pohľadu tretej osoby, osvetľovacou súpravou, oblohou a pozemnou rovinou s kolíziami. Dodáva sa s vercel.json, ktorý nastavuje správne hlavičky cache pre balíky prostriedkov Three.js. pnpm dev beží lokálne; jedným kliknutím v konzole Vercel prepojíte repozitár GitHub a získate živý URL.

Najlepšie pre: akýkoľvek žáner okrem čisto 2D. Použite toto, ak ešte neviete, čo staviate.

2. First-Person Vercel Walker

Vylepšený ovládač z pohľadu prvej osoby (WASD + uzamknutie kurzora myši + gravitácia + beh + skok) so závesmi na kroky, hojdaním hlavy a vercel.json, ktorý správne spracúva hlavičky CSP pre uzamknutie kurzora. Toto často zamrzí mnohých sólo vývojárov v produkcii. Schopnosť to vyrieši pre vás.

Najlepšie pre: simulačné hry, hororové prototypy, naratívne hry, múzejné expozície.

3. Browser Arena Shooter Kit

Aréna z pohľadu zhora nadol (ovládač s dvoma páčkami, generátor vĺn, základné AI nepriateľa, systém projektilov, HUD skóre) s zostavou vyladenou pre Vercel, ktorá komprimuje prostriedky, rozdeľuje kód AI a načíta hudbu lenivým načítaním. Zahŕňa háky pre multiplayer; víkend dodáva single-player.

Najlepšie pre: arkádové strieľačky, bullet hell, jam príspevky, ktoré sa musia rýchlo načítať na mobile.

4. Vercel Puzzle Platformer

Platformová hra z pohľadu tretej osoby (variabilný skok, čas coyote, detekcia okrajov), kontrolné body, tri predlohy úrovní, ktoré môžete upravovať v Blende alebo v kóde, a cyklus respawn. Súbor vercel.json je nakonfigurovaný pre okamžité opätovné načítanie úrovní s okrajovou cache, takže testovanie hry na telefóne je rýchle.

Najlepšie pre: logické platformovky, parkourové prototypy, experimenty s dizajnom úrovní.

5. Vercel Driving Sandbox

Arkádový pocit z jazdy (krivka zrýchlenia, fyzika driftu, oneskorenie kamery, základný terén) s nízko-polygonovým autom, šablónou trate a nasadením vyladeným pre veľké sieťoviny terénu. Prednastavené HTTP hlavičky spôsobia, že kontext WebGL sa v Safari spustí rýchlejšie, čo je historicky najpomalší prehliadač pre Three.js.

Najlepšie pre: arkádové preteky, jazdu v teréne, ukážky pocitu z jazdy pre portfólio.

Prezrite si všetky 3D herné schopnosti na Vibe Skills →

Postup krok za krokom od piatku do nedele

Toto je presný rozpis. Upravte čas začiatku, ale zachovajte poradie. Kľúčovým míľnikom je piatkové večerné nasadenie na Vercel. Všetko potom je iterácia.

Piatok 18:00 - 20:00: Vyberte schopnosť, push do GitHubu, pripojte Vercel

Krok 1: Vyberte si 3D hernú schopnosť na Vibe Skills. Prejdite si kategóriu 3D Games, vyberte tú, ktorá zodpovedá vášmu žánru, a nainštalujte štartér do nového priečinka. Otvorte ho v Cursore. Do 19:00 by ste mali vidieť scénu Three.js s pohybujúcim sa hráčom.

Krok 2: Vytvorte repozitár GitHub a pushnite. git init, git remote add, git push. Použite skratku vašej hry ako názov repozitára (crystal-runner, lunar-fishing, čokoľvek). Názov repozitára sa často stane vaším URL.

Krok 3: Pripojte repozitár k Vercel. Prihláste sa do Vercel pomocou GitHubu (zadarmo), kliknite na "Add New Project", vyberte repozitár. Vercel automaticky rozpozná Vite a nakonfiguruje zostavu. Kliknite na Deploy. Do 60 sekúnd získate URL crystal-runner.vercel.app. Otvorte ho na svojom telefóne. Zdieľajte s jedným priateľom. Panel nasadenia je teraz nulový po zvyšok víkendu.

Piatok 20:00 - 22:00: Napíšte dizajnový dokument

Krok 4: Odpovedzte na päť otázok v bežnej angličtine. Otvorte stránku Notion alebo markdown súbor vo vnútri repozitára a odpovedzte:

Čo hráč robí každých 5 sekúnd? (hlavná slučka)
Aká je podmienka víťazstva a podmienka prehry?
Ako dlho trvá jeden beh alebo jedna úroveň?
Aký je vizuálny háčik? (paleta, osvetlenie, referenčný štýl)
Aká je jedna funkcia, ktorá to robí zapamätateľným za 30 sekúnd?

Krok 5: Commitnite dizajnový dokument. Pushnite ho do repozitára. Vercel sa znovu nasadí. Disciplína pushovať každú zmysluplnú zmenu udržuje živý URL čestný.

Sobota 9:00 - 13:00: Zostavte základnú mechaniku

Krok 6: Nahraďte zástupný symbol mechanikou s vašou jednou funkciou. Toto je jediná funkcia, na ktorej záleží. Použite chat Cursor na opis: "keď hráč získa kryštál, zmrazí blízkych nepriateľov na 2 sekundy a prehrá zvonkohru". Iterujte lokálne pomocou pnpm dev. Keď sa to zdá správne, pushnite.

Krok 7: Zapojte stav víťazstva/prehry. 60-sekundová zostava s reálnym koncom pôsobí ako hra. 60-minútová zostava bez konca pôsobí ako technická ukážka. Vždy najprv zapojte obrazovku víťazstva, potom všetko ostatné.

Sobota 13:00 - 20:00: Pridajte jednu úroveň

Krok 8: Zostavte jednu vyleštenú úroveň. Nie tri polovičnato urobené. Použite zástupné kocky na geometriu. Použite štandardnú postavu zo schopnosti. Nalaďte pocit - výšku skoku, oneskorenie kamery, intenzitu častíc.

Krok 9: Pridajte prekrývaciu vrstvu s návodom. Dvojvetový výskok "WASD pre pohyb, kliknutím strieľajte" pri prvom spustení zachráni vaše spustenie pred zmätenými hráčmi, ktorí sa vzdajú za 8 sekúnd. Cursor dokáže vygenerovať prekrývaciu vrstvu React (alebo vanilla DOM) za 30 sekúnd.

Krok 10: Pushnite každú hodinu. Každý push získa náhľadový URL Vercel. Pošlite každý priateľovi. Slučka spätnej väzby je tajnou zbraňou tohto stacku.

Nedeľa 10:00 - 16:00: Leštenie

Krok 11: Pridajte tri zvuky. Slučka krokov, ambientná podložka, znie to ako víťazstvo. Dokonca aj tri zvuky výrazne pozdvihnú víkendový prototyp. Bezplatné zdroje: freesound.org, opengameart.org.

Krok 12: Pridajte efekty (juice). Častice pri zásahu, trasenie obrazovky pri náraze, číselné pop-upy pri skóre. Juice je to, čo robí zo zostavy za 48 hodín v GIFe zostavu za 6 mesiacov. Požiadajte Cursor o pridanie "trasenia obrazovky s intenzitou 0,3 na 150 ms, keď hráč utrpí poškodenie" - napíše háčik na trasenie kamery za päť sekúnd.

Krok 13: Spustite Lighthouse test. Otvorte URL Vercel na telefóne a spustite Chrome DevTools Lighthouse. Balíky Three.js sú zvyčajne okolo 400 KB až 1,5 MB. Ak ste nad 3 MB, požiadajte Cursor o povolenie rozdelenia kódu na ťažké moduly. Zvyšok zariadi Vercel (gzip a brotli).

Krok 14: Prejdite kontrolu chýb. Prehrajte svoj živý URL päťkrát za sebou. Opravte čokoľvek, čo sa zlomí dvakrát. Ignorujte čokoľvek, čo sa zlomí raz.

Nedeľa 16:00 - 20:00: Spustenie

Krok 15: (Voliteľné) Nastavte vlastnú doménu. Ak ste si vopred kúpili name-game.com, pridajte ju v nastaveniach projektu Vercel. SSL je automatický. Inak je URL *.vercel.app v poriadku - má HTTPS, je zdieľateľný a načíta sa všade.

Krok 16: Nahrajte 15-sekundové GIF najlepšieho momentu. Použite živý URL, nie localhost. GIF je to, na čo sa klikne na Twitteri, Bluesky a Reddite.

Krok 17: Vytvorte stránku itch.io (voliteľné, ale s vysokou návratnosťou). Názov, jednovetový slogan, tri snímky obrazovky, GIF, ovládanie, kredity a vložené iframe vášho *.vercel.app (itch.io podporuje vkladanie iframe pre HTML5 hry). Teraz máte dva URL - jeden pre bežné zdieľanie a druhý pre herné publikum.

Krok 18: Zverejnite odkaz. Twitter, Bluesky, váš Discord herná komunita, r/IndieDev, r/threejs, r/WebGames. Vždy začnite s GIF. Vždy zahrňte URL. Ak ste použili AI schopnosť Vibe Skills, spomeňte to v príspevku s denníkom vývoja - ostatní vývojári, ktorí čítajú, budú chcieť rovnaký štartér.

Ako sa vyhnúť trom najbežnejším chybám nasadenia na Vercel

Tri veci pokazia takmer každý víkendový projekt Three.js + Vercel. Všetky tri sú 5-minútové opravy, ak ich zachytíte v piatok večer, a 5-hodinové králičie nory, ak ich objavíte v nedeľu o 19:00.

Nesprávny adresár výstupu zostavy. Vite predvolene používa dist/. Vercel automaticky rozpozná Vite a používa dist/. Ak ste si prispôsobili výstup, nastavte outputDirectory v vercel.json alebo v nastaveniach projektu, inak bude vaše nasadenie 404.
Cesty k prostriedkom, ktoré fungujú lokálne, ale v produkcii dávajú 404. Použite relatívne cesty alebo pomocnú funkciu Vite import.meta.env.BASE_URL pre akékoľvek súbory GLB, textúry alebo zvukové súbory načítané za behu. Cesty s pevným kódovaním /assets/... zvyčajne fungujú, ale skopírované absolútne cesty Windows rozhodne nebudú.
Hlavičky CSP, ktoré blokujú uzamknutie kurzora alebo zvukový kontext. Hry z pohľadu prvej osoby potrebujú uzamknutie kurzora. Zvuk potrebuje aktiváciu používateľským gestom. Každá schopnosť z kategórie 3D Games dodáva správny blok headers v vercel.json na spracovanie tejto problematiky. Ak ste si napísali vlastný od začiatku, skopírujte konfiguráciu z repozitára schopnosti.

Nasadenie funguje v piatok, takže keď sa v nedeľu pokazí, je to vždy kvôli nedávnej zmene. git bisect je váš priateľ. Ešte lepšie: pushujte každých 30 minút, aby bol chybný commit malý.

Často kladené otázky

Vydrží bezplatná úroveň Vercel naozaj, ak moja hra získa návštevnosť?

Áno, pre víkendové spustenie a prvé týždne. Bezplatná úroveň vám dáva 100 GB pásma mesačne, čo je približne 20 000 prehratí 5 MB zostavy Three.js. Ak narazíte na tento strop, plán Pro stojí 20 $/mesiac a zvýši vám ho na 1 TB. Na víkendové spustenie je bezplatná úroveň viac než dostatočná. Schopnosti na Vibe Skills dodávajú konfiguračné zostavy, ktoré minimalizujú veľkosť balíka, čím sa bezplatná úroveň predlžuje.

Môžem použiť vlastnú doménu na bezplatnej úrovni Vercel?

Áno. Bezplatná úroveň podporuje vlastné domény s automatickým HTTPS. Kúpte si doménu (Namecheap, Cloudflare Registrar, Porkbun), nasmerujte ju na Vercel a Vercel sa postará o SSL certifikát. Nastavenie trvá asi 10 minút. Ak nemáte doménu, URL name-game.vercel.app je dostatočne krátky na zdieľanie na akejkoľvek platforme.

Je tento stack v poriadku na odoslanie do herného jamu?

Áno, a je to jeden z najlepších stackov pre herné jamy. Väčšina jamov (Ludum Dare, GMTK, js13k, GitHub Game Off) prijíma akýkoľvek webovo hrateľný URL. Odkaz *.vercel.app funguje pre porotcov presne ako odkaz itch.io. Mnohí víťazi jamov posielajú na obe miesta - itch.io pre herné publikum, Vercel ako rýchly kanonický URL.

Potrebujem pred začiatkom poznať Three.js?

Potrebujete dostatok JavaScriptu na čítanie toho, čo píše Cursor a ladenie hodnôt. Nemusíte písať Three.js od nuly. Schopnosti na Vibe Skills generujú nastavenie motora, kameru, ovládač a konfiguračný build. Cursor sa stará o kód hrateľnosti z vašich opisov.

Čo sa stane, ak môj build Vercel zlyhá v nedeľu o 19:00?

Najčastejšou príčinou je chyba TypeScript alebo chýbajúca premenná prostredia. Vercel zobrazí protokol zostavy so zvýrazneným chybným riadkom. Jedným kliknutím v konzole sa vrátite k poslednej funkčnej zostave a povýšite ju do produkcie. Pretože každý push je ukážkové nasadenie, nikdy nie ste ďalej ako jeden commit od funkčnej zostavy. Preto sa počíta pushovanie každých 30 minút v sobotu a nedeľu.

Môžem predávať alebo upravovať kód z AI schopnosti pre 3D hry Vibe Skills?

Áno. Schopnosti na Vibe Skills dodávajú komerčne priateľnú licenciu, ktorá vám umožňuje zverejniť kód vo vašej vlastnej hre na Vercel, itch.io, Steam alebo kdekoľvek inde. Tvorcovia si ponechávajú IP schopnosti, vy si ponechávate IP hry postavenej nad ňou.

Čo ak nechcem používať Cursor?

Funguje akýkoľvek AI editor, ktorý dokáže upravovať súbory projektu. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - ktorýkoľvek z nich dokáže iterovať na kostre Three.js zo schopnosti Vibe Skills. Samotná schopnosť je nezávislá od editora.

Spustite to tento víkend

Dôvodom, prečo väčšina sólo vývojárov nikdy nedokončí 3D hru, nie je engine, žáner alebo strop schopností. Je to piatkový večer, kedy "ešte trochu preskúmajú" a nikdy nezačnú. Nasledujúci voľný víkend, postupujte podľa štvorfázového plánu: nainštalujte AI schopnosť pre 3D hry Vibe Skills, pushnite do GitHubu, pripojte Vercel, nasadíte do piatku 20:00, potom strávte sobotu a nedeľu iteráciou na živom URL.

Vaše portfólio desiatich víkendovo spustených hier na Vercel má väčšiu cenu ako váš hypotetický šesťmesačný dream engine projekt. Spustená hra vždy vyhráva. Bezplatný URL Vercel je dôkazom.

Prezrite si 3D herné schopnosti na Vibe Skills →

Preskočte maratón s kostrou Three.js. Nainštalujte si AI schopnosť pre 3D hry na Vibe Skills, pushnite na Vercel a získajte živý URL do nedele večer.