Vibe Skills

Claude, Cursor, နှင့် အခြားများအတွက် အသင့်ပြင်ထားသော ကျွမ်းကျင်မှု ရာပေါင်းများစွာကို ရှာဖွေပါ။

Ipadala ang 3D Game sa Vercel sa Linggo ng Gabi: Ang 48-Hour Deploy Playbook

Mula Biyernes ng gabi hanggang iyong-laro.vercel.app link pagsapit ng hapunan sa Linggo. Ang stack ay Three.js, Cursor, isang AI skill mula sa Vibe Skills, at ang libreng tier ng Vercel. Kabuuang gastos para sa weekend: $0. Kabuuang infra na kailangan mong bantayan: wala rin.

Hindi ito "gumawa ng prototype sa iyong laptop at tapos na". Ito ay isang pampublikong URL na maaaring buksan ng sinuman sa mundo sa isang browser, na may HTTPS, edge caching, at custom domain kung gusto mo. Ang AI skill ang nagbibigay ng Three.js scaffolding at isang gumaganang vercel.json. Ang Cursor ang humahawak sa iteration loop. Ang Vercel ang humahawak sa deploy. Ikaw ang humahawak sa disenyo.

Ang gabay na ito ay para sa mga indie dev, vibe coder, mga kalahok sa hackathon, at sinumang pagod na sa mga kalahating tapos na localhost:5173 tabs. Sinasaklaw namin kung bakit gumagana ang stack na ito, ang 48-hour deploy anatomy, limang 3D game skill na ginawa para sa workflow, at ang step-by-step mula Biyernes hanggang Linggo.

Vibe Skills

ကျွမ်းကျင်မှုများကို ရှာဖွေပါ

ယခုပဲ အခမဲ့ စတင်ပါ

Bakit Vercel + Three.js + AI Skills Ang Solo Dev Stack

Ang Vercel ang pinakamadaling deploy target para sa Three.js game. Mag-push sa GitHub, mapapansin ito ng Vercel, bubuuin ang proyekto, at ibibigay sa iyo ang URL sa loob ng 60 segundo. Walang server na kailangang i-provision, walang Docker file, walang NGINX config, walang SSL setup. Ang Three.js bundle ay static HTML, JS, at WebGL assets lamang, na eksakto kung ano ang itinayo ng edge network ng Vercel para ihain.

Ang libreng tier ay sapat para sa isang weekend launch:

100 GB bandwidth bawat buwan. Ang 5 MB Three.js build sa 10,000 plays ay 50 GB. Mauubusan ka ng weekend bago ka maubusan ng bandwidth.
Walang limitasyong static deploys na may HTTPS at *.vercel.app subdomain.
Suporta para sa custom domain sa libreng tier - dalhin ang iyong sariling pangalan-laro.com kung mayroon ka, kung hindi, ang libreng vercel.app URL ay maibabahagi sa bawat social platform.
Preview deploys para sa bawat commit - bawat push ay may sariling URL, kaya maaari kang magbahagi ng build sa isang kaibigan at magpatuloy sa pag-ulit nang hindi ito nasisira.

Magdagdag ng isang AI skill mula sa Vibe Skills at mawawala rin ang boilerplate. Ang Three.js scene setup, player controller, build pipeline, at isang vercel.json na handa para sa Vercel ay nabubuo sa isang command. Pagkatapos, ginagawa ng Cursor ang natitirang bahagi ng weekend sa isang chat kung saan ilalarawan mo ang gameplay na gusto mo at i-tune ang output. Iyan ang buong stack: isang marketplace skill para sa pundasyon, isang AI editor para sa iteration, at Vercel para sa deploy. Solo, libre, at mabilis.

Vibe Skills

ကျွမ်းကျင်မှုများကို ရှာဖွေပါ

ယခုပဲ အခမဲ့ စတင်ပါ

Ang 48-Hour Anatomy: Mula Biyernes Konsepto Hanggang Linggo Deploy

Ang bawat weekend ship na talagang lumalabas ay sumusunod sa parehong mga hakbang. Ang sikreto ay planuhin ang deploy sa Biyernes, hindi sa Linggo ng hapon, para ang huling anim na oras ay mapunta sa polish sa halip na makipaglaban sa build error.

Phase	Time block	What you do	What is shipped by end of phase
Phase 1: Konsepto	Biyernes 6pm - 10pm	Pumili ng genre, magsulat ng 1-pahinang design doc, i-install ang Vibe Skills 3D game skill, i-push ang starter sa GitHub, kumonekta sa Vercel	Live `pangalan-laro.vercel.app` URL na may boilerplate scene
Phase 2: Build	Sabado 9am - 8pm	Palitan ang placeholder ng iyong core mechanic, magdagdag ng 1 level, ayusin ang win/lose state	Playable build sa parehong Vercel URL, awtomatikong na-deploy sa bawat push
Phase 3: Polish	Linggo 10am - 4pm	Tunog, juice, tutorial popup, bug pass, performance check sa mobile	Isang build na hindi nasisira sa unang 60 segundo sa anumang device
Phase 4: Launch	Linggo 4pm - 8pm	Magtakda ng custom domain (opsyonal), mag-record ng GIF, magsulat ng itch.io page, i-post ang link	Pampublikong URL + itch.io page + launch post sa socials

Ang dahilan kung bakit ito gumagana ay ang Biyernes na pag-push sa Vercel. Kapag nandoon na ang URL, awtomatikong nagde-deploy ang bawat Sabado at Linggo na commit. Walang "Linggo ng gabi deploy panic" dahil ang deploy ay nangyari na noong Biyernes at tumatakbo na sa autopilot buong weekend.

Ano Ang Mukha Ng "Vibe Coding" Ng 3D Game Sa Vercel

Ang vibe coding ay nangangahulugang ilarawan ang gusto mo sa simpleng Ingles at hayaan ang isang AI editor na magsulat ng code, pagkatapos ay ulitin ang output. Para sa isang Three.js game sa Vercel, ang loop ay hindi karaniwang malinis: bawat pagbabago sa Cursor ay isang pnpm dev ang layo mula sa lokal na feedback, pagkatapos ay isang git push ang layo mula sa live preview URL, pagkatapos ay awtomatikong na-deploy sa production sa main.

Ganito ang mukha ng isang vibe-coded Vercel game weekend:

Buksan ang starter folder ng skill sa Cursor.
Maglarawan ng isang feature sa chat: "double jump kung dalawang beses pinindot ang space sa loob ng 200ms".
Binago ng Cursor ang controller file. I-save. Mag-reload ang pnpm dev. Mararamdaman mo ang talon sa browser.
Kung tama ang pakiramdam, git push. Bubuo ang Vercel ng preview URL. Ipadala ito sa isang kaibigan.
Mag-merge sa main kapag nakuha na ang tamang pakiramdam. Ang production URL ay mag-a-update sa loob ng 60 segundo.

Ang AI ang gumagawa ng pagta-type. Ang Vercel ang gumagawa ng deploy. Ikaw ang gumagawa ng pakiramdam at ng disenyo.

5 AI 3D Game Skills Na Nagpapagana Nito Sa Vibe Skills

Ang mga skill na ito ay ginawa para sa Vercel + Three.js + Cursor weekend workflow. Bawat isa ay nagbibigay ng Vite-based Three.js project, isang gumaganang vercel.json, isang pnpm build na lumilikha ng static bundle na maaaring i-serve ng Vercel mula sa edge, at isang nasubok na deploy path. Lahat ay nasa 3D Games category sa Vibe Skills.

1. Three.js + Vercel Game Starter

Ang default na pagpipilian. Gumagawa ng Three.js scene na may player controller, third-person camera, lighting rig, skybox, at isang ground plane na may collisions. Nagbibigay ng vercel.json na nagtatakda ng tamang caching headers para sa Three.js asset bundles. Ang pnpm dev ay tumatakbo nang lokal; isang click sa Vercel dashboard ang nagkokonekta sa GitHub repo at magkakaroon ka ng live URL.

Pinakamahusay para sa: anumang genre maliban sa purong 2D. Gamitin ito kung hindi mo pa alam kung ano ang iyong ginagawa.

2. First-Person Vercel Walker

Isang pinakintabong first-person controller (WASD + mouse pointer lock + gravity + sprint + jump) na may footstep hooks, head-bob, at isang vercel.json na tama ang paghawak sa pointer-lock CSP headers. Ang isang ito ay nagpapahirap sa maraming solo dev sa production. Solusyon ito para sa iyo ng skill.

Pinakamahusay para sa: walking sims, horror prototypes, narrative games, museum exhibits.

3. Browser Arena Shooter Kit

Isang top-down arena (twin-stick controller, wave spawner, basic enemy AI, projectile system, score HUD) na may Vercel-tuned build na nag-gzips ng assets, nagco-code-split ng AI, at nagla-lazy-load ng musika. Kasama ang multiplayer hooks; ang weekend ay nagbibigay ng single-player.

Pinakamahusay para sa: arcade shooters, bullet hell, jam entries na kailangang mabilis mag-load sa mobile.

4. Vercel Puzzle Platformer

Isang third-person platformer (variable jump, coyote time, ledge detection), checkpoints, tatlong stub levels na maaari mong i-edit sa Blender o sa code, at isang respawn loop. Ang vercel.json ay naka-configure para sa instant edge-cached level reloads, kaya ang playtesting ay mabilis sa isang phone.

Pinakamahusay para sa: puzzle platformers, parkour prototypes, level-design experiments.

5. Vercel Driving Sandbox

Arcade driving feel (acceleration curve, drift physics, camera lag, basic terrain) na may low-poly na kotse, isang track template, at isang deploy na na-tune para sa malalaking terrain meshes. Ang mga preset na HTTP headers ay nagpapabilis sa WebGL context na magsimula sa Safari, na historically ang pinakamabagal na browser para sa Three.js.

Pinakamahusay para sa: arcade racing, off-road driving, car-feel demos para sa isang portfolio.

Tingnan ang lahat ng 3D game skill sa Vibe Skills →

Biyernes-hanggang-Linggo Step-by-Step

Ito ang eksaktong iskedyul. Ayusin ang oras ng pagsisimula, ngunit panatilihin ang pagkakasunod-sunod. Ang pangunahing milestone ay ang Biyernes ng gabi na Vercel deploy. Lahat ng kasunod ay iteration.

Biyernes 6pm - 8pm: Pumili ng Skill, Push sa GitHub, Ikonekta ang Vercel

Hakbang 1: Pumili ng isang 3D game skill sa Vibe Skills. Mag-browse sa 3D Games category, piliin ang tumutugma sa iyong genre, at i-install ang starter sa isang bagong folder. Buksan ito sa Cursor. Dapat kang makakita ng Three.js scene na may gumagalaw na player pagsapit ng 7pm.

Hakbang 2: Gumawa ng GitHub repo at mag-push. git init, git remote add, git push. Gamitin ang slug ng iyong laro bilang pangalan ng repo (crystal-runner, lunar-fishing, kahit ano). Ang pangalan ng repo ay kadalasang nagiging URL mo.

Hakbang 3: Ikonekta ang repo sa Vercel. Mag-sign in sa Vercel gamit ang GitHub (libre), mag-click ng "Add New Project", piliin ang repo. Awtomatikong na-detect ng Vercel ang Vite at ino-configure ang build. Mag-click ng Deploy. Sa loob ng 60 segundo magkakaroon ka ng crystal-runner.vercel.app URL. Buksan ito sa iyong phone. Ibahagi sa isang kaibigan. Ang deploy bar ay wala na para sa natitirang bahagi ng weekend.

Biyernes 8pm - 10pm: Isulat ang Design Doc

Hakbang 4: Sagutin ang limang tanong sa simpleng Ingles. Buksan ang isang Notion page o isang markdown file sa loob ng repo at sagutin:

Ano ang ginagawa ng player bawat 5 segundo? (ang core loop)
Ano ang win condition at ang lose condition?
Gaano katagal ang isang run o isang level?
Ano ang visual hook? (palette, lighting, style reference)
Ano ang isang feature na ginagawa itong hindi malilimutan sa loob ng 30 segundo?

Hakbang 5: I-commit ang design doc. I-push ito sa repo. Magde-deploy muli ang Vercel. Ang disiplina ng pag-push ng bawat makabuluhang pagbabago ay nagpapanatiling tapat sa live URL.

Sabado 9am - 1pm: Buuin ang Core Mechanic

Hakbang 6: Palitan ang placeholder mechanic ng iyong isang feature. Ito ang tanging feature na mahalaga. Gamitin ang Cursor chat upang ilarawan ito ("kapag kinuha ng player ang isang kristal, i-freeze ang mga kalapit na kaaway sa loob ng 2 segundo at magpatugtog ng tunog"). Ulitin nang lokal gamit ang pnpm dev. Kapag tama ang pakiramdam, mag-push.

Hakbang 7: Ikonekta ang win/lose state. Ang isang 60-segundong build na may tunay na katapusan ay parang laro. Ang isang 60-minutong build na walang katapusan ay parang tech demo. Palaging unahin ang win screen, pagkatapos ang lahat ng iba pa.

Sabado 1pm - 8pm: Magdagdag ng Isang Level

Hakbang 8: Bumuo ng isang pinakintabong level. Hindi tatlo na kalahating lutong. Gumamit ng mga placeholder cube para sa geometry. Gamitin ang stock character ng skill. Ayusin ang pakiramdam - jump height, camera lag, particle intensity.

Hakbang 9: Magdagdag ng tutorial overlay. Isang dalawang-pangungusap na "WASD para gumalaw, mag-click para bumaril" na popup sa unang pagbukas ay nakakapagligtas sa iyong launch mula sa mga nalilitong manlalaro na sumusuko sa loob ng 8 segundo. Maaaring gumawa ang Cursor ng React (o vanilla DOM) overlay sa loob ng 30 segundo.

Hakbang 10: Mag-push kada oras. Bawat push ay makakakuha ng Vercel preview URL. Ipadala ang bawat isa sa isang kaibigan. Ang feedback loop ang lihim na sandata ng stack na ito.

Linggo 10am - 4pm: Polish

Hakbang 11: Magdagdag ng tatlong tunog. Footstep loop, ambient pad, win sting. Kahit tatlong tunog ay malaki ang pag-angat sa isang weekend prototype. Libreng sources: freesound.org, opengameart.org.

Hakbang 12: Magdagdag ng juice. Mga particle kapag natamaan, screen shake kapag sumalpok, mga numero na lumalabas kapag may score. Ang juice ang nagpapatunayan na ang isang 48-hour build ay mukhang isang 6-month build sa isang GIF. Magtanong sa Cursor na magdagdag ng "screen shake na may intensity na 0.3 sa loob ng 150ms kapag nasasaktan ang player" - isusulat nito ang camera-shake hook sa loob ng limang segundo.

Hakbang 13: Magpatakbo ng Lighthouse pass. Buksan ang Vercel URL sa isang phone at patakbuhin ang Chrome DevTools Lighthouse. Ang Three.js bundles ay karaniwang nasa pagitan ng 400 KB hanggang 1.5 MB. Kung lumagpas ka sa 3 MB, magtanong sa Cursor na paganahin ang code splitting sa mga mabibigat na module. Ang gzip at brotli ng Vercel ang gagawa ng natitira.

Hakbang 14: Bug pass. Laruin ang iyong live URL ng limang beses nang sunud-sunod. Ayusin ang anumang nasisira ng dalawang beses. Huwag pansinin ang anumang nasisira ng isang beses.

Linggo 4pm - 8pm: Launch

Hakbang 15: (Opsyonal) Magtakda ng custom domain. Kung bumili ka ng pangalan-laro.com nang mas maaga, idagdag ito sa mga setting ng proyekto ng Vercel. Awtomatiko ang SSL. Kung hindi, ang *.vercel.app URL ay okay lang - mayroon itong HTTPS, maibabahagi ito, at maglo-load saanman.

Hakbang 16: Mag-record ng 15-segundong GIF ng pinakamagandang sandali. Gamitin ang live URL, hindi ang localhost. Ang GIF ang makakakuha ng click sa Twitter, Bluesky, at Reddit.

Hakbang 17: Gumawa ng itch.io page (opsyonal ngunit may mataas na leverage). Pamagat, isang linya ng tagline, tatlong screenshot, ang GIF, mga kontrol, credits, at isang embed ng iyong *.vercel.app iframe (sinusuportahan ng itch.io ang iframe embeds para sa HTML5 games). Ngayon ay may dalawa kang URL - isa para sa casual sharing at isa para sa gamer audience.

Hakbang 18: I-post ang link. Twitter, Bluesky, iyong dev community Discord, r/IndieDev, r/threejs, r/WebGames. Palaging unahin ang GIF. Palaging isama ang URL. Kung gumamit ka ng Vibe Skills skill, banggitin ito sa devlog post - ang ibang mga dev na sumusubaybay ay gugustuhin ang parehong starter.

Paano Maiiwasan ang Tatlong Pinakakaraniwang Vercel Deploy Failures

Tatlong bagay ang halos nakakasira sa bawat solo Three.js + Vercel weekend. Lahat ng tatlo ay 5-minutong pag-aayos kung mahuhuli mo sila sa Biyernes ng gabi, at 5-oras na rabbit hole kung matutuklasan mo sila sa Linggo ng 7pm.

Maling build output directory. Ang default ng Vite ay dist/. Awtomatikong na-detect ng Vercel ang Vite at ginagamit ang dist/. Kung binago mo ang output, itakda ang outputDirectory sa vercel.json o sa mga setting ng proyekto o ang iyong deploy ay magiging 404.
Mga asset path na gumagana nang lokal ngunit 404 sa production. Gumamit ng mga relative path o ang Vite import.meta.env.BASE_URL helper para sa anumang runtime-loaded na GLB, texture, o audio file. Karaniwang gumagana ang mga hardcoded na /assets/... path, ngunit ang mga kinopya na absolute Windows path ay tiyak na hindi.
Mga CSP header na humaharang sa pointer lock o audio context. Ang mga first-person game ay nangangailangan ng pointer lock. Kailangan ng audio ang user-gesture activation. Anumang skill mula sa 3D Games category ay nagbibigay ng tamang headers block sa vercel.json upang mahawakan ito. Kung nagsulat ka ng sarili mo mula sa simula, kopyahin ang config mula sa repo ng skill.

Gumagana ang deploy sa Biyernes, kaya kapag nasira ang mga ito sa Linggo, palaging dahil ito sa isang kamakailang pagbabago. Ang git bisect ay iyong kaibigan. Mas mabuti pa: patuloy na mag-push bawat 30 minuto upang maging maliit ang sira na commit.

Mga Madalas Itanong

Talaga bang tatagal ang Vercel free tier kung makakuha ng traffic ang aking laro?

Oo para sa isang weekend launch at sa unang ilang linggo. Ang libreng tier ay nagbibigay sa iyo ng 100 GB bandwidth bawat buwan, na humigit-kumulang 20,000 plays ng 5 MB Three.js build. Kung maabot mo ang limitasyong iyon, ang Pro plan ay $20/buwan at magpapalaki sa iyo hanggang 1 TB. Para sa isang weekend ship, sapat na ang libre. Ang mga skill sa Vibe Skills ay nagbibigay ng build config na nagpapaliit sa bundle size, na nagpapalawig pa sa libreng tier.

Maaari ba akong gumamit ng custom domain sa libreng Vercel tier?

Oo. Sinusuportahan ng libreng tier ang custom domain na may awtomatikong HTTPS. Bumili ng domain (Namecheap, Cloudflare Registrar, Porkbun), ituro ito sa Vercel, at hawakan ng Vercel ang SSL certificate. Ang pag setup ay tumatagal ng mga 10 minuto. Kung wala kang domain, ang pangalan-laro.vercel.app URL ay sapat na maikli upang ibahagi sa anumang platform.

OK ba ang stack na ito para sa isang game jam submission?

Oo, at ito ay isa sa pinakamahusay na stack para sa jam submissions. Karamihan sa mga jam (Ludum Dare, GMTK, js13k, GitHub Game Off) ay tumatanggap ng anumang web-playable URL. Ang isang *.vercel.app link ay gumagana tulad ng isang itch.io URL para sa mga hurado. Maraming jam winners ang nagse-ship sa pareho - itch.io para sa gamer audience, Vercel bilang mabilis na canonical URL.

Kailangan ko bang malaman ang Three.js bago magsimula?

Kailangan mo ng sapat na JavaScript upang mabasa kung ano ang isinusulat ng Cursor at ayusin ang mga halaga. Hindi mo kailangang magsulat ng Three.js mula sa simula. Ang mga skill sa Vibe Skills ay lumilikha ng engine setup, camera, controller, at build config. Ang Cursor ang humahawak sa gameplay code mula sa iyong mga paglalarawan.

Ano ang mangyayari kung mabigo ang aking Vercel build sa Linggo ng 7pm?

Ang pinakakaraniwang sanhi ay isang TypeScript error o isang nawawalang env var. Ipinapakita ng Vercel ang build log na may naka-highlight na linya na nabigo. Isang click sa dashboard ang magro-roll back sa huling gumaganang deploy at ipo-promote ito sa production. Dahil ang bawat push ay isang preview deploy, hindi ka hihigit pa sa isang commit mula sa isang gumaganang build. Ito ang dahilan kung bakit mahalaga ang pag-push bawat 30 minuto sa Sabado at Linggo.

Maaari ko bang ibenta o baguhin ang code mula sa isang Vibe Skills 3D game skill?

Oo. Ang mga skill sa Vibe Skills ay nagbibigay ng isang commercial-friendly license na nagpapahintulot sa iyo na ilabas ang code sa iyong sariling laro sa Vercel, itch.io, Steam, o saanman. Pinapanatili ng mga creator ang IP ng skill, ikaw ang nagpapanatili ng IP ng larong binuo sa ibabaw nito.

Paano kung ayaw kong gamitin ang Cursor?

Anumang AI editor na kayang mag edit ng project files ay gagana. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - alinman sa mga ito ay maaaring mag-ulit sa Three.js scaffolding mula sa isang Vibe Skills skill. Ang skill mismo ay editor-agnostic.

I-ship Ito Ngayong Weekend

Ang dahilan kung bakit karamihan sa mga solo dev ay hindi kailanman nagshi-ship ng 3D game ay hindi ang engine, ang genre, o ang skill ceiling. Ito ang Biyernes ng gabi kung saan sila "magre-research pa lang ng kaunti" at hindi kailanman nagsisimula. Sa susunod na libreng weekend mo, sundin ang apat na phase plan: mag install ng Vibe Skills 3D game skill, mag-push sa GitHub, kumonekta sa Vercel, mag-deploy bago ang Biyernes 8pm, pagkatapos ay gugulin ang Sabado at Linggo sa pag-ulit sa isang live URL.

Ang iyong portfolio ng sampung weekend-shipped na laro sa Vercel ay mas mahalaga kaysa sa iyong hypothetical na anim na buwang pangarap na proyekto sa engine. Ang na-ship na laro ay laging nananalo. Ang libreng Vercel URL ang patunay.

Mag-browse ng 3D game skills sa Vibe Skills →

Laktawan ang Three.js boilerplate marathon. Mag install ng 3D game skill sa Vibe Skills, mag-push sa Vercel, at magkaroon ng live URL pagsapit ng Linggo ng gabi.