Vibe Skills

Прелистајте стотици готови вештини за Claude, Cursor и многу повеќе.

Испратете 3D игра на Vercel до недела навечер: Прирачникот за 48-часовно распоредување

Можете да поминете од празен петок навечер до врска your-game.vercel.app до неделниот ручек. Стакот е Three.js, Cursor, вештина за вештачка интелигенција од Vibe Skills, и бесплатниот слој на Vercel. Вкупен трошок за викендот: 0 $. Вкупна инфраструктура за која мора да се грижите: исто така нула.

Ова не е „изградете прототип на вашиот лаптоп и наречете го завршено“. Ова е јавна URL-адреса што секој во светот може да ја отвори во прелистувач, со HTTPS, кеширање на работ на мрежата и сопствено име на домен ако сакате. Вештината за вештачка интелигенција ги испорачува Three.js скелињата и работен vercel.json. Cursor ги обработува циклусот на итерации. Vercel ги обработува распоредувањата. Вие се грижите за дизајнот.

Овој водич е за инди програмери, vibe програмери, учесници на хакатони и секој што е уморен од половина завршени localhost:5173 табови. Ги покриваме причините зошто овој стак функционира, анатомијата на 48-часовното распоредување, пет вештини за 3D игри изградени за работниот тек и чекор-по-чекор од петок до недела.

Vibe Skills

Прелистајте стотици готови вештини за Claude, Cursor и многу повеќе.

Истражете вештини

Започнете бесплатно сега

Зошто Vercel + Three.js + Вештини за вештачка интелигенција е стакот за самостојни програмери

Vercel е најмрзливата можна цел за распоредување за Three.js игра. Притиснете на GitHub, Vercel забележува, го гради проектот и ви враќа URL во рок од 60 секунди. Нема сервер за обезбедување, нема Docker датотека, нема NGINX конфигурација, нема SSL поставување. Three.js пакетот е само статички HTML, JS и WebGL ресурси, што е токму она за што е изградена мрежата на Vercel на работ на мрежата.

Бесплатниот слој удобно покрива лансирање за викенд:

100 GB пропусен опсег месечно. Три.js градба од 5 MB при 10.000 игри е 50 GB. Ќе ви снема викенд пред да ви снема пропусен опсег.
Неограничени статични распоредувања со HTTPS и потдомен *.vercel.app.
Поддршка за сопствено име на домен на бесплатниот слој - донесете го вашиот name-game.com ако имате, инаку бесплатната URL-адреса vercel.app може да се сподели на секоја социјална платформа.
Прегледајте ги распоредувањата за секој преглед - секое притискање добива своја URL-адреса, така што можете да споделите градба со пријател и да продолжите со итерација без да ја расипете.

Додадете вештина за вештачка интелигенција од Vibe Skills и празниот код исто така исчезнува. Three.js поставување на сцената, контролер на играчот, градежен цевковод и Vercel-подготвен vercel.json се генерираат со една команда. Потоа Cursor го претвора остатокот од викендот во разговор каде што опишувате каков вид на игра сакате и го прилагодувате излезот. Тоа е целиот стак: пазарна вештина за основата, AI уредник за итерација и Vercel за распоредување. Самостојно, бесплатно и брзо.

Vibe Skills

Прелистајте стотици готови вештини за Claude, Cursor и многу повеќе.

Истражете вештини

Започнете бесплатно сега

Анатомија на 48 часа: Од петок концепт до недела распоредување

Секое лансирање за викенд што всушност ќе се емитува ги следи истите чекори. Трикот е да се планира распоредувањето во петок, а не во недела попладне, така што последните шест часа да се потрошат на полирање наместо да се борите со грешка при градба.

