Vibe Skills

Böngésszen több száz kész készség között a Claude, a Cursor és mások számára.

Vasárnap estére küldj egy 3D játékot a Vercelen: A 48 órás bevetési útmutató

Péntek este egy üres lappal indulhatsz, és vasárnap vacsorára már a your-game.vercel.app linken lesz a játékod. A technológiai alap: Three.js, Cursor, egy mesterséges intelligencia készség a Vibe Skills oldalról, és a Vercel ingyenes szintje. Teljes költség a hétvégére: 0 dollár. Teljes infrastruktúra, amit felügyelned kell: szintén nulla.

Ez nem az, hogy "építs egy prototípust a laptopodon, és kész is". Ez egy nyilvános URL, amit bárki a világon megnyithat egy böngészőben, HTTPS-sel, él-gyorsítótárral és egyedi domainnel, ha szeretnél. A mesterséges intelligencia készség biztosítja a Three.js sablonkódot és egy működőképes vercel.json fájlt. A Cursor kezeli az iterációs ciklust. A Vercel kezeli a bevetést. Te pedig a dizájnt.

Ez az útmutató független fejlesztőknek, hangulatos kódolóknak, hackathon résztvevőknek és mindenkinek szól, aki unja a félkész localhost:5173 lapokat. Bemutatjuk, miért működik ez a technológiai alap, a 48 órás bevetés anatómiája, öt 3D játék mesterséges intelligencia készség, amelyek a munkafolyamathoz készültek, valamint a péntek-vasárnap lépésről lépésre.

Vibe Skills

Böngésszen több száz kész készség között a Claude, a Cursor és mások számára.

Fedezze fel a Készségeket

Kezdje el most ingyen

Miért a Vercel + Three.js + Mesterséges Intelligencia Készségek a Szóló Fejlesztői Verzió

A Vercel a lehető leglustább bevetési cél egy Three.js játékhoz. Feltolod a GitHubra, a Vercel észreveszi, felépíti a projektet, és 60 másodpercen belül visszaad egy URL-t. Nincs szerver, amit ki kellene provizionálni, nincs Docker fájl, nincs NGINX konfiguráció, nincs SSL beállítás. A Three.js csomag csak statikus HTML, JS és WebGL eszközöket tartalmaz, ami pontosan az, amit a Vercel élhálózata kiszolgálására építettek.

Az ingyenes szint kényelmesen lefedi a hétvégi indítást:

100 GB sávszélesség havonta. Egy 5 MB-os Three.js build 10 000 lejátszásnál 50 GB. Hamarabb fog elfogyni a hétvégéd, mint a sávszélességed.
Korlátlan statikus bevetés HTTPS-sel és *.vercel.app aldomainnel.
Egyedi domain támogatás az ingyenes szinten - hozd a saját name-game.com domainedet, ha van, egyébként az ingyenes vercel.app URL megosztható minden közösségi platformon.
Előzetes bevetések minden commitra - minden feltolásnak megvan a saját URL-je, így megoszthatsz egy buildet egy baráttal, és iterálhatsz anélkül, hogy valamit elrontanál.

Adjon hozzá egy mesterséges intelligencia készséget a Vibe Skills oldalról, és az előzetes kódot is eltüntetheted. A Three.js jelenet beállítása, a játékosvezérlő, a build pipeline és egy Vercel-kész vercel.json egy parancsra generálódik. Aztán a Cursor a hétvége többi részét egy beszélgetéssé alakítja, ahol leírod a kívánt játékmenetet, és finomhangolod a kimenetet. Ez a teljes technológia: egy piactéri készség az alapokhoz, egy AI szerkesztő az iterációhoz, és a Vercel a bevetéshez. Szóló, ingyenes és gyors.

Vibe Skills

Böngésszen több száz kész készség között a Claude, a Cursor és mások számára.

Fedezze fel a Készségeket

Kezdje el most ingyen

A 48 Órás Anatómia: Pénteki Koncepciótól Vasárnapi Bevetésig

