Vibe Skills

Explora centos de habilidades listas para Claude, Cursor e moito máis.

Ena gamã 3D lã Vercel lã Duminicã Seara: Ghidul de Implementare de 48 de Ore

Poti ajunge de la vineri seara la link-ul jocul-tau.vercel.app pânã la cina de duminicã. Tehnologia folositã este Three.js, Cursor, o abilitate AI de la Vibe Skills si planul gratuit Vercel. Cost total pentru weekend: 0 $. Infrastructurã totalã pe care trebuie sã o supraveghezi: tot zero.

Aceasta nu este "construiește un prototip pe laptopul tãu si numeste-l gata". Acesta este un URL public pe care oricine din lume îl poate deschide într-un browser, cu HTTPS, caching la margine (edge caching) si un domeniu personalizat dacã vrei unul. Abilitatea AI implementeazã scheletul Three.js si un fișier vercel.json functional. Cursor gestioneazã bucla de iterare. Vercel gestioneazã implementarea. Tu gestionezi designul.

Acest ghid este pentru dezvoltatori indie, codificatori vibe, participanti la hackathon si oricine s-a sãturat de tab-uri neterminate pe localhost:5173. Vom explica de ce aceastã tehnologie funcționeazã, anatomia implementãrii în 48 de ore, cinci abilitãți de jocuri 3D construite pentru fluxul de lucru si pașii de la vineri la duminicã.

Vibe Skills

Explora centos de habilidades listas para Claude, Cursor e moito máis.

Explorar Habilidades

Comezar Agora Gratuítamente

De ce Vercel + Three.js + Abilitãți AI este Tehnologia pentru Dezvoltatorul Solo

Vercel este cea mai simplã platformã de implementare posibilã pentru un joc Three.js. Trimiti în GitHub, Vercel observã, construiește proiectul si îți oferã un URL în maxim 60 de secunde. Fãrã servere de provisionat, fãrã fișiere Docker, fãrã configurãri NGINX, fãrã configurãri SSL. Pachetul Three.js este doar HTML static, JS si resurse WebGL, exact ceea ce rețeaua de margine (edge network) Vercel a fost construitã sã serveascã.

Planul gratuit acoperã confortabil lansarea unui weekend:

100 GB lãtime de bandã pe lunã. Un pachet Three.js de 5 MB la 10.000 de jocuri înseamnã 50 GB. Vei rãmâne fãrã weekend înainte de a rãmâne fãrã lãtime de bandã.
Implementãri statice nelimitate cu HTTPS si un subdomeniu *.vercel.app.
Suport pentru domenii personalizate pe planul gratuit - adaugã propriul tãu joc-nume.com dacã ai unul, altfel URL-ul gratuit vercel.app poate fi distribuit pe orice platformã socialã.
Previzualizãri de implementare pentru fiecare commit - fiecare trimitere primeste propriul URL, astfel încât poti distribui o versiune cu un prieten si poti continua sã iterezi fãrã a strica ceva.

Adaugã o abilitate AI de la Vibe Skills si codul boilerplate dispare si el. Configurarea scenei Three.js, controlerul personajului, pipeline-ul de compilare si un vercel.json pregãtit pentru Vercel sunt generate printr-o singurã comandã. Apoi, Cursor transformã restul weekendului într-o conversație în care descrii jocul pe care îl vrei si ajustezi rezultatul. Aceasta este tehnologia completã: o abilitate din marketplace pentru fundație, un editor AI pentru iterație si Vercel pentru implementare. Solo, gratuit si rapid.

Vibe Skills

Explora centos de habilidades listas para Claude, Cursor e moito máis.

Explorar Habilidades

Comezar Agora Gratuítamente

Anatomia celor 48 de Ore: De la Conceptul de Vineri la Implementarea de Duminicã

Fiecare implementare de weekend care ajunge efectiv live urmeazã aceleași etape. Trucul este sã planifici implementarea vineri, nu duminicã dupã-amiazã, astfel încât ultimele șase ore sã fie dedicate finisãrilor, nu luptei cu o eroare de compilare.