Фаза	Блок од време	Што правите	Што се испорачува до крајот на фазата
Фаза 1: Концепт	Петок 18:00 - 22:00	Изберете жанр, напишете 1-страница дизајн документ, инсталирајте ја вештината за 3D игри Vibe Skills, притиснете почетен пакет на GitHub, поврзете се со Vercel	Жива URL-адреса `name-game.vercel.app` со почетната сцена
Фаза 2: Градба	Сабота 9:00 - 20:00	Заменете го привремениот држач со вашата основна механика, додадете 1 ниво, натерајте да работи состојбата на победа/пораз	Играчка градба на истата URL-адреса на Vercel, автоматски распоредена при секое притискање
Фаза 3: Полирање	Недела 10:00 - 16:00	Звук, зачин, скокачки прозорец за упатство, преглед на грешки, проверка на перформанси на мобилен	Градба што не се расипува во првите 60 секунди на кој било уред
Фаза 4: Лансирање	Недела 16:00 - 20:00	Поставете сопствено име на домен (опционално), снимајте GIF, напишете страница за itch.io, објавете ја врската	Јавна URL-адреса + страница за itch.io + објава за лансирање на социјалните мрежи

Причината зошто ова функционира е петочното притискање на Vercel. Откако постои URL-адресата, секое саботно и неделно прегледување се распоредува автоматски. Нема „паника при распоредување во недела навечер“ бидејќи распоредувањето веќе се случи во петок и работеше на автопилот цел викенд.

Што изгледа „Vibe кодирање“ на 3D игра на Vercel

Vibe кодирање значи опишување на она што го сакате на обичен англиски и дозволување на AI уредник да го напише кодот, а потоа итерација на излезот. За Three.js игра на Vercel, циклусот е необично чист: секоја промена во Cursor е pnpm dev подалеку од локална повратна информација, потоа git push подалеку од жива URL за преглед, потоа автоматски распоредена до продукција на main.

Викенд игра на Vercel што се кодира на „vibe“ изгледа вака:

Отворете ја почетната папка на вештината во Cursor.
Опишете функција во разговор: „двоен скок ако просторот се притисне двапати во рок од 200ms“.
Cursor ги уредува датотеките со контролори. Зачувај. pnpm dev повторно се вчитува. Го чувствувате скокот во прелистувачот.
Ако се чувствува правилно, git push. Vercel гради URL за преглед. Испратете ја на пријател.
Спојувајте на main кога чувството е заклучено. Продуктивната URL-адреса се ажурира во рок од 60 секунди.

Вештачката интелигенција ја пишува. Vercel ги прави распоредувањата. Вие се грижите за чувството и дизајнот.

5 AI вештини за 3D игри што го прават ова можно на Vibe Skills

Овие вештини се изградени за работниот тек на Vercel + Three.js + Cursor за викенд. Секоја испорачува Three.js проект базиран на Vite, работен vercel.json, pnpm build што произведува статички пакет што Vercel може да го сервира од работ на мрежата, и тестиран пат за распоредување. Сите се во категоријата 3D игри на Vibe Skills.

1. Three.js + Vercel Game Starter

Стандарден избор. Генерира Three.js сцена со контролер на играчот, камера од трето лице, систем за осветлување, небесна купола и рамнина на земјата со судири. Испорачува со vercel.json што ги поставува правилните заглавија за кеширање за Three.js пакети со ресурси. pnpm dev работи локално; еден клик во таблата со Vercel го поврзува GitHub репо и имате жива URL.

Најдобро за: кој било жанр освен чист 2D. Користете го ова ако сè уште не знаете што градите.

2. First-Person Vercel Walker

Полиран контролер од прво лице (WASD + заклучување на покажувачот на глувчето + гравитација + спринт + скок) со куки за стапала, замавнување на главата и vercel.json што правилно ги обработува CSP заглавијата за заклучување на покажувачот. Ова ги збунува многу самостојни програмери во продукција. Вештината ви го решава тоа.

Најдобро за: симулатори на одење, хорор прототипови, наративни игри, музејски изложби.

3. Browser Arena Shooter Kit

Арена од врвот надолу (двојна контрола на палецот, генератор на бранови, основна AI на непријатели, систем за проектили, HUD за резултат) со Vercel-прилагоден градеж што компресира ресурси, го дели кодот на AI и музиката што се вчитува подоцна. Вклучени се повеќекратни куки; викендот испорачува сингл-плејер.

Најдобро за: аркадни стрелци, куршумна пекол, џем записи што треба брзо да се вчитаат на мобилен.

4. Vercel Puzzle Platformer