Minden hétvégi sikeres bevetés ugyanazokat az ütemeket követi. A trükk az, hogy pénteken tervezd meg a bevetést, ne vasárnap délután, így az utolsó hat óra a finomításra menjen, ne pedig egy build hibával való küzdelemre.

Fázis	Idősáv	Mit csinálsz	Mi van bevetve a fázis végére
1. fázis: Koncepció	Péntek 18:00 - 22:00	Műfaj kiválasztása, 1 oldalas tervezési dokumentum írása, Vibe Skills 3D játék készség telepítése, indító feltolása GitHubra, csatlakozás a Vercelhez	Élő `name-game.vercel.app` URL az előzetes jelenettel
2. fázis: Építés	Szombat 9:00 - 20:00	Helyőrző csere a mag mechanikával, 1 szint hozzáadása, nyerő/vesztő állapot működésre állítása	Játékra kész build ugyanazon a Vercel URL-en, automatikus bevetés minden feltoláskor
3. fázis: Finomítás	Vasárnap 10:00 - 16:00	Hang, "juice", bemutató ablak, hibajavítás, teljesítményellenőrzés mobilon	Egy build, ami az első 60 másodpercben nem fagy le semmilyen eszközön
4. fázis: Indítás	Vasárnap 16:00 - 20:00	Egyedi domain beállítása (opcionális), GIF felvétele, itch.io oldal írása, link megosztása	Nyilvános URL + itch.io oldal + indító poszt a közösségi oldalakon

Az ok, amiért ez működik, a pénteki Vercelre való feltolás. Miután az URL létezik, minden szombati és vasárnapi commit automatikusan bevetődik. Nincs "vasárnap esti bevetési pánik", mert a bevetés már pénteken megtörtént, és az egész hétvégén automatikus üzemmódban futott.

Milyen a "Hangulatos Kódolás" Egy 3D Játékhoz a Vercelen

A hangulatos kódolás azt jelenti, hogy leírod, mit akarsz, egyszerű angollal, és hagyod, hogy egy AI szerkesztő megírja a kódot, majd iterálsz a kimeneten. Egy Three.js játékhoz a Vercelen, az iterációs ciklus szokatlanul tiszta: minden változtatás a Cursorban egy pnpm dev távolságra van a helyi visszajelzéstől, majd egy git push távolságra egy élő előnézeti URL-től, majd automatikusan bevetődik a productionbe a main ágon.

Egy hangulatosan kódolt Vercel játék hétvége így néz ki:

Nyisd meg a készség indító mappáját a Cursorban.
Írj le egy funkciót a csevegésben: "dupla ugrás, ha a szóközt kétszer megnyomod 200 ms-on belül".
A Cursor szerkeszti a vezérlő fájlt. Mentés. pnpm dev újra betöltődik. Érzed az ugrást a böngészőben.
Ha jónak tűnik, git push. A Vercel felépít egy előnézeti URL-t. Küldd el egy barátnak.
Egyesítsd a main ágba, ha az érzés rögzült. A production URL 60 másodpercen belül frissül.

Az AI gépel. A Vercel bevet. Te pedig az érzésért és a dizájn dolgokért vagy felelős.

5 AI 3D Játék Készség, Amely Lehetővé Teszi Ezt a Vibe Skills-en

Ezek a készségek a Vercel + Three.js + Cursor hétvégi munkafolyamathoz készültek. Mindegyik egy Vite alapú Three.js projektet, egy működő vercel.json fájlt, egy pnpm build parancsot, amely egy statikus csomagot állít elő, amit a Vercel az élről tud kiszolgálni, és egy tesztelt bevetési útvonalat tartalmaz. Mindegyik a 3D Játékok kategóriában található a Vibe Skills-en.

1. Three.js + Vercel Játék Indító

Az alapértelmezett választás. Létrehoz egy Three.js jelenetet játékosvezérlővel, harmadik személyű kamerával, világítási rendszerrel, égbolttal és egy ütközővel rendelkező talajjal. Tartalmaz egy vercel.json fájlt, amely a megfelelő gyorsítótár fejlécet állítja be a Three.js eszközcsomagokhoz. A pnpm dev helyileg fut; egy kattintás a Vercel irányítópulton összekapcsolja a GitHub tárat, és máris van egy élő URL-ed.