Faza	Bloc de timp	Ce faci	Ce este implementat pânã la sfârșitul fazei
Faza 1: Concept	Vineri 18:00 - 22:00	Alegi genul, scrii un document de design de 1 paginã, instalezi abilitatea de joc 3D de la Vibe Skills, trimiți versiunea de start în GitHub, conectezi la Vercel	URL live `joc-nume.vercel.app` cu scena boilerplate
Faza 2: Construcție	Sâmbãtã 9:00 - 20:00	Înlocuiești mecanica placeholder cu mecanica ta principalã, adaugi 1 nivel, faci starea de câștig/pierdere sã funcționeze	Versiune jucabilã la același URL Vercel, implementatã automat la fiecare trimitere
Faza 3: Finisare	Duminicã 10:00 - 16:00	Sunet, efecte vizuale, fereastră pop-up de tutorial, verificare bug-uri, verificare performanță pe mobil	O versiune care nu se blocheazã în primele 60 de secunde pe niciun dispozitiv
Faza 4: Lansare	Duminicã 16:00 - 20:00	Setezi domeniul personalizat (opțional), înregistrezi un GIF, scrii pagina itch.io, postezi link-ul	URL public + paginã itch.io + postare de lansare pe rețelele sociale

Motivul pentru care aceasta funcționeazã este trimiterea de vineri pe Vercel. Odatã ce URL-ul existã, fiecare commit de sâmbãtã si duminicã se implementeazã automat. Nu existã "panicã de implementare duminicã seara" pentru cã implementarea a avut deja loc vineri si a rulat pe pilot automat toatã weekendul.

Cum Aratã "Vibe Coding"-ul unui Joc 3D pe Vercel

Vibe coding înseamnã a descrie ceea ce vrei în englezã simplã si a lãsa un editor AI sã scrie codul, apoi a itera pe baza rezultatului. Pentru un joc Three.js pe Vercel, bucla este neobișnuit de curatã: fiecare schimbare în Cursor este la o comandã pnpm dev distanțã de feedback local, apoi la o comandã git push distanțã de un URL de previzualizare live, apoi implementat automat în producție pe main.

Un weekend de joc Vercel cu vibe coding aratã astfel:

Deschizi folderul de start al abilitãții în Cursor.
Descrii o funcționalitate în chat: "sari dublu dacã spațiul este apãsat de douã ori în 200 ms".
Cursor editeazã fișierul controlerului. Salvezi. pnpm dev repornește. Simți saltul în browser.
Dacã pare în regulã, git push. Vercel construiește un URL de previzualizare. Trimite-l unui prieten.
Integrezi în main când senzația este corectã. URL-ul de producție se actualizeazã în maxim 60 de secunde.

AI-ul face tastarea. Vercel face implementarea. Tu faci senzația si designul.

5 Abilități AI pentru Jocuri 3D Care Fac Acest Lucru Posibil pe Vibe Skills

Aceste abilitãți sunt construite pentru fluxul de lucru de weekend Vercel + Three.js + Cursor. Fiecare include un proiect Three.js bazat pe Vite, un vercel.json functional, un pnpm build care produce un pachet static pe care Vercel îl poate servi de la margine (edge) si un traseu de implementare testat. Toate se gãsesc în categoria Jocuri 3D pe Vibe Skills.

1. Starter Joc Three.js + Vercel

Alegerea implicitã. Genereazã o scenã Three.js cu un controler de personaj, camerã third-person, sistem de iluminare, cer (skybox) si un plan de teren cu coliziuni. Include un vercel.json care seteazã antetele corecte de caching pentru pachetele de resurse Three.js. pnpm dev ruleazã local; un clic în tabloul de bord Vercel conecteazã depozitul GitHub si ai un URL live.

Cel mai bun pentru: orice gen, cu excepția jocurilor pur 2D. Folosește acest starter dacã nu știi încã ce construiești.

2. Mers pe jos în Perspectivã de Primă Persoană pe Vercel

Un controler de primã persoanã finisat (WASD + blocare indicator mouse + gravitație + sprint + salt) cu hook-uri pentru pași, mișcarea capului si un vercel.json care gestioneazã corect antetele CSP pentru blocarea indicatorului. Aceasta încurcã mulți dezvoltatori solo în producție. Abilitatea o rezolvã pentru tine.

Cel mai bun pentru: simulatoare de mers, prototipuri de groazã, jocuri narative, expoziții de muzeu.

3. Kit Arenã de Luptã pentru Browser

O arenã top-down (controler twin-stick, generator de valuri, AI de bazã pentru inamici, sistem de proiectile, HUD pentru scor) cu o compilare optimizatã pentru Vercel care comprima resursele, împarte codul AI si încarcã muzica la cerere. Include hook-uri pentru multiplayer; weekendul implementeazã single-player.

Cel mai bun pentru: shootere arcade, bullet hell, intrãri pentru jam care trebuie sã se încarce rapid pe mobil.

4. Platformer Puzzle pe Vercel

Un platformer third-person (salt variabil, timp de grație, detectare cornise), puncte de control, trei niveluri șablon pe care le poți edita în Blender sau în cod, si o buclã de respawn. vercel.json este configurat pentru reîncãrcãri instantanee ale nivelului în cache-ul de la margine (edge cache), astfel încât testarea se simte rapidã pe telefon.

Cel mai bun pentru: platformere puzzle, prototipuri de parkour, experimente de design de nivel.

5. Sandbox de Condus pe Vercel

Senzație arcade de condus (curbã de accelerație, fizicã derapaj, întârziere camerã, teren de bazã) cu o mașinã low-poly, un șablon de pistã si o implementare optimizatã pentru mesh-uri mari de teren. Antetele HTTP presetate fac ca contextul WebGL sã porneascã mai repede pe Safari, istoric cel mai lent browser pentru Three.js.

Cel mai bun pentru: curse arcade, condus off-road, demo-uri de senzație de condus pentru un portofoliu.

Rãsfoieste toate abilitãțile de jocuri 3D pe Vibe Skills →

De la Vineri la Duminicã, Pas cu Pas

Acesta este programul exact. Ajusteazã ora de începere, dar pãstreazã ordinea. Jalonul cheie este implementarea Vercel de vineri seara. Tot ce urmeazã este iterație.

Vineri 18:00 - 20:00: Alege Abilitatea, Trimite în GitHub, Conecteazã Vercel

Pasul 1: Alege o abilitate de joc 3D pe Vibe Skills. Rãsfoieste categoria Jocuri 3D, alege-o pe cea care se potrivește genului tãu si instaleazã starter-ul într-un folder nou. Deschide-l în Cursor. Ar trebui sã vezi o scenã Three.js cu un personaj în mișcare pânã la ora 19:00.

Pasul 2: Creeazã un depozit GitHub si trimite. git init, git remote add, git push. Folosește titlul jocului ca nume al depozitului (alergator-cristale, pescuit-lunar, orice). Numele depozitului devine adesea URL-ul tãu.

Pasul 3: Conecteazã depozitul la Vercel. Autentificã-te în Vercel cu GitHub (gratuit), apasã "Add New Project", alege depozitul. Vercel detecteazã automat Vite si configureazã compilarea. Apasã Deploy. În maxim 60 de secunde ai un URL alergator-cristale.vercel.app. Deschide-l pe telefon. Trimite-l unui prieten. Bara de implementare este acum zero pentru restul weekendului.

Vineri 20:00 - 22:00: Scrie Documentul de Design

Pasul 4: Rãspunde la cinci întrebãri în englezã simplã. Deschide o paginã Notion sau un fișier markdown în depozit si rãspunde:

Ce face jucãtorul la fiecare 5 secunde? (bucla principalã)
Care este condiția de câștig si condiția de pierdere?
Cât dureazã o rundã sau un nivel?
Care este elementul vizual atractiv? (paletã, iluminare, referințã stilisticã)
Care este unica funcționalitate care face jocul memorabil în 30 de secunde?

Pasul 5: Fã commit documentului de design. Trimite-l în depozit. Vercel va re-implementa. Disciplina de a trimite fiecare modificare semnificativã pãstreazã URL-ul live corect.

Sâmbãtã 9:00 - 13:00: Construiește Mecanismul Principal

Pasul 6: Înlocuiește mecanica placeholder cu funcționalitatea ta unicã. Aceasta este singura funcționalitate care conteazã. Folosește chat-ul Cursor pentru a o descrie ("când jucãtorul colecteazã un cristal, încremeneste inamicii din apropiere timp de 2 secunde si redã un clinchet"). Itereazã local cu pnpm dev. Când pare corect, trimite.

Pasul 7: Conecteazã starea de câștig/pierdere. O versiune de 60 de secunde cu un final real se simte ca un joc. O versiune de 60 de minute fãrã final se simte ca un demo tehnologic. Întotdeauna conecteazã ecranul de câștig mai întâi, apoi tot restul.

Sâmbãtã 13:00 - 20:00: Adaugã Un Nivel

Pasul 8: Construiește un nivel finisat. Nu trei niveluri pe jumãtate gata. Folosește cuburi placeholder pentru geometrie. Folosește personajul standard al abilitãții. Ajusteazã senzația - înãlțimea saltului, întârzierea camerei, intensitatea particulelor.

Pasul 9: Adaugã o suprapunere de tutorial. Un pop-up de douã propoziții "WASD pentru a te mișca, clic pentru a trage" la prima pornire salveazã lansarea de jucãtori confuzi care renunțã în 8 secunde. Cursor poate genera suprapunerea React (sau DOM vanilla) în 30 de secunde.

Pasul 10: Trimite la fiecare orã. Fiecare trimitere primeste un URL de previzualizare Vercel. Trimite-l fiecãruia unui prieten. Bucla de feedback este arma secretã a acestei tehnologii.

Duminicã 10:00 - 16:00: Finisare

Pasul 11: Adaugã trei sunete. Buclã de pași, sunet ambiental, sunet de câștig. Chiar si trei sunete îmbunãtãțesc dramatic un prototip de weekend. Surse gratuite: freesound.org, opengameart.org.

Pasul 12: Adaugã efecte vizuale (juice). Particule la lovire, scuturare a ecranului la impact, numere pop-up la scor. Efectele vizuale fac ca o versiune de 48 de ore sã arate ca una de 6 luni într-un GIF. Cere-i lui Cursor sã adauge "o scuturare a ecranului de intensitate 0.3 timp de 150 ms când jucãtorul este lovit" - va scrie hook-ul de scuturare a camerei în cinci secunde.

Pasul 13: Ruleazã o verificare Lighthouse. Deschide URL-ul Vercel pe un telefon si ruleazã Chrome DevTools Lighthouse. Pachetele Three.js au de obicei în jur de 400 KB - 1.5 MB. Dacã depãșești 3 MB, cere-i lui Cursor sã activeze împãrțirea codului pe modulele grele. Comprimarea gzip si brotli a Vercel va face restul.

Pasul 14: Verificare bug-uri. Joacã URL-ul tãu live de cinci ori la rând. Remediazã orice se stricã de douã ori. Ignorã tot ce se stricã o singurã datã.

Duminicã 16:00 - 20:00: Lansare

Pasul 15: (Opțional) Seteazã un domeniu personalizat. Dacã ai cumpãrat un joc-nume.com în avans, adaugã-l în setãrile proiectului Vercel. SSL-ul este automat. Altfel, URL-ul *.vercel.app este în regulã - are HTTPS, poate fi distribuit si se încarcã peste tot.

Pasul 16: Înregistreazã un GIF de 15 secunde cu cel mai bun moment. Folosește URL-ul live, nu localhost. GIF-ul este ceea ce va fi distribuit pe Twitter, Bluesky si Reddit.

Pasul 17: Creeazã o paginã itch.io (opțional, dar cu randament ridicat). Titlu, o frazã de prezentare, trei capturi de ecran, GIF-ul, controalele, creditele si un iframe embed al *.vercel.app (itch.io suportã iframe-uri pentru jocuri HTML5). Acum ai douã URL-uri - unul pentru distribuire casual si unul pentru audiența gamerilor.

Pasul 18: Posteazã link-ul. Twitter, Bluesky, comunitatea ta de dezvoltatori Discord, r/IndieDev, r/threejs, r/WebGames. Întotdeauna începe cu GIF-ul. Întotdeauna include URL-ul. Dacã ai folosit o abilitate Vibe Skills, menționeazã-o în postarea de devlog - alți dezvoltatori care urmãresc vor dori același starter.

Cum Sã Eviti Cele Mai Comune 3 Erori de Implementare Vercel

Trei lucruri stricã aproape fiecare weekend solo Three.js + Vercel. Toate trei sunt remedieri de 5 minute dacã le prinzi vineri seara si auzuri de iepure de 5 ore dacã le descoperi duminicã la 19:00.

Director de ieșire incorect la compilare. Vite implicit dist/. Vercel detecteazã automat Vite si folosește dist/. Dacã ai personalizat ieșirea, seteazã outputDirectory în vercel.json sau în setãrile proiectului, altfel implementarea ta va fi un 404.
Cãi ale resurselor care funcționeazã local, dar dau 404 în producție. Folosește cãi relative sau ajutorul Vite import.meta.env.BASE_URL pentru orice fișier GLB, texturã sau audio încãrcat la rulare. Cãile hardcodate /assets/... funcționeazã de obicei, dar cãile absolute din Windows copiate nu vor funcționa.
Antete CSP care blocheazã pointer lock sau context audio. Jocurile de primã persoanã au nevoie de pointer lock. Sunetul are nevoie de activare prin gestul utilizatorului. Orice abilitate din categoria Jocuri 3D include blocul corect headers în vercel.json pentru a gestiona acest lucru. Dacã ai scris propriul cod de la zero, copiazã configurația din depozitul abilitãții.

Implementarea funcționeazã vineri, deci când acestea se stricã duminicã, este întotdeauna din cauza unei modificãri recente. git bisect este prietenul tãu. Chiar mai bine: continuã sã trimiți la fiecare 30 de minute, astfel încât commit-ul stricat sã fie mic.

Întrebãri Frecvente

Planul gratuit Vercel va rezista cu adevãrat dacã jocul meu capãtã trafic?

Da, pentru lansarea unui weekend si primele câteva sãptãmâni. Planul gratuit îți oferã 100 GB lãtime de bandã pe lunã, ceea ce echivaleazã cu aproximativ 20.000 de jocuri ale unui pachet Three.js de 5 MB. Dacã atingi acest plafon, planul Pro costã 20 $/lunã si te duce la 1 TB. Pentru o lansare de weekend, gratuit este mai mult decât suficient. Abilitãțile de pe Vibe Skills vin cu configurații de compilare care minimizeazã dimensiunea pachetului, ceea ce extinde planul gratuit.

Pot folosi un domeniu personalizat pe planul gratuit Vercel?

Da. Planul gratuit suportã domenii personalizate cu HTTPS automat. Cumpãrã un domeniu (Namecheap, Cloudflare Registrar, Porkbun), indicã-l cãtre Vercel, iar Vercel se ocupã de certificatul SSL. Configurarea dureazã aproximativ 10 minute. Dacã nu ai un domeniu, URL-ul joc-nume.vercel.app este suficient de scurt pentru a fi distribuit pe orice platformã.

Este aceastã tehnologie potrivitã pentru o contribuție la jam?

Da, si este una dintre cele mai bune tehnologii pentru contribuțiile la jam. Majoritatea jam-urilor (Ludum Dare, GMTK, js13k, GitHub Game Off) acceptã orice URL jucabil pe web. Un link *.vercel.app funcționeazã exact ca un URL itch.io pentru judecãtori. Mulți câștigãtori ai jam-urilor lanseazã pe ambele platforme - itch.io pentru audiența gamerilor, Vercel ca URL canonic rapid.

Am nevoie sã știu Three.js înainte de a începe?

Ai nevoie de suficient JavaScript pentru a citi ce scrie Cursor si pentru a ajusta valori. Nu ai nevoie sã scrii Three.js de la zero. Abilitãțile de pe Vibe Skills genereazã configurarea motorului, camera, controlerul si configurația de compilare. Cursor se ocupã de codul de gameplay din descrierile tale.

Ce se întâmplã dacã compilarea mea Vercel eșueazã duminicã la ora 19:00?

Cea mai comunã cauzã este o eroare TypeScript sau o variabilã de mediu lipsã. Vercel aratã jurnalul de compilare cu linia care a eșuat evidențiatã. Un clic în tabloul de bord revine la ultima compilare funcțională si o promoveazã în producție. Deoarece fiecare trimitere este o previzualizare, nu ești niciodatã mai mult de un commit distanțã de o versiune funcțională. Acesta este motivul pentru care trimiterea la fiecare 30 de minute sâmbãtã si duminicã conteazã.

Pot vinde sau modifica codul dintr-o abilitate de joc 3D Vibe Skills?

Da. Abilitățile de pe Vibe Skills vin cu o licență prietenoasã cu comerțul, care îți permite sã lansezi codul în propriul tãu joc pe Vercel, itch.io, Steam sau oriunde altundeva. Creatorii pãstreazã proprietatea intelectualã a abilitãții, tu pãstrezi proprietatea intelectualã a jocului construit deasupra.

Ce se întâmplã dacã nu vreau sã folosesc Cursor?

Orice editor AI care poate edita fișiere de proiect funcționeazã. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - oricare dintre ele poate itera pe scheletul Three.js de la o abilitate Vibe Skills. Abilitatea în sine este independentã de editor.

Implementeazã-l Weekendul Acesta

Motivul pentru care majoritatea dezvoltatorilor solo nu lanseazã niciodatã un joc 3D nu este motorul, genul sau nivelul de abilitate. Este vinerea seara în care "mai cerceteazã un pic" si nu încep niciodatã. Urmãtorul weekend liber pe care îl ai, urmeazã planul în patru faze: instaleazã o abilitate de joc 3D Vibe Skills, trimite în GitHub, conecteazã Vercel, implementeazã pânã vineri ora 20:00, apoi petrece sâmbãtã si duminicã iterând pe un URL live.

Portofoliul tãu de zece jocuri lansate în weekend pe Vercel valoreazã mai mult decât ipoteticul tãu proiect de motor de vis de șase luni. Cel lansat câștigã întotdeauna. URL-ul gratuit Vercel este dovada.

Rãsfoiește abilitãțile de jocuri 3D pe Vibe Skills →

Sari peste maratonul de cod boilerplate Three.js. Instaleazã o abilitate de joc 3D pe Vibe Skills, trimite pe Vercel si ai un URL live pânã duminicã seara.