Платформска игра од трето лице (променлив скок, време на залутаност, детекција на рабови), контролни точки, три привремени нивоа што можете да ги уредувате во Blender или во код, и циклус на повторно појавување. vercel.json е конфигуриран за моментално повторно вчитување на ниво кеширано на работ на мрежата, така што тестирањето се чувствува брзо на телефон.

Најдобро за: пузл платформски игри, паркур прототипови, експерименти со дизајн на нивоа.

5. Vercel Driving Sandbox

Аркадно чувство на возење (крива на забрзување, физика на лизгање, заостанување на камерата, основен терен) со нискополигоно автомобил, шаблон за патеки и распоредување прилагодено за големи мрежи на терен. Претходно поставените HTTP заглавија прават WebGL контекстот да стартува побрзо на Safari, историски најбавниот прелистувач за Three.js.

Најдобро за: аркадни трки, возење надвор од пат, демо на чувство на автомобил за портфолио.

Прелистајте ги сите вештини за 3D игри на Vibe Skills →

Чекор-по-чекор од петок до недела

Ова е точниот распоред. Прилагодете го почетното време, но задржете го редоследот. Клучната пресвртница е петочното распоредување на Vercel. Сè потоа е итерација.

Петок 18:00 - 20:00: Изберете вештина, притиснете на GitHub, поврзете се со Vercel

Чекор 1: Изберете вештина за 3D игра на Vibe Skills. Прелистајте ја категоријата 3D игри, изберете ја онаа што одговара на вашиот жанр и инсталирајте го почетниот пакет во нова папка. Отворете го во Cursor. Треба да видите Three.js сцена со подвижен играч до 19:00 часот.

Чекор 2: Создадете GitHub репо и притиснете. git init, git remote add, git push. Користете го името на вашата игра како име на репо (crystal-runner, lunar-fishing, што и да е). Името на репо често станува вашата URL.

Чекор 3: Поврзете го репо со Vercel. Пријавете се на Vercel со GitHub (бесплатно), кликнете „Add New Project“, изберете го репо. Vercel автоматски детектира Vite и ги конфигурира градбите. Кликнете Deploy. Во рок од 60 секунди имате URL crystal-runner.vercel.app. Отворете ја на вашиот телефон. Споделете со еден пријател. Лентата за распоредување сега е нула за остатокот од викендот.

Петок 20:00 - 22:00: Напишете го дизајн документот

Чекор 4: Одговорете на пет прашања на обичен англиски. Отворете страница во Notion или markdown датотека во репото и одговорете:

Што прави играчот на секои 5 секунди? (основната јамка)
Која е состојбата на победа и состојбата на пораз?
Колку трае една игра или едно ниво?
Кој е визуелниот кука? (палета, осветлување, референца за стил)
Која е едната функција што ја прави оваа игра незаборавна за 30 секунди?

Чекор 5: Притиснете го дизајн документот. Притиснете го во репото. Vercel ќе се прераспореди. Дисциплината на притискање на секоја значајна промена ја одржува живата URL чесна.

Сабота 9:00 - 13:00: Изградете ја основната механика

Чекор 6: Заменете ја привремената механика со вашата една функција. Ова е единствената важна функција. Користете го разговорот на Cursor за да ја опишете („кога играчот ќе земе кристал, замрзнете ги околните непријатели за 2 секунди и пуштете ѕвонче“). Итерирајте локално со pnpm dev. Кога ќе се чувствува правилно, притиснете.

Чекор 7: Поставете ја состојбата на победа/пораз. Градба од 60 секунди со вистински крај се чувствува како игра. Градба од 60 минути без крај се чувствува како техно демо. Секогаш прво поставете го екранот за победа, а потоа сè друго.

Сабота 13:00 - 20:00: Додадете едно ниво

Чекор 8: Изградете едно полирано ниво. Не три полупечени. Користете привремени коцки за геометрија. Користете го основниот лик на вештината. Прилагодете го чувството - висина на скок, заостанување на камерата, интензитет на честички.

Чекор 9: Додадете скокачки прозорец за упатство. Две реченици „WASD за движење, кликнете за да пукате“ скокачки прозорец при првото стартување ја спасува вашата игра од збунети играчи кои се откажуваат за 8 секунди. Cursor може да генерира скокачки прозорец за React (или обичен DOM) за 30 секунди.