Legjobb: bármilyen műfajhoz, kivéve a tiszta 2D-t. Használd ezt, ha még nem tudod, mit építesz.

2. Első Személyű Vercel Sétáló

Egy kifinomult első személyű vezérlő (WASD + egérzár + gravitáció + sprint + ugrás) lépéshang kampókkal, fej-rázkódással, és egy vercel.json fájl, amely helyesen kezeli a mutatózár CSP fejlécét. Ez sok szóló fejlesztőt megtréfál a productionben. A készség megoldja neked.

Legjobb: sétáló szimulátorokhoz, horror prototípusokhoz, narratív játékokhoz, múzeumi kiállításokhoz.

3. Böngésző Aréna Lövöldözős Készlet

Egy felülnézetes aréna (kétkaros vezérlő, hullámgenerátor, alapvető ellenséges AI, projectile rendszer, pontszám HUD) egy Vercel-re hangolt builddel, amely tömöríti az eszközöket, kódra bontja az AI-t, és késleltetve tölti be a zenét. Többjátékos kampók is benne vannak; a hétvégi verzió szóló játékosra készült.

Legjobb: arcade lövöldözősök, bullet hell, jam nevezések, amelyeknek gyorsan kell betöltődniük mobilon.

4. Vercel Puzzle Platformer

Egy harmadik személyű platformer (változtatható ugrás, kutyaitató idő, párkány észlelés), ellenőrző pontok, három csonkszint, amit Blenderben vagy kódban szerkeszthetsz, és egy újraélesztési ciklus. A vercel.json fájl úgy van konfigurálva az azonnali él-gyorsítótárazott szint újratöltéséhez, hogy a telefonon való tesztelés gyorsnak érződjön.

Legjobb: puzzle platformerokhoz, parkour prototípusokhoz, szinttervezési kísérletekhez.

5. Vercel Vezetési Sandbox

Arcade vezetési érzés (gyorsulási görbe, sodródási fizika, kamera késleltetés, alapvető terep) egy alacsony poligonú autóval, egy pálya sablonnal, és egy nagy terep mesh-ekre optimalizált bevetéssel. Az előre beállított HTTP fejlécsek miatt a WebGL kontextus gyorsabban indul a Safari böngészőben, amely történelmileg a leglassabb böngésző a Three.js számára.

Legjobb: arcade versenyzéshez, terepvezetéshez, autós érzés demókhoz egy portfólióhoz.

Böngéssz minden 3D játék készség között a Vibe Skills oldalon →

Péntek-Vasárnap Lépésről Lépésre

Ez a pontos ütemterv. Állítsd be az időpontokat, de tartsd be a sorrendet. A kulcsfontosságú mérföldkő a péntek esti Vercel bevetés. Minden utána következő lépés iteráció.

Péntek 18:00 - 20:00: Készség kiválasztása, feltolás GitHubra, Vercel összekapcsolása

1. lépés: Válassz egy 3D játék készséget a Vibe Skills oldalon. Böngészd át a 3D Játékok kategóriát, válaszd ki a műfajodnak megfelelőt, és telepítsd az indítót egy új mappába. Nyisd meg a Cursorban. 19:00-ra egy mozgó játékossal rendelkező Three.js jelenetet kell látnod.

2. lépés: Hozz létre egy GitHub tárat és tolj fel. git init, git remote add, git push. Használd a játékod rövid nevét a tároló nevének (crystal-runner, lunar-fishing, bármi). A tároló neve gyakran lesz az URL-ed.

3. lépés: Kapcsold össze a tárat a Vercellel. Jelentkezz be a Vercelbe GitHub-on keresztül (ingyenes), kattints az "Új projekt hozzáadása" gombra, válaszd ki a tárat. A Vercel automatikusan felismeri a Vite-t és konfigurálja a buildet. Kattints a Bevetés gombra. 60 másodpercen belül kapsz egy crystal-runner.vercel.app URL-t. Nyisd meg a telefonodon. Oszd meg egy baráttal. A bevetési akadály most nulla a hétvége hátralévő részére.

Péntek 20:00 - 22:00: Írd meg a Tervezési Dokumentumot

4. lépés: Válaszolj öt kérdésre egyszerű angollal. Nyiss egy Notion oldalt vagy egy markdown fájlt a tárolón belül, és válaszolj:

Mit csinál a játékos 5 másodpercenként? (a mag körforgása)
Mi a nyerő feltétel és a vesztő feltétel?
Mennyi ideig tart egy kör vagy egy szint?
Mi az a vizuális fogás? (paletta, világítás, stílus referencia)
Mi az az egy funkció, ami 30 másodperc alatt emlékezetessé teszi?

5. lépés: Commite-old a tervezési dokumentumot. Tolld fel a tárolóba. A Vercel újra bevet. Az a fegyelem, hogy minden értelmes változtatást feltolsz, hogy az élő URL pontos maradjon.

Szombat 9:00 - 13:00: Építsd meg a Mag Mechanikát

6. lépés: Cseréld le a helyőrző mechanikát az egyetlen funkcióddal. Ez az egyetlen funkció, ami számít. Használd a Cursor csevegést a leírásához ("amikor a játékos felvesz egy kristályt, fagyassza le a közeli ellenségeket 2 másodpercre, és játsszon le egy csengőhangot"). Iterálj helyileg a pnpm dev parancscsal. Ha jól érzed, tolj fel.

7. lépés: Vezetékezze be a nyerő/vesztő állapotot. Egy 60 másodperces build egy valódi véggel játéknak érződik. Egy 60 perces build vége nélkül tech-demónak érződik. Mindig a nyerő képernyőt vezetékezd be először, aztán mindent mást.

Szombat 13:00 - 20:00: Adj hozzá egy szintet

8. lépés: Építs egy kifinomult szintet. Ne három félkész szintet. Használj helyőrző kockákat a geometriához. Használd a készség alap karakterét. Hangolj az érzésre - ugrásmagasság, kamera késleltetés, részecske intenzitás.

9. lépés: Adj hozzá egy bemutató felületet. Egy két mondatos "WASD a mozgáshoz, kattintás a lövéshez" ablak az első indításkor megmenti az indításodat a zavart játékosoktól, akik 8 másodperc után feladják. A Cursor 30 másodperc alatt képes generálni a React (vagy natív DOM) felületet.

10. lépés: Tolj fel minden órában. Minden feltolás kap egy Vercel előnézeti URL-t. Küldd el mindegyiket egy barátnak. Az iterációs ciklus a titkos fegyvere ennek a technológiának.

Vasárnap 10:00 - 16:00: Finomítás

11. lépés: Adj hozzá három hangot. Lépéshang hurok, ambient pad, nyerő dallam. Még három hang is drámaian emeli egy hétvégi prototípus szintjét. Ingyenes források: freesound.org, opengameart.org.

12. lépés: Adj hozzá "juice"-t. Részecskék ütéskor, képernyőrázkódás becsapódáskor, számok felugrása pontszerzéskor. A "juice" az, ami egy 48 órás buildet egy 6 hónaposnak láttat egy GIF-ben. Kérd meg a Cursort, hogy adjon hozzá egy "képernyőrázkódást 0.3 intenzitással 150 ms-ig, amikor a játékos sérülést szenved" - ez öt másodperc alatt megírja a kamera-rázkódás kampót.

13. lépés: Futtass egy Lighthouse tesztet. Nyisd meg a Vercel URL-t telefonon, és futtasd a Chrome DevTools Lighthouse-t. A Three.js csomagok általában 400 KB és 1.5 MB között vannak. Ha 3 MB fölé kerülsz, kérd meg a Cursort, hogy engedélyezze a kód bontását a nehéz modulokon. A Vercel gzip és brotli gondoskodik a többi teendőről.

