Vibe Skills

Blêdzje troch hûnderten kleare feardichheden foar Claude, Cursor, en mear.

Skip dit wykein in 3D-spiel op Vercel: It 48-oere Deploy Playbook

Jo kinne fan freedtejûn leech nei de dyn-spiel.vercel.app link troch sneiniten. De stack is Three.js, Cursor, in AI-feardichheid fan Vibe Skills, en de Vercel fergese tier. Totale kosten foar it wykein: $0. Totale ynfrastruktuer dy't jo babysitte moatte: ek nul.

Dit is net "bou in prototype op jo laptop en neam it klear". Dit is in iepenbiere URL dy't elkenien yn 'e wrâld yn in browser iepenje kin, mei HTTPS, edge caching, en in oanpast domein as jo dat wolle. De AI-feardichheid skips de Three.js scaffolding en in wurkjende vercel.json. Cursor behannelt de ynnearringslus. Vercel behannelt de deploy. Jo dogge it ûntwerp.

Dizze gids is foar yndie-ûntwikkelders, vibe-koaders, hackathon-dielnimmers, en elkenien dy't de helte ôfmakke localhost:5173 tabbladen hat. Wy dekke wêrom't dizze stack wurket, de 48-oere deploy anatomy, fiif 3D-spylfeardichheden boud foar de workflow, en de freed-oant-snein stap-foar-stap.

Vibe Skills

Blêdzje troch hûnderten kleare feardichheden foar Claude, Cursor, en mear.

Ferkenne Feardichheden

Begjin no fergees

Wêrom Vercel + Three.js + AI Feardichheden Is de Solo Dev Stack

Vercel is it lafste mooglike deploy-doel foar in Three.js-spiel. Push nei GitHub, Vercel merkt it op, bouwt it projekt, en jout jo binnen 60 sekonden in URL werom. Gjin server om te foarsjen, gjin Docker-bestân, gjin NGINX-konfiguraasje, gjin SSL-ynstelling. De Three.js-bundle is gewoan statyske HTML, JS, en WebGL-aktiva, wat krekt is wêrfoar Vercel's edge-netwurk is boud om te tsjinjen.

De fergese tier dekt in wykeinlânsje noflik:

100 GB bandbreedte per moanne. In 5 MB Three.js-bouw mei 10.000 spultsjes is 50 GB. Jo rinne út it wykein foardat jo út de bandbreedte rinne.
Unbeheinde statyske deploys mei HTTPS en in *.vercel.app subdomein.
Aanpast domein stipe op de fergese tier - bring jo eigen namme-spiel.com as jo dy hawwe, oars is de fergese vercel.app URL te dielen op elk sosjaal platfoarm.
Foarbyld-deploys foar elke commit - elke push krijt syn eigen URL, sadat jo in bou diele kinne mei in freon en trochgean mei ynnearjen sûnder it te brekken.

Foegje in AI-feardichheid ta fan Vibe Skills en de boilerplate ferdwynt ek. Three.js-scène-ynstelling, spilerkontrôler, build-pipeline, en in Vercel-kleare vercel.json wurde yn ien kommando generearre. Dan makket Cursor de rest fan it wykein in petear wêryn't jo it spultsje beskriuwe dat jo wolle en de útfier fine. Dat is de folsleine stack: in merkplak-feardichheid foar de stifting, in AI-bewurker foar ynnearring, en Vercel foar de deploy. Solo, fergees, en fluch.

Vibe Skills

Blêdzje troch hûnderten kleare feardichheden foar Claude, Cursor, en mear.

Ferkenne Feardichheden

Begjin no fergees

De 48-oere Anatomy: Freed Konsept nei Snein Deploy

Elk wykein skip dat eins live giet, folget deselde beats. De trúk is om de deploy op freed te plannen, net sneintemiddei, sadat de lêste seis oeren nei polish gean ynstee fan te fjochtsjen mei in bouflater.

Fase	Tiidblok	Wat jo dogge	Wat wurdt skip troch ein fan faze
Fase 1: Konsept	Freed 18:00 - 22:00	Kies sjenre, skriuw 1-side ûntwerpdoc, ynstallearje Vibe Skills 3D-spylfeardichheid, push starter nei GitHub, ferbine mei Vercel	Live `namme-spiel.vercel.app` URL mei de boilerplate-scène
Fase 2: Bou	Sneon 9:00 - 20:00	Ferfang placeholder mei jo kearnmeganisme, foegje 1 nivo ta, krij win/ferliesstatus wurkjend	Spilebou op deselde Vercel URL, automatysk deployd by elke push
Fase 3: Polish	Snein 10:00 - 16:00	Lûd, sap, tutorial popup, bug pass, prestaasjeskontrôle op mobyl	In bou dy't net brekt yn de earste 60 sekonden op elk apparaat
Fase 4: Lansearring	Snein 16:00 - 20:00	Set oanpast domein (opsjoneel), nim GIF op, skriuw itch.io-side, pleats de link	Publike URL + itch.io-side + in lansearringspost op sosjale media

De reden dat dit wurket is de freed-push nei Vercel. Sadree't de URL bestiet, deploeit elke sneon- en sneon-commit automatysk. Der is gjin "snein-jûn deploy panik" om't de deploy al op freed bard is en de hiele wykein op autopilot rint.

Hoe't "Vibe Coding" in 3D-spyl op Vercel Sjocht

Vibe coding betsjut beskriuwe wat jo wolle yn gewoane taal en in AI-bewurker de koade litte skriuwe, dan ynnearjen op de útfier. Foar in Three.js-spiel op Vercel is de lus ûngewoan skjin: elke feroaring yn Cursor is in pnpm dev fuort fan lokale feedback, dan in git push fuort fan in live foarbyld-URL, dan automatysk deployd nei produksje op main.

In vibe-coded Vercel-spylwykein sjocht der sa út:

Iepenje de startmap fan de feardichheid yn Cursor.
Beskriuw in funksje yn petear: "dûbele sprong as de romte twa kear binnen 200ms wurdt yndrukt".
Cursor bewurket it controller-bestân. Bewarje. pnpm dev laadt opnij. Jo fiele de sprong yn de browser.
As it goed fielt, git push. Vercel bout in foarbyld-URL. Stjoer it nei in freon.
Gearfoegje nei main as it gefoel is beskoattele. Produksje-URL wurdt binnen 60 sekonden bywurke.

De AI docht it typen. Vercel docht de deploy. Jo dogge it gefoel en it ûntwerp.

5 AI 3D-Spyl Feardichheden Dy't Dit Mooglik Meitsje op Vibe Skills

Dizze feardichheden binne boud foar de Vercel + Three.js + Cursor wykein workflow. Elk skips mei in Vite-basearre Three.js-projekt, in wurkjende vercel.json, in pnpm build dy't in statyske bundle produseart dy't Vercel fan de edge tsjinje kin, en in testen deploy-paad. Alles is yn de 3D-spylkategory op Vibe Skills.

1. Three.js + Vercel Game Starter

De standert kar. Generearret in Three.js-scène mei in spilerkontrôler, treddepersoan-kamera, ferljochtingsrigel, skybox, en in grûnflak mei botsingen. Skips mei in vercel.json dat de juste caching-koppen foar Three.js asset-bûndels ynstelt. pnpm dev rint lokaal; ien klik yn it Vercel-dashboard ferbynt de GitHub-repo en jo hawwe in live URL.

It bêste foar: elk sjenre útsein pure 2D. Brûk dit as jo noch net witte wat jo bouwe.

2. First-Person Vercel Walker

In polearre earstepersoanskontrôler (WASD + mûs pointer-lock + swiertekrêft + sprint + sprong) mei fuotstappe-haken, kop-hobbeljen, en in vercel.json dy't de pointer-lock CSP-koppen korrekt behannelt. Dizze falt in soad solo-ûntwikkelders yn produksje. De feardichheid lost it foar jo op.

It bêste foar: kuier-sims, horror-prototypes, narratyf-spultsjes, museumútstallingen.

3. Browser Arena Shooter Kit

In boppeste-ûnder arena (twin-stick controller, weach-spawner, basis fijân AI, projectile systeem, skoare HUD) mei in Vercel-tune build dy't aktiva gzipet, de AI koade-splitst, en muzyk lazy-laden. Multiplayer-haken ynbegrepen; it wykein skips single-player.

It bêste foar: arcade shooters, bullet hell, jam-ynstjoerings dy't fluch moatte lade op mobyl.

4. Vercel Puzzle Platformer

In treddepersoansplatformer (fariabele sprong, coyote-tiid, lekken-deteksje), checkpoints, trije stub-nivo's dy't jo yn Blender of koade bewurkje kinne, en in respawn-lus. De vercel.json is konfigurearre foar direkte edge-cached nivo-herladen, dus spieljen fielt rap op in tillefoan.

It bêste foar: puzzle-platformers, parkour-prototypes, nivo-ûntwerp-eksperiminten.

5. Vercel Driving Sandbox

Arcade-ritsje-gefoel (fersnellingskromme, driftfysika, kamera-fertraging, basis-terrein) mei in low-poly auto, in spoar-template, en in deploy-tune foar grutte terrein-meshjes. Foarôf ynstelde HTTP-koppen meitsje de WebGL-kontekst rapper op Safari, histoarysk de stadichste browser foar Three.js.

It bêste foar: arcade-races, off-road riden, auto-gefoel-demo's foar in portfolio.

Blêdzje alle 3D-spylfeardichheden op Vibe Skills troch →

Freed-oant-Snein Stap-foar-Stap

Dit is it krekte skema. Pas de starttiid oan, mar hâld de folchoarder. De kaaimileage is de freedtejûn Vercel-deploy. Alles dêrnei is ynnearring.

Freed 18:00 - 20:00: Kies Feardichheid, Push nei GitHub, Ferbine Vercel

Stap 1: Kies in 3D-spylfeardichheid op Vibe Skills. Blêdzje troch de 3D Games kategory, kies dejinge dy't jo sjenre past, en ynstallearje de starter yn in nije map. Iepenje it yn Cursor. Jo moatte om 19:00 in Three.js-scène sjen mei in beweechlike spiler.

Stap 2: Meitsje in GitHub-repo en push. git init, git remote add, git push. Brûk de slug fan jo spul as de repo-namme (crystal-runner, lunar-fishing, wat dan ek). De repo-namme wurdt faak jo URL.

Stap 3: Ferbine de repo mei Vercel. Oanmelde by Vercel mei GitHub (fergees), klik op "Nije Projekt Taheakje", kies de repo. Vercel detektearret automatysk Vite en konfigurearret de bou. Klikje op Deploy. Binnen 60 sekonden hawwe jo in crystal-runner.vercel.app URL. Iepenje it op jo tillefoan. Diele mei ien freon. De deploy-bar is no nul foar de rest fan it wykein.

Freed 20:00 - 22:00: Skriuw it Untwerp Doc

Stap 4: Beantwurdzje fiif fragen yn gewoane taal. Iepenje in Notion-side of in markdown-bestân yn de repo en antwurdzje:

Wat docht de spiler elke 5 sekonden? (de kearn-lus)
Wat is de win-kondysje en de ferlies-kondysje?
Hoe lang is ien run of ien nivo?
Wat is de fisuele hook? (palet, ferljochting, stylreferinsje)
Wat is de iene funksje dy't dit memorabel makket yn 30 sekonden?

Stap 5: Commit it ûntwerp-doc. Push it nei de repo. Vercel sil opnij deploye. De dissipline fan it elke betsjuttende feroaring pushjen hâldt de live URL earlik.

Sneon 9:00 - 13:00: Bou de Kearnmeganisme

Stap 6: Ferfang de placeholder-meganisme mei jo iene funksje. Dit is de ienige funksje dy't telt. Brûk Cursor-petear om it te beskriuwen ("as de spiler in kristal pakt, befries fijannen yn 'e buert foar 2 sekonden en spylje in klokje"). Ynnearje lokaal mei pnpm dev. As it goed fielt, push.

Stap 7: Bedrad de win/ferliesstatus. In 60-sekonden bou mei in echt ein fielt as in spul. In 60-minuten bou sûnder ein fielt as in technyske demo. Altyd de win-skerm earst bedradzje, dan de rest.

Sneon 13:00 - 20:00: Foegje Ien Nivo Ta

Stap 8: Bou ien polearre nivo. Net trije healbakte. Brûk placeholder-blokken foar geometry. Brûk it stock-karakter fan de feardichheid. Fine it gefoel - springhichte, kamera-fertraging, dieltsjesintensiteit.

Stap 9: Foegje in tutorial-overlay ta. In twa-sinne "WASD om te bewegen, klikje om te fjochtsjen" popup by earste lansearring rêdt jo lansearring fan betize spilers dy't opjaan yn 8 sekonden. Cursor kin de overlay (React of vanilla DOM) yn 30 sekonden generearje.

Stap 10: Push elk oere. Elke push krijt in Vercel-foarbyld-URL. Stjoer elkenien nei in freon. De feedback-lus is it geheime wapen fan dizze stack.

Snein 10:00 - 16:00: Polish

Stap 11: Foegje trije lûden ta. Fuotstappen-lus, ambient-pad, win-sting. Sels trije lûden tillen in wykein-prototype dramatysk op. Fergese boarnen: freesound.org, opengameart.org.

Stap 12: Foegje sap ta. Dieltsjes by reitsjen, skermskodding by ynslach, nûmer-popups by skoare. Sap is wat in 48-oere bou der útsjen lit as in 6-moanne yn in GIF. Freegje Cursor om "in skermskodding fan yntensiteit 0.3 foar 150ms taheakje as de spiler skea nimt" - it sil de kamera-skodding-haak yn fiif sekonden skriuwe.

Stap 13: Rin in Lighthouse-pas. Iepenje de Vercel-URL op in tillefoan en rin Chrome DevTools Lighthouse. Three.js-bûndels binne meastentiids om 400 KB oant 1.5 MB. As jo mear as 3 MB hawwe, freegje Cursor dan om koade-splitten op de swiere modules mooglik te meitsjen. Vercel's gzip en brotli sille de rest behannelje.

Stap 14: Bug pass. Spielje jo live URL fiif kear op rige. Los alles op dat twa kear brekt. Negearje alles dat ien kear brekt.

Snein 16:00 - 20:00: Lansearring

Stap 15: (Opsjoneel) Stel in oanpast domein yn. As jo earder in namme-spiel.com hawwe kocht, foegje it dan ta yn de projektynstellings fan Vercel. SSL is automatysk. Oars is de *.vercel.app URL goed - it hat HTTPS, it is te dielen, en it laadt oeral.

Stap 16: Nim in 15-sekonden GIF op fan it bêste momint. Brûk de live URL, net localhost. De GIF is wat wurdt klikt op Twitter, Bluesky, en Reddit.

Stap 17: Meitsje in itch.io-side (opsjoneel mar heech-hefboom). Titel, ien-line tagline, trije screenshots, de GIF, kontrôles, credits, en in ynbêde fan jo *.vercel.app iframe (itch.io stipet iframe ynbêde foar HTML5-spultsjes). No hawwe jo twa URL's - ien foar casual dielen en ien foar it spilerpublyk.

Stap 18: Pleats de link. Twitter, Bluesky, jo dev-mienskip Discord, r/IndieDev, r/threejs, r/WebGames. Liede altyd mei de GIF. Meitsje altyd de URL. As jo in Vibe Skills-feardichheid brûkt hawwe, neam it dan yn de devlog-post - oare ûntwikkelders dy't meilêze wolle deselde starter.

Hoe te Mije de Trije Meast Faak Foarkommende Vercel Deploy Falen

Trije dingen brekke hast elk solo Three.js + Vercel wykein. Alle trije binne 5-minuten fixes as jo se freedtejûn fange, en 5-oere kûgelsgatten as jo se snein om 19:00 ûntdekke.

Ferkearde bou-útfiermap. Vite standert op dist/. Vercel detektearret automatysk Vite en brûkt dist/. As jo de útfier hawwe oanpast, set outputDirectory yn vercel.json of de projektynstellings of jo deploy sil in 404 wêze.
Asset-paden dy't lokaal wurkje mar 404 binne yn produksje. Brûk relative paden of de Vite import.meta.env.BASE_URL helper foar elke runtime-laden GLB, tekstuer, as audiobestân. Hardcoded /assets/... paden wurkje meastentiids, mar kopiearre absolút Windows-paden sille absolút net wurkje.
CSP-koppen dy't pointer-lock of audio-kontekst blokkearje. Earstepersoansspultsjes hawwe pointer-lock nedich. Audio hat brûkersgebeart-aktivaasje nedich. Elke feardichheid út de 3D Games kategory skips mei de juste headers blok yn vercel.json om dit te behanneljen. As jo jo eigen fan 'e grûn ôf hawwe skreaun, kopiearje de konfiguraasje fan de feardichheid syn repo.

De deploy wurket op freed, dus as dizze snein brekke, komt it altyd troch in resinte feroaring. git bisect is dyn freon. No noch better: bliuw elke 30 minuten pushje, sadat de brutsen commit lyts is.

Faakstelde Fragen

Sil de Vercel fergese tier echt hâlde as myn spul ferkear krijt?

Ja, foar in wykeinlânsje en de earste pear wiken. De fergese tier jout jo 100 GB bandbreedte per moanne, wat sawat 20.000 spultsjes is fan in 5 MB Three.js-bou. As jo dy limyt berikke, is it Pro plan $20/moanne en ferheget it nei 1 TB. Foar in wykein skip is fergees genôch. Feardichheden op Vibe Skills skips mei boukonfiguraasjes dy't de bundle-grutte minimalisearje, wat de fergese tier fierder útstrikt.

Kin ik in oanpast domein brûke op de fergese Vercel tier?

Ja. De fergese tier stipet oanpaste domeinen mei automatyske HTTPS. Keapje in domein (Namecheap, Cloudflare Registrar, Porkbun), wize it nei Vercel, en Vercel behannelet it SSL-sertifikaat. De ynstelling duorret sawat 10 minuten. As jo gjin domein hawwe, is de namme-spiel.vercel.app URL koart genôch om te dielen op elk platfoarm.

Is dizze stack OK foar in spul-jam ynstjoering?

Ja, en it is ien fan de bêste stacks foar jam-ynstjoerings. De measte jams (Ludum Dare, GMTK, js13k, GitHub Game Off) akseptearje elke web-spielbere URL. In *.vercel.app link wurket krekt as in itch.io URL foar sjueryn. In protte jam-winners skips nei beide - itch.io foar it spilerpublyk, Vercel as de flugge kanonike URL.

Moat ik Three.js witte foardat ik begjin?

Jo hawwe genôch JavaScript nedich om te lêzen wat Cursor skriuwt en wearden oan te passen. Jo hoege Three.js net fan de grûn ôf te skriuwen. De feardichheden op Vibe Skills generearje de motor-ynstelling, kamera, kontrôler, en boukonfiguraasje. Cursor behannelt de spylkoade fan jo beskriuwingen.

Wat bart der as myn Vercel-bou snein om 19:00 mislearret?

De meast foarkommende oarsaak is in TypeScript-flater of in missende omjouwingsfariabele. Vercel toant it bou-logboek mei de falende line markearre. Ien klik yn it dashboard rolt werom nei de lêste wurkjende deploy en befoarderet it nei produksje. Om't elke push in foarbyld-deploy is, binne jo nea mear as ien commit fan in wurkjende bou. Dêrom is elke 30 minuten pushje op sneon en snein wichtich.

Kin ik de koade fan in Vibe Skills 3D-spylfeardichheid ferkeapje of oanpasse?

Ja. Feardichheden op Vibe Skills skips mei in kommersjeel-freonlike lisinsje dy't jo de koade kinne útjaan yn jo eigen spul op Vercel, itch.io, Steam, of oeral oars. Makkers behâlde de IP fan de feardichheid, jo behâldt de IP fan it spul dat derop boud is.

Wat as ik Cursor net brûke wol?

Elke AI-bewurker dy't projektbestannen kin bewurkje wurket. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - elk fan harren kin de Three.js-scaffolding fan in Vibe Skills-feardichheid ynnearje. De feardichheid sels is editor-agnostysk.

Skip It Dit Wykein

De reden dat de measte solo-ûntwikkelders nea in 3D-spul skips is net de motor, it sjenre, of de feardichheidslimyt. It is de freedtejûn dat se "gewoan noch wat ûndersykje" en nea begjinne. It folgjende fergese wykein dat jo hawwe, folgje it fjouwer-faze plan: ynstallearje in Vibe Skills 3D-spylfeardichheid, push nei GitHub, ferbine Vercel, deploy foar freed 20:00, en besteegje dan sneon en snein oan it ynnearjen op in live URL.

Jo portfolio fan tsien wykein-shipped spultsjes op Vercel is mear wurdich dan jo hypotetyske seis-moanne dream-motorprojekt. De shipte wint altyd. De fergese Vercel-URL is it bewiis.

Blêdzje 3D-spylfeardichheden op Vibe Skills troch →

Skip de Three.js boilerplate maraton. Ynstallearje in 3D-spylfeardichheid op Vibe Skills, push nei Vercel, en haw in live URL troch snein-nacht.