Чекор 10: Притискајте на секој час. Секое притискање добива URL за преглед на Vercel. Испратете го секое на пријател. Циклусот на повратни информации е тајното оружје на овој стак.

Недела 10:00 - 16:00: Полирање

Чекор 11: Додадете три звуци. Јамка за чекори, амбиентална подлога, сигнал за победа. Дури и три звуци драматично го подигнуваат прототипот за викенд. Бесплатни извори: freesound.org, opengameart.org.

Чекор 12: Додадете зачин. Честички при удар, тресење на екран при судир, искачувачки броеви на резултатот. Зачинот е она што прави една градба од 48 часа да изгледа како градба од 6 месеци во GIF. Прашајте го Cursor да додаде „тресење на екран со интензитет 0.3 за 150ms кога играчот ќе добие штета“ - тој ќе го напише куката за тресење на камерата за пет секунди.

Чекор 13: Стартувајте преглед на Lighthouse. Отворете ја URL-адресата на Vercel на телефон и стартувајте ги Chrome DevTools Lighthouse. Three.js пакетите обично се околу 400 KB до 1.5 MB. Ако сте над 3 MB, прашајте го Cursor да овозможи поделба на кодот на тешките модули. Gzip и brotli на Vercel ќе се погрижат за останатото.

Чекор 14: Преглед на грешки. Играјте ја вашата жива URL пет пати по ред. Поправете сè што се расипува двапати. Игнорирајте сè што се расипува еднаш.

Недела 16:00 - 20:00: Лансирање

Чекор 15: (Опционално) Поставете сопствено име на домен. Ако однапред сте купиле name-game.com, додадете го во поставките на проектот на Vercel. SSL е автоматски. Инаку, URL-адресата *.vercel.app е добра - има HTTPS, може да се споделува и се вчитува насекаде.

Чекор 16: Снимете 15-секунден GIF од најдобриот момент. Користете ја живата URL-адреса, не localhost. GIF-от е она што се клика на Twitter, Bluesky и Reddit.

Чекор 17: Создадете страница за itch.io (опционално, но високо ефикасно). Наслов, еден ред слоган, три слики од екранот, GIF-от, контролите, заслугите и вградување на вашиот *.vercel.app iframe (itch.io поддржува вградување на iframe за HTML5 игри). Сега имате две URL-адреси - една за случајно споделување и една за играчката публика.

Чекор 18: Објавете ја врската. Twitter, Bluesky, вашиот Discord за програмерска заедница, r/IndieDev, r/threejs, r/WebGames. Секогаш започнувајте со GIF-от. Секогаш вклучувајте ја URL-адресата. Ако сте користеле вештина од Vibe Skills, споменете ја во објавата за развојниот дневник - другите програмери што читаат ќе ја посакаат истата почетна.

Како да се избегнат трите најчести грешки при распоредување на Vercel

Три работи расипуваат речиси секој самостоен Three.js + Vercel викенд. Сите три се решенија за 5 минути ако ги фатите во петок навечер, и 5-часовни спирални проблеми ако ги откриете во недела во 19:00 часот.

Директориум за градба со грешен излез. Vite стандардно е dist/. Vercel автоматски детектира Vite и користи dist/. Ако сте го приспособиле излезот, поставете outputDirectory во vercel.json или поставките на проектот или вашето распоредување ќе биде 404.
Патеки до ресурси што работат локално, но 404 во продукција. Користете релативни патеки или помошникот import.meta.env.BASE_URL на Vite за било кој GLB, текстура или аудио датотека што се вчитува во време на извршување. Патеките со тврд код /assets/... обично работат, но копираните апсолутни Windows патеки дефинитивно нема да работат.
CSP заглавија што блокираат заклучување на покажувачот или аудио контекст. Игрите од прво лице имаат потреба од заклучување на покажувачот. Аудиото бара активирање со гест на корисникот. Секоја вештина од категоријата 3D игри испорачува со правилниот блок headers во vercel.json за да го обработи ова. Ако сте напишале свој од нула, копирајте ја конфигурацијата од репото на вештината.

Распоредувањето работи во петок, така што кога овие работи ќе се расипат во недела, секогаш е поради неодамнешна промена. git bisect е ваш пријател. Уште подобро: продолжете да притискате на секои 30 минути за да биде мал кодот што се расипал.