14. lépés: Hibajavítás. Játssz az élő URL-eddel ötször egymás után. Javítsd meg, ami kétszer törik el. Hagyd figyelmen kívül, ami egyszer törik el.

Vasárnap 16:00 - 20:00: Indítás

15. lépés: (Opcionális) Állíts be egyedi domaint. Ha előre megvetted a name-game.com domaint, add hozzá a Vercel projekt beállításaiban. Az SSL automatikus. Máskülönben a *.vercel.app URL is rendben van - HTTPS-sel rendelkezik, megosztható, és mindenhol betöltődik.

16. lépés: Vegyél fel egy 15 másodperces GIF-et a legjobb pillanatról. Használd az élő URL-t, ne a localhost-ot. A GIF az, ami a Twitteren, a Bluesky-n és a Redditen kattintásokat generál.

17. lépés: Hozz létre egy itch.io oldalt (opcionális, de nagy hatású). Cím, egy mondatos alcím, három képernyőkép, a GIF, vezérlők, kreditek, és egy beágyazott *.vercel.app iframe (az itch.io támogatja az iframe beágyazásokat HTML5 játékokhoz). Most már két URL-ed van - egy az alkalmi megosztáshoz és egy a játékosok számára.

18. lépés: Posztold a linket. Twitter, Bluesky, a fejlesztői közösségi Discord szervered, r/IndieDev, r/threejs, r/WebGames. Mindig a GIF-fel kezdd. Mindig tartalmazza az URL-t. Ha Vibe Skills készséget használtál, említsd meg a fejlesztői napló bejegyzésében - a többi fejlesztő, aki olvassa, ugyanazt az indítót fogja akarni.

Hogyan Kerüld El a Három Leggyakoribb Vercel Bevetési Hibát

Három dolog töri össze szinte minden szóló Three.js + Vercel hétvégét. Mindhárom 5 perces javítás, ha péntek este elkapod őket, és 5 órás nyúlüreg, ha vasárnap este 7-kor fedezed fel őket.

Hibás build kimeneti könyvtár. A Vite alapértelmezettje a dist/. A Vercel automatikusan felismeri a Vite-t és a dist/-t használja. Ha módosítottad a kimenetet, állítsd be az outputDirectory értéket a vercel.json fájlban vagy a projektbeállításokban, különben a bevetésed 404-es hibát fog eredményezni.
Helyi szinten működő, de productionben 404-es hibát eredményező eszköz útvonalak. Használj relatív útvonalakat vagy a Vite import.meta.env.BASE_URL segédprogramját bármilyen futási idejű GLB, textúra vagy hangfájl esetén. A keményen kódolt /assets/... útvonalak általában működnek, de a másolt és beillesztett abszolút Windows útvonalak szinte biztosan nem.
CSP fejlécsek, amelyek blokkolják a mutatózárolást vagy a hangkontextust. Az első személyű játékokhoz mutatózárolásra van szükség. A hanghoz felhasználói gesztus aktiválása szükséges. Bármelyik készség a 3D Játékok kategóriából tartalmazza a megfelelő headers blokkot a vercel.json fájlban ezek kezeléséhez. Ha magad írtad a kódot nulláról, másold át a konfigurációt a készség tárolójából.

A bevetés pénteken működik, tehát amikor vasárnap hibásodik meg, az mindig egy nemrégiben történt változás miatt van. A git bisect a barátod. Még jobb: tolj fel 30 percenként, így a hibás commit kicsi lesz.

Gyakran Ismételt Kérdések

Fogja az ingyenes Vercel szint bírni, ha a játékom forgalmat kap?

Igen, egy hétvégi indításhoz és az első néhány hétre. Az ingyenes szint 100 GB sávszélességet biztosít havonta, ami nagyjából 20 000 lejátszásnak felel meg egy 5 MB-os Three.js build esetén. Ha eléred ezt a határt, a Pro csomag 20 dollár/hónap, és 1 TB-ra emeli. Egy hétvégi bevetéshez az ingyenes szint bőségesen elég. A Vibe Skills készségei olyan build konfigurációkkal rendelkeznek, amelyek minimalizálják a csomag méretét, így az ingyenes szintet tovább nyújtják.

Használhatok egyedi domaint az ingyenes Vercel szinten?

Igen. Az ingyenes szint támogatja az egyedi domaineket automatikus HTTPS-sel. Vásárolj egy domaint (Namecheap, Cloudflare Registrar, Porkbun), irányítsd a Vercelre, és a Vercel gondoskodik az SSL tanúsítványról. A beállítás körülbelül 10 percet vesz igénybe. Ha nincs domained, a name-game.vercel.app URL elég rövid ahhoz, hogy bármely platformon megosztható legyen.

Ez a technológia rendben van egy játék jam nevezéshez?

Igen, és ez az egyik legjobb technológia a jam nevezésekhez. A legtöbb jam (Ludum Dare, GMTK, js13k, GitHub Game Off) elfogad bármilyen web-játszható URL-t. Egy *.vercel.app link pontosan úgy működik a bírók számára, mint egy itch.io URL. Sok jam győztes mindkettőre bevet, az itch.io a játékosoknak, a Vercel pedig a gyors, kanonikus URL-ként.

Tudnom kell a Three.js-t, mielőtt elkezdem?

Elegendő JavaScript tudásra van szükséged ahhoz, hogy elolvasd, mit ír a Cursor, és finomhangold az értékeket. Nem kell nulláról Three.js kódot írnod. A Vibe Skills készségei generálják a motor beállítását, a kamerát, a vezérlőt és a build konfigurációt. A Cursor kezeli a játékmenet kódot az utasításaid alapján.

Mi történik, ha a Vercel buildem vasárnap este 7-kor meghibásodik?

A leggyakoribb ok a TypeScript hiba vagy egy hiányzó környezeti változó. A Vercel megmutatja a build naplót a hibás sorral kiemelve. Egy kattintással az irányítópulton visszavonhatod az utolsó működő bevetést, és előrébb léptetheted a productionbe. Mivel minden feltolás egy előnézeti bevetés, soha nem vagy több mint egy commit távolságra egy működő buildtől. Ezért fontos szombaton és vasárnap 30 percenként feltolni.

Eladhatom vagy módosíthatom a Vibe Skills 3D játék készség kódját?

Igen. A Vibe Skills készségei kereskedelmi célokra alkalmas licenccel rendelkeznek, amely lehetővé teszi, hogy a kódot saját játékaidban vezesd be a Vercelen, itch.io-n, Steam-en vagy bárhol máshol. Az alkotók megtartják a készség IP-jét, te pedig a rá épített játék IP-jét.

Mi van, ha nem akarom használni a Cursort?

Bármelyik AI szerkesztő, amely képes projektfájlokat szerkeszteni, működik. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - bármelyik képes iterálni a Three.js sablonkódon egy Vibe Skills készségből. Maga a készség szerkesztő-agnosztikus.

Küldd Be Ezen a Hétvégén

Az oka, amiért a legtöbb szóló fejlesztő soha nem küld be 3D játékot, nem a motor, a műfaj vagy a készség mennyezete. Ez a péntek este, amikor "még egy kicsit kutatnak" és soha nem kezdenek hozzá. A következő szabad hétvégéden kövesd a négy fázisú tervet: telepíts egy Vibe Skills 3D játék készséget, tolj fel a GitHubra, kapcsold össze a Vercelt, deploy-olj péntek este 8-ig, majd töltsd a szombatot és a vasárnapot egy élő URL iterálásával.

A tíz hétvégi bevetésű játékból álló portfóliód a Vercelen többet ér, mint a hipotetikus hat hónapos álom motor projekted. A bevetett mindig nyer. Az ingyenes Vercel URL a bizonyíték.

Böngéssz 3D játék készségek között a Vibe Skills oldalon →

Hagyd ki a Three.js előzetes sablon marathon. Telepíts egy 3D játék készséget a Vibe Skills oldalon, tolj fel a Vercelre, és legyen egy élő URL-ed vasárnap estére.