Vibe Skills

Jelajahi atusan katrampilan sing wis siyap kanggo Claude, Cursor, lan liya-liyane.

Terbitake Game 3D ing Vercel kanthi Dalan Malam Minggu: Panduan Deploy 48 Jam

Sampeyan bisa langsung saka malem Jumat kosong nganti link your-game.vercel.app ing mangan wengi Minggu. Tumpukan yaiku Three.js, Cursor, keahlian AI saka Vibe Skills, lan tingkat gratis Vercel. Total biaya kanggo akhir minggu: $0. Kabeh infrastruktur sing kudu sampeyan jaga: uga nol.

Iki dudu "nggawe prototipe ing laptop lan nyebut rampung". Iki minangka URL umum sing bisa dibukak sapa wae ing donya ing browser, kanthi HTTPS, caching tepi, lan domain khusus yen sampeyan pengin. Keahlian AI ngirim kerangka Three.js lan vercel.json sing bisa digunakake. Cursor nangani puteran iterasi. Vercel nangani deploy. Sampeyan nangani desain.

Pandhuan iki kanggo pengembang indie, pengkode gaya, peserta hackathon, lan sapa wae sing kesel karo tab localhost:5173 sing setengah rampung. Kita nutupi kenapa tumpukan iki bisa digunakake, anatomi deploy 48 jam, limang keahlian game 3D sing digawe kanggo alur kerja, lan langkah demi langkah Jumuah nganti Minggu.

Vibe Skills

Jelajahi atusan katrampilan sing wis siyap kanggo Claude, Cursor, lan liya-liyane.

Jelajahi Katrampilan

Miwiti Gratis Saiki

Napa Vercel + Three.js + Keahlian AI Minangka Tumpukan Pengembang Solo

Vercel minangka target deploy paling ringkes kanggo game Three.js. Push menyang GitHub, Vercel ngeweruhi, mbangun proyek, lan mulihake URL sajrone 60 detik. Ora ana server kanggo nyedhiyani, ora ana file Docker, ora ana konfigurasi NGINX, ora ana persiyapan SSL. Bundel Three.js mung aset HTML, JS, lan WebGL statis, sing persis kaya sing dibangun jaringan tepi Vercel kanggo dilayani.

Tingkat gratis nutupi peluncuran akhir minggu kanthi nyaman:

Bandwidth 100 GB saben wulan. Bangunan Three.js 5 MB ing 10.000 puteran yaiku 50 GB. Sampeyan bakal entek akhir minggu sadurunge entek bandwidth.
Deploy statis tanpa wates kanthi HTTPS lan subdomain *.vercel.app.
Dukungan domain khusus ing tingkat gratis - nggawa dhewe name-game.com yen sampeyan duwe, yen ora URL vercel.app gratis bisa dibagekake ing saben platform sosial.
Pratinjau deploy kanggo saben komit - saben push entuk URL dhewe, mula sampeyan bisa nuduhake bangunan karo kanca lan terus iterasi tanpa ngrusak.

Tindakake keahlian AI saka Vibe Skills lan boilerplate uga bakal ilang. Persiyapan adegan Three.js, kontroler pamuter, jalur bangunan, lan vercel.json sing siap Vercel digawe kanthi siji perintah. Banjur Cursor ngowahi sisa akhir minggu dadi obrolan ing ngendi sampeyan njlèntrèhaké urut-urutan game sing sampeyan karepake lan nyetel output. Kuwi tumpukan lengkap: keahlian pasar kanggo dhasar, editor AI kanggo iterasi, lan Vercel kanggo deploy. Solo, gratis, lan cepet.

Vibe Skills

Jelajahi atusan katrampilan sing wis siyap kanggo Claude, Cursor, lan liya-liyane.

Jelajahi Katrampilan

Miwiti Gratis Saiki

Anatomi 48 Jam: Konsep Jumuah nganti Deploy Minggu

Saben pengiriman akhir minggu sing bener-bener ditindakake ngiringi irama sing padha. Trik kasebut yaiku ngrancang deploy ing dina Jumuah, dudu Minggu sore, mula enem jam pungkasan bakal digunakake kanggo polesan tinimbang nglawan kesalahan bangunan.

Fase	Blok wektu	Apa sing sampeyan lakoni	Apa sing dikirim ing pungkasan fase
Fase 1: Konsep	Jumuah jam 6 sore - jam 10 wengi	Pilih genre, nulis doket desain 1 kaca, nginstal keahlian game 3D Vibe Skills, push starter menyang GitHub, nyambungake menyang Vercel	URL `name-game.vercel.app` sing aktif kanthi adegan boilerplate
Fase 2: Bangun	Sabtu jam 9 esuk - jam 8 wengi	Ganti placeholder karo mekanik inti sampeyan, tambahake 1 level, atur kahanan menang/kalah bisa digunakake	Bangunan sing bisa diputer ing URL Vercel sing padha, otomatis dideploy ing saben push
Fase 3: Poles	Minggu jam 10 esuk - jam 4 sore	Swara, jus, popup tutorial, lulusan bug, mriksa kinerja ing seluler	Bangunan sing ora rusak ing 60 detik pisanan ing piranti apa wae
Fase 4: Peluncuran	Minggu jam 4 sore - jam 8 wengi	Setel domain khusus (opsional), rekam GIF, nulis kaca itch.io, posting link	URL umum + kaca itch.io + posting peluncuran ing media sosial

Alesan kenapa iki bisa digunakake yaiku push Jumuah menyang Vercel. Sawise URL ana, saben komit Setu lan Minggu dideploy kanthi otomatis. Ora ana "panik deploy Minggu wengi" amarga deploy wis kelakon ing dina Jumuah lan wis mlaku kanthi otomatis sajrone akhir minggu.

Apa sing Katone "Vibe Coding" Game 3D ing Vercel

Vibe coding tegese njlèntrèhaké apa sing dikarepake ing basa Inggris biasa lan ngidini editor AI nulis kode, banjur iterasi ing output. Kanggo game Three.js ing Vercel, puteran luwih resik: saben owah-owahan ing Cursor yaiku pnpm dev adoh saka umpan balik lokal, banjur git push adoh saka URL pratinjau langsung, banjur otomatis dideploy menyang produksi ing main.

Akhir minggu Vercel sing di-kode-gaya katon kaya iki:

Bukak folder starter keahlian ing Cursor.
Jelentrehake fitur ing obrolan: "loncat kaping pindho yen spasi ditekan kaping pindho sajrone 200ms".
Cursor nyunting file kontroler. Simpen. pnpm dev diundhuh ulang. Sampeyan ngrasakake lompatan ing browser.
Yen krasa pas, git push. Vercel bakal mbangun URL pratinjau. Kirim menyang kanca.
Gabungke menyang main yen rasa wis dikunci. URL produksi dianyari sajrone 60 detik.

AI nindakake pengetikan. Vercel nindakake deploy. Sampeyan nindakake rasa lan desain.

5 Keahlian Game 3D AI sing Nggawe Iki Bisa Ditindakake ing Vibe Skills

Keahlian iki digawe kanggo alur kerja akhir minggu Vercel + Three.js + Cursor. Saben siji ngirim proyek Three.js adhedhasar Vite, vercel.json sing bisa digunakake, pnpm build sing ngasilake bundel statis sing bisa dilayani Vercel saka tepi, lan jalur deploy sing dites. Kabeh ana ing kategori Game 3D ing Vibe Skills.

1. Three.js + Vercel Game Starter

Pilihan default. Ngasilake adegan Three.js kanthi kontroler pamuter, kamera wong katelu, rig pencahayaan, kotak langit, lan bidang lemah kanthi tabrakan. Dikirim nganggo vercel.json sing nyetel header caching sing tepat kanggo bundel aset Three.js. pnpm dev mlaku sacara lokal; siji klik ing dasbor Vercel nyambungake repositori GitHub lan sampeyan duwe URL langsung.

Paling apik kanggo: genre apa wae kajaba 2D murni. Gunakake iki yen sampeyan durung ngerti apa sing sampeyan bangun.

2. First-Person Vercel Walker

Kontroler wong pisanan sing dipoles (WASD + ngunci penunjuk mouse + gravitasi + sprint + lompat) kanthi kait langkah sikil, goyangan kepala, lan vercel.json sing nangani header CSP ngunci penunjuk kanthi bener. Sing siji iki njalari akeh pengembang solo angel ing produksi. Keahlian kasebut ngatasi kanggo sampeyan.

Paling apik kanggo: sim mlaku, prototipe horor, game narasi, pameran museum.

3. Browser Arena Shooter Kit

Arena saka ndhuwur (kontroler kembar stick, generator gelombang, AI musuh dhasar, sistem proyektil, skor HUD) kanthi bangunan sing disetel Vercel sing ngompres aset, misahake kode AI, lan ngisi musik kanthi alon. Kait multiplayer kalebu; akhir minggu ngirim pemain tunggal.

Paling apik kanggo: penembak arkade, neraka peluru, entri jam sing kudu diisi kanthi cepet ing seluler.

4. Vercel Puzzle Platformer

Platformer wong katelu (lompat variabel, wektu coyote, deteksi tepian), titik pemeriksaan, telung level stub sing bisa diowahi ing Blender utawa kode, lan puteran respawn. vercel.json dikonfigurasi kanggo muatan ulang level tepi sing wis disimpen, mula uji coba krasa cepet ing telpon.

Paling apik kanggo: platformer teka-teki, prototipe parkour, eksperimen desain level.

5. Vercel Driving Sandbox

Rasa nyopir arkade (kurva akselerasi, fisika drift, lag kamera, terrain dhasar) kanthi mobil low-poly, template trek, lan deploy sing disetel kanggo mesh terrain gedhe. Header HTTP sing wis ditemtokake nggawe konteks WebGL luwih cepet ing Safari, sing historis dadi browser paling alon kanggo Three.js.

Paling apik kanggo: balap arkade, nyopir off-road, demo rasa mobil kanggo portofolio.

Jelajahi kabeh keahlian game 3D ing Vibe Skills →

Langkah demi Langkah Jumuah-nganti-Minggu

Iki jadwal sing pas. Atur wektu wiwitan, nanging jaga urutan kasebut. Tonggak kunci yaiku deploy Vercel Jumuah wengi. Kabeh sawise iku iterasi.

Jumuah jam 6 sore - jam 8 wengi: Pilih Keahlian, Push menyang GitHub, Sambungake Vercel

Langkah 1: Pilih keahlian game 3D ing Vibe Skills. Jelajahi kategori Game 3D, pilih sing cocog karo genre sampeyan, lan instal starter menyang folder sing anyar. Bukak ing Cursor. Sampeyan kudu ndeleng adegan Three.js kanthi pamuter sing obah jam 7 wengi.

Langkah 2: Gawe repositori GitHub lan push. git init, git remote add, git push. Gunakake slug game sampeyan minangka jeneng repositori (crystal-runner, lunar-fishing, apa wae). Jeneng repositori asring dadi URL sampeyan.

Langkah 3: Sambungake repositori menyang Vercel. Lebet menyang Vercel nganggo GitHub (gratis), klik "Add New Project", pilih repositori. Vercel otomatis ndeteksi Vite lan ngkonfigurasi bangunan. Klik Deploy. Sajrone 60 detik, sampeyan entuk URL crystal-runner.vercel.app. Bukak ing telpon sampeyan. Kirim menyang siji kanca. Bar deploy saiki nol kanggo sisa akhir minggu.

Jumuah jam 8 wengi - jam 10 wengi: Tulis Doket Desain

Langkah 4: Wangsuli limang pitakonan ing basa Inggris biasa. Bukak kaca Notion utawa file markdown ing repositori lan wangsuli:

Apa sing ditindakake pemain saben 5 detik? (inti loop)
Apa kahanan menang lan kahanan kalah?
Pira suwene siji puteran utawa siji level?
Apa daya tarik visual? (palet, pencahayaan, referensi gaya)
Apa fitur siji sing nggawe iki ora bisa dilalekake ing 30 detik?

Langkah 5: Komite doket desain. Push menyang repositori. Vercel bakal deploy ulang. Disiplin push saben owah-owahan sing signifikan njaga URL langsung jujur.

Sabtu jam 9 esuk - jam 1 wengi: Bangun Mekanik Inti

Langkah 6: Ganti mekanik placeholder kanthi fitur siji sampeyan. Iki siji-sijine fitur sing penting. Gunakake obrolan Cursor kanggo njlèntrèhaké ("nalika pemain njupuk kristal, beku mungsuh ing cedhak sajrone 2 detik lan muter chime"). Iterasi sacara lokal nganggo pnpm dev. Yen krasa pas, push.

Langkah 7: Kawat kahanan menang/kalah. Bangunan 60 detik kanthi pungkasane nyata krasa kaya game. Bangunan 60 menit tanpa pungkasane krasa kaya demo teknologi. Tansah kawat layar menang dhisik, banjur liyane.

Sabtu jam 1 wengi - jam 8 wengi: Tambah Siji Level

Langkah 8: Bangun siji level sing dipoles. Ora telu sing setengah mateng. Gunakake kubus placeholder kanggo geometri. Gunakake karakter saham keahlian. Tune rasa - dhuwur lompat, lag kamera, intensitas partikel.

Langkah 9: Tambah overlay tutorial. Popup "WASD kanggo obah, klik kanggo geni" rong kalimat nalika diluncurake pisanan bakal ngluwari peluncuran sampeyan saka pemain bingung sing nyerah ing 8 detik. Cursor bisa ngasilake overlay React (utawa DOM vanilla) sajrone 30 detik.

Langkah 10: Push saben jam. Saben push entuk URL pratinjau Vercel. Kirim saben siji menyang kanca. Papan umpan balik minangka senjata rahasia tumpukan iki.

Minggu jam 10 esuk - jam 4 sore: Poles

Langkah 11: Tambah telung swara. Puteran langkah sikil, pad ambien, sting menang. Sanajan telung swara nambah prototipe akhir minggu kanthi dramatis. Sumber gratis: freesound.org, opengameart.org.

Langkah 12: Tambah jus. Partikel nalika kesengsem, goyangan layar nalika tabrakan, popup angka nalika skor. Jus yaiku sing nggawe bangunan 48 jam katon kaya bangunan 6 wulan ing GIF. Takon Cursor kanggo nambah "goyangan layar kanthi intensitas 0,3 sajrone 150ms nalika pemain cilaka" - bakal nulis kait goyangan kamera sajrone limang detik.

Langkah 13: Jalanake lulusan Lighthouse. Bukak URL Vercel ing telpon lan jalanake Chrome DevTools Lighthouse. Bundel Three.js biasane sekitar 400 KB nganti 1,5 MB. Yen sampeyan ngluwihi 3 MB, takon Cursor kanggo ngaktifake pemisahan kode ing modul sing abot. Kompresi gzip lan brotli Vercel bakal ngatasi sisane.

Langkah 14: Lulusan bug. Mainake URL langsung sampeyan kaping lima kanthi urutan. Perbaiki apa wae sing rusak kaping pindho. Acuhake apa wae sing rusak kaping pisanan.

Minggu jam 4 sore - jam 8 wengi: Peluncuran

Langkah 15: (Opsional) Setel domain khusus. Yen sampeyan wis tuku name-game.com sadurunge, tambahake ing setelan proyek Vercel. SSL otomatis. Yen ora, URL *.vercel.app wis apik - nduweni HTTPS, bisa dibagekake, lan diisi ing endi wae.

Langkah 16: Rekam GIF 15 detik saka momen paling apik. Gunakake URL langsung, ora localhost. GIF yaiku sing diklik ing Twitter, Bluesky, lan Reddit.

Langkah 17: Gawe kaca itch.io (opsional nanging leverage tinggi). Judhul, slogan siji baris, telung screenshot, GIF, kontrol, kredit, lan sematan saka iframe *.vercel.app sampeyan (itch.io ndhukung sematan iframe kanggo game HTML5). Saiki sampeyan duwe rong URL - siji kanggo nuduhake santai lan siji kanggo pamirsa gamer.

Langkah 18: Kirim link kasebut. Twitter, Bluesky, Discord komunitas pengembang sampeyan, r/IndieDev, r/threejs, r/WebGames. Tansah mimpin nganggo GIF. Tansah kalebu URL. Yen sampeyan nggunakake keahlian Vibe Skills, sebutake ing postingan log pangembangan - pengembang liyane sing maca bakal pengin starter sing padha.

Cara Ngindhari Telu Kegagalan Deploy Vercel Paling Umum

Telung perkara sing meh kabeh ngliwati akhir minggu Three.js + Vercel. Kabeh telu minangka perbaikan 5 menit yen sampeyan ngerteni ing dina Jumuah wengi, lan bolongan wengi 5 jam yen sampeyan nemokake ing Minggu jam 7 wengi.

Direktori output bangunan sing salah. Vite default dadi dist/. Vercel otomatis ndeteksi Vite lan nggunakake dist/. Yen sampeyan ngowahi output, setel outputDirectory ing vercel.json utawa setelan proyek utawa deploy sampeyan bakal dadi 404.
Jalur aset sing bisa digunakake sacara lokal nanging 404 ing produksi. Gunakake jalur relatif utawa helper Vite import.meta.env.BASE_URL kanggo GLB, tekstur, utawa file audio apa wae sing dimuat wektu runtime. Jalur sing dikodeake kanthi kaku /assets/... biasane bisa digunakake, nanging jalur Windows absolut sing disalin mesthi ora bakal bisa.
Header CSP sing ngalangi ngunci penunjuk utawa konteks audio. Game wong pisanan butuh ngunci penunjuk. Audio butuh aktivasi isyarat pangguna. Keahlian apa wae saka kategori Game 3D dikirim nganggo blok headers sing tepat ing vercel.json kanggo nangani iki. Yen sampeyan nulis dhewe saka awal, salinan konfigurasi saka repositori keahlian.

Deploy bisa digunakake ing dina Jumuah, mula nalika iki rusak ing dina Minggu, mesthi amarga owah-owahan anyar. git bisect minangka kanca sampeyan. Luwih becik: terus push saben 30 menit supaya komit sing rusak cilik.

Pitakonan Umum

Apa tingkat gratis Vercel bakal tahan yen gamenya entuk lalu lintas?

Ya kanggo peluncuran akhir minggu lan minggu-minggu pisanan. Tingkat gratis menehi bandwidth 100 GB saben wulan, sing kira-kira 20.000 puteran bangunan Three.js 5 MB. Yen sampeyan ngalami langit-langit kasebut, rencana Pro yaiku $20/wulan lan nambahake sampeyan dadi 1 TB. Kanggo pengiriman akhir minggu, gratis luwih saka cukup. Keahlian ing Vibe Skills dikirim nganggo konfigurasi bangunan sing ngurangi ukuran bundel, sing luwih akeh nggunakake tingkat gratis.

Apa aku bisa nggunakake domain khusus ing tingkat Vercel gratis?

Ya. Tingkat gratis ndhukung domain khusus kanthi HTTPS otomatis. Tuku domain (Namecheap, Cloudflare Registrar, Porkbun), arahake menyang Vercel, lan Vercel ngurus sertifikat SSL. Persiyapan kasebut butuh udakara 10 menit. Yen sampeyan ora duwe domain, URL name-game.vercel.app cukup cekak kanggo dibagekake ing platform apa wae.

Apa tumpukan iki OK kanggo pengajuan jam game?

Ya, lan iki minangka salah sawijining tumpukan paling apik kanggo pengajuan jam. Umume jam (Ludum Dare, GMTK, js13k, GitHub Game Off) nampa URL web apa wae sing bisa dimainake. Link *.vercel.app bisa digunakake kaya URL itch.io kanggo juri. Akeh pemenang jam ngirim menyang loro - itch.io kanggo pamirsa gamer, Vercel minangka URL kanonik sing cepet.

Apa aku kudu ngerti Three.js sadurunge miwiti?

Sampeyan butuh cukup JavaScript kanggo maca apa sing ditulis Cursor lan nyetel nilai. Sampeyan ora perlu nulis Three.js saka awal. Keahlian ing Vibe Skills ngasilake persiyapan mesin, kamera, kontroler, lan konfigurasi bangunan. Cursor nangani kode urut-urutan game saka deskripsi sampeyan.

Apa sing kedadeyan yen bangunan Vercel gagal ing Minggu jam 7 wengi?

Penyebab paling umum yaiku kesalahan TypeScript utawa variabel lingkungan sing ilang. Vercel nuduhake log bangunan kanthi baris sing gagal disorot. Siji klik ing dasbor nggulung bali menyang deploy paling anyar sing bisa digunakake lan promosi menyang produksi. Amarga saben push minangka pratinjau deploy, sampeyan ora luwih saka siji komit saka bangunan sing bisa digunakake. Iki sebabe push saben 30 menit ing Setu lan Minggu penting.

Apa aku bisa adol utawa ngowahi kode saka keahlian game 3D Vibe Skills?

Ya. Keahlian ing Vibe Skills dikirim kanthi lisensi sing ramah komersial sing ngidini sampeyan ngeculake kode ing game sampeyan dhewe ing Vercel, itch.io, Steam, utawa ngendi wae. Pencipta nyimpen IP saka keahlian kasebut, sampeyan nyimpen IP saka game sing dibangun ing ndhuwur.

Kepiye yen aku ora pengin nggunakake Cursor?

Editor AI apa wae sing bisa ngowahi file proyek bisa digunakake. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - sapa wae sing bisa iterasi ing kerangka Three.js saka keahlian Vibe Skills. Keahlian kasebut dhewe ora gumantung marang editor.

Kirimake Akhir Minggu Iki

Alesan kenapa umume pengembang solo ora nate ngirim game 3D dudu mesin, genre, utawa tingkat keahlian. Iki minangka Jumuah wengi nalika dheweke "teliti luwih sithik" lan ora tau miwiti. Akhir minggu gratis sabanjure sing sampeyan duwe, tindakake rencana papat fase: instal keahlian game 3D Vibe Skills, push menyang GitHub, sambungake Vercel, deploy jam 8 wengi Jumuah, banjur ngentekake Setu lan Minggu iterasi ing URL langsung.

Portofolio sepuluh game sing dikirim akhir minggu ing Vercel luwih larang tinimbang proyek mesin impian enem wulan hipotetis sampeyan. Sing dikirim mesthi menang. URL Vercel gratis minangka bukti.

Jelajahi keahlian game 3D ing Vibe Skills →

Langkahi maraton boilerplate Three.js. Instal keahlian game 3D ing Vibe Skills, push menyang Vercel, lan duwe URL langsung ing Minggu wengi.