Често поставувани прашања

Дали бесплатниот слој на Vercel навистина ќе издржи ако мојата игра добие сообраќај?

Да, за лансирање за викенд и првите неколку недели. Бесплатниот слој ви дава 100 GB пропусен опсег месечно, што е приближно 20.000 игри од Three.js градба од 5 MB. Ако го достигнете тој таван, Про планот чини 20 $/месечно и ве зголемува на 1 TB. За лансирање за викенд, бесплатното е повеќе од доволно. Вештините на Vibe Skills испорачуваат со конфигурации за градба што ја минимизираат големината на пакетот, што го растегнува бесплатниот слој понатаму.

Може ли да користам сопствено име на домен на бесплатниот Vercel слој?

Да. Бесплатниот слој поддржува сопствени домени со автоматски HTTPS. Купете домен (Namecheap, Cloudflare Registrar, Porkbun), насочете го кон Vercel, а Vercel ќе се погрижи за SSL сертификатот. Поставувањето трае околу 10 минути. Ако немате домен, URL-адресата name-game.vercel.app е доволно кратка за да се сподели на која било платформа.

Дали овој стак е во ред за учество на џем за игри?

Да, и тоа е еден од најдобрите стакови за учество на џемови. Повеќето џемови (Ludum Dare, GMTK, js13k, GitHub Game Off) прифаќаат било која URL-адреса што може да се игра на веб. Врската *.vercel.app работи исто како URL-адреса на itch.io за судиите. Многу победници на џемови се емитуваат на двете - itch.io за играчката публика, Vercel како брза канонска URL.

Дали треба да знам Three.js пред да започнам?

Ви треба доволно JavaScript за да го прочитате она што го пишува Cursor и да ги прилагодите вредностите. Не треба да пишувате Three.js од нула. Вештините на Vibe Skills генерираат поставување на моторот, камера, контролер и конфигурација за градба. Cursor се грижи за кодот на играта од вашите описи.

Што се случува ако мојата Vercel градба пропадне во недела во 19:00 часот?

Најчестата причина е грешка во TypeScript или недостасува променлива на околината. Vercel ја покажува дневната евиденција на градбата со истакната линија што пропаднала. Еден клик во таблата со враќање на последната работна градба и ја промовира во продукција. Бидејќи секое притискање е прегледна градба, никогаш не сте подалеку од еден код од работна градба. Затоа притискањето на секои 30 минути во сабота и недела е важно.

Може ли да го продадам или модифицирам кодот од вештина за 3D игра на Vibe Skills?

Да. Вештините на Vibe Skills испорачуваат со лиценца пријателска за комерцијалност што ви овозможува да го објавите кодот во вашата сопствена игра на Vercel, itch.io, Steam или каде било на друго место. Креаторите ги задржуваат IP правата на вештината, вие ги задржувате IP правата на играта изградена врз неа.

Што ако не сакам да користам Cursor?

Работи секој AI уредник што може да уредува датотеки со проекти. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - било кој од нив може да итерира на Three.js скелињата од вештина на Vibe Skills. Самата вештина е независна од уредникот.

Испратете ја овој викенд

Причината зошто повеќето самостојни програмери никогаш не испраќаат 3D игра не е моторот, жанрот или таванот на вештини. Тоа е петочното навечер кога тие „само истражуваат малку повеќе“ и никогаш не започнуваат. Следниот бесплатен викенд што ќе го имате, следете го четирифазниот план: инсталирајте вештина за 3D игри Vibe Skills, притиснете на GitHub, поврзете се со Vercel, распоредете до петок 20:00 часот, а потоа потрошете сабота и недела итерирајќи на жива URL.

Вашето портфолио од десет игри испратени за викенд на Vercel вреди повеќе од вашиот хипотетички проект од шест месеци со сопствен мотор. Испратената игра секогаш победува. Бесплатната URL-адреса на Vercel е доказ.

Прелистајте вештини за 3D игри на Vibe Skills →

Прескокнете ја маратонската работа на Three.js. Инсталирајте вештина за 3D игри на Vibe Skills, притиснете на Vercel и имајте жива URL до недела навечер.