Vibe Skills

Переглядайте сотні готових навичок для Claude, Cursor та інших.

Запустіть 3D гру на Vercel до ночі неділі: Посібник з розгортання за 48 годин

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

Це не "створіть прототип на своєму ноутбуці і вважайте, що це готово". Це публічне посилання, яке будь-хто у світі може відкрити в браузері, з HTTPS, кешуванням на межі мережі та власним доменом, якщо ви його бажаєте. Система штучного інтелекту надає шаблон Three.js та робочий файл vercel.json. Cursor керує циклом ітерацій. Vercel керує розгортанням. Ви керуєте дизайном.

Цей посібник призначений для інді-розробників, вайб-кодерів, учасників хакатонів та всіх, хто втомився від незавершених вкладок localhost:5173. Ми розглянемо, чому цей стек працює, анатомію 48-годинного розгортання, п’ять систем штучного інтелекту для 3D-ігор, розроблених для цього робочого процесу, та покроковий план від п’ятниці до неділі.

Vibe Skills

Переглядайте сотні готових навичок для Claude, Cursor та інших.

Переглянути навички

Почати безкоштовно зараз

Чому Vercel + Three.js + AI Skills - це стек для соло-розробника

Vercel - це найлінивіший можливий цільовий пункт для розгортання гри на Three.js. Завантажте до GitHub, Vercel помітить, збірку проекту та поверне вам посилання протягом 60 секунд. Жодного сервера для надання, жодного файлу Docker, жодної конфігурації NGINX, жодного налаштування SSL. Збірка Three.js - це просто статичні HTML, JS та WebGL активи, що саме те, для чого була створена мережа Vercel.

Безкоштовний тариф комфортно покриває запуск на вихідні:

100 ГБ пропускної здатності на місяць. Збірка Three.js на 5 МБ при 10 000 відтворення займає 50 ГБ. Ви вичерпаєте вихідні раніше, ніж вичерпаєте пропускну здатність.
Необмежені статичні розгортання з HTTPS та піддоменом *.vercel.app.
Підтримка власного домену на безкоштовному тарифі - надайте свій name-game.com, якщо він у вас є, інакше безкоштовне посилання vercel.app можна буде ділитися на всіх соціальних платформах.
Попередній перегляд розгортань для кожного коміту - кожен push отримує власне посилання, тому ви можете поділитися збіркою з другом та продовжувати ітерувати, не ламаючи її.

Додайте систему штучного інтелекту від Vibe Skills, і шаблон також зникне. Налаштування сцени Three.js, контролер гравця, конвеєр збірки та файл vercel.json, готовий для Vercel, генеруються однією командою. Потім Cursor перетворює решту вихідних на чат, де ви описуєте бажаний ігровий процес і налаштовуєте вивід. Це повний стек: ринкова система для основи, редактор ШІ для ітерацій та Vercel для розгортання. Соло, безкоштовно та швидко.

Vibe Skills

Переглядайте сотні готових навичок для Claude, Cursor та інших.

Переглянути навички

Почати безкоштовно зараз

Анатомія 48 годин: від концепції в п’ятницю до розгортання в неділю

Кожен вихідний, який фактично запускається, проходить за однаковими етапами. Хитрощі полягають у плануванні розгортання в п’ятницю, а не в неділю вдень, щоб останні шість годин пішли на полірування, а не на боротьбу з помилкою збірки.

Фаза	Блок часу	Що ви робите	Що буде поставлено до кінця фази
Фаза 1: Концепція	П’ятниця 18:00 - 22:00	Виберіть жанр, напишіть 1-сторінковий документ з дизайном, встановіть систему штучного інтелекту для 3D-ігор Vibe Skills, завантажте стартер до GitHub, підключіть до Vercel	Активне посилання `name-game.vercel.app` з шаблонною сценою
Фаза 2: Побудова	Субота 9:00 - 20:00	Замініть плейсхолдер своєю основною механікою, додайте 1 рівень, реалізуйте стан перемоги/поразки	Грабельна збірка за тим самим посиланням Vercel, автоматично розгортається при кожному завантаженні
Фаза 3: Полірування	Неділя 10:00 - 16:00	Звук, ефекти, спливаюче вікно з інструкцією, виправлення помилок, перевірка продуктивності на мобільних пристроях	Збірка, яка не ламається протягом перших 60 секунд на будь-якому пристрої
Фаза 4: Запуск	Неділя 16:00 - 20:00	Встановіть власний домен (необов’язково), запишіть GIF, напишіть сторінку itch.io, опублікуйте посилання	Публічне посилання + сторінка itch.io + пост про запуск у соціальних мережах

Причина, чому це працює, - це п’ятничне завантаження до Vercel. Як тільки посилання існує, кожен коміт суботи та неділі розгортається автоматично. Немає "паніки розгортання в неділю ввечері", тому що розгортання вже відбулося в п’ятницю і працювало в автоматичному режимі весь вихідний.

Як виглядає "вайб-кодинг" 3D-гри на Vercel

Вайб-кодинг означає опис того, що ви хочете, простою англійською мовою, і надання редактору ШІ написати код, а потім ітерація над виводом. Для гри на Three.js на Vercel цей цикл незвичайно чистий: кожна зміна в Cursor - це pnpm dev для локального відгуку, потім git push для живого попереднього перегляду, потім автоматичне розгортання на продакшн з main.

Вихідні з вайб-кодингом гри на Vercel виглядають так:

Відкрийте папку стартера системи в Cursor.
Опишіть функцію в чаті: "подвійний стрибок, якщо пробіл натиснуто двічі протягом 200 мс".
Cursor редагує файл контролера. Зберегти. pnpm dev перезавантажується. Ви відчуваєте стрибок у браузері.
Якщо відчуття правильне, git push. Vercel збирає попередній перегляд. Надішліть його другу.
Об’єднайте до main, коли відчуття зафіксоване. Посилання на продакшн оновлюється протягом 60 секунд.

ШІ робить набір тексту. Vercel робить розгортання. Ви займаєтеся відчуттями та дизайном.

5 систем ШІ для 3D-ігор, які роблять це можливим на Vibe Skills

Ці системи розроблені для робочого процесу вихідних Vercel + Three.js + Cursor. Кожна з них постачається з проектом Three.js на базі Vite, робочим файлом vercel.json, командою pnpm build, яка генерує статичну збірку, яку Vercel може обслуговувати з межі мережі, та протестованим шляхом розгортання. Усі вони знаходяться в категорії 3D-ігор на Vibe Skills.

1. Стартер гри Three.js + Vercel

Стандартний вибір. Генерує сцену Three.js з контролером гравця, камерою від третьої особи, набором освітлення, скайбоксом та площиною з колізіями. Постачається з vercel.json, який встановлює правильні заголовки кешування для пакетів активів Three.js. pnpm dev запускається локально; один клік у панелі керування Vercel підключає репозиторій GitHub, і ви отримуєте активне посилання.

Найкраще підходить: для будь-якого жанру, окрім чисто 2D. Використовуйте це, якщо ви ще не знаєте, що будуєте.

2. Першоособовий персонаж для Vercel

Відшліфований контролер від першої особи (WASD + блокування вказівника миші + гравітація + спринт + стрибок) з гачками для кроків, тремтінням голови та vercel.json, який правильно обробляє заголовки CSP для блокування вказівника. Цей пункт часто стає проблемою для багатьох соло-розробників у продакшні. Система штучного інтелекту вирішує це для вас.

Найкраще підходить: для симуляторів ходьби, прототипів жахів, наративних ігор, музейних експозицій.

3. Комплект шутера від першої особи для браузера

Арена з видом зверху (контролер з двома стіками, генератор хвиль, базовий ШІ ворогів, система снарядів, HUD рахунку) з оптимізованою для Vercel збіркою, яка стискає активи, розділяє ШІ на частини та завантажує музику за запитом. Включено гачки для багатокористувацької гри; вихідні постачаються з однокористувацьким режимом.

Найкраще підходить: для аркадних шутерів, bullet hell, конкурсів, які потребують швидкого завантаження на мобільних пристроях.

4. Платформна головоломка для Vercel

Платформер від третьої особи (змінний стрибок, час койота, виявлення виступів), контрольні точки, три тестові рівні, які можна редагувати в Blender або в коді, та цикл відродження. vercel.json налаштований для миттєвого перезавантаження рівнів з кешуванням на межі мережі, тому тестування відчувається швидко на телефоні.

Найкраще підходить: для платформерів-головоломок, прототипів паркуру, експериментів з дизайном рівнів.

5. Пісочниця для водіння на Vercel

Аркадне відчуття водіння (крива прискорення, фізика дрифту, затримка камери, базова місцевість) з низькополігональним автомобілем, шаблоном траси та розгортанням, оптимізованим для великих сіток місцевості. Попередньо встановлені HTTP-заголовки роблять контекст WebGL швидшим на Safari, історично найповільнішому браузері для Three.js.

Найкраще підходить: для аркадних перегонів, позашляхового водіння, демонстрацій відчуття автомобіля для портфоліо.

Переглянути всі системи штучного інтелекту для 3D-ігор на Vibe Skills →

Покроковий план від п’ятниці до неділі

Це точний графік. Відрегулюйте час початку, але дотримуйтесь порядку. Ключовим етапом є розгортання Vercel у п’ятницю ввечері. Все, що йде далі, - це ітерація.

П’ятниця 18:00 - 20:00: Виберіть систему, завантажте до GitHub, підключіть Vercel

Крок 1: Виберіть систему штучного інтелекту для 3D-ігор на Vibe Skills. Перегляньте категорію 3D-ігор, виберіть ту, що відповідає вашому жанру, та встановіть стартер у нову папку. Відкрийте її в Cursor. До 19:00 ви повинні побачити сцену Three.js з рухомим гравцем.

Крок 2: Створіть репозиторій GitHub і завантажте. git init, git remote add, git push. Використовуйте slug вашої гри як ім’я репозиторію (crystal-runner, lunar-fishing, тощо). Ім’я репозиторію часто стає вашим посиланням.

Крок 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 знову розгорнеться. Дисципліна завантаження кожної значущої зміни зберігає активне посилання чесним.

Субота 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: Завантажуйте кожну годину. Кожне завантаження отримує попереднє посилання Vercel. Надсилайте кожне другу. Цикл зворотного зв’язку - це секретна зброя цього стеку.

Неділя 10:00 - 16:00: Полірування

Крок 11: Додайте три звуки. Цикл кроків, фоновий синтезатор, фінальний акорд перемоги. Навіть три звуки значно покращують прототип вихідного дня. Безкоштовні джерела: freesound.org, opengameart.org.

Крок 12: Додайте ефектів. Частинки при попаданні, струшування екрану при ударі, спливаючі цифри при нарахуванні очок. Ефекти - це те, що робить збірку за 48 годин схожою на збірку за 6 місяців у GIF. Попросіть Cursor додати "струшування екрану інтенсивністю 0.3 протягом 150 мс, коли гравець отримує пошкодження" - він напише гачок струшування камери за п’ять секунд.

Крок 13: Запустіть прохід Lighthouse. Відкрийте посилання Vercel на телефоні та запустіть Chrome DevTools Lighthouse. Пакети Three.js зазвичай мають розмір від 400 КБ до 1,5 МБ. Якщо ви перевищуєте 3 МБ, попросіть Cursor увімкнути розділення коду для важких модулів. Vercel gzip і brotli зроблять решту.

Крок 14: Виправлення помилок. Відтворіть своє активне посилання п’ять разів поспіль. Виправте все, що ламається двічі. Ігноруйте все, що ламається один раз.

Неділя 16:00 - 20:00: Запуск

Крок 15: (Необов’язково) Встановіть власний домен. Якщо ви купили name-game.com заздалегідь, додайте його в налаштуваннях проекту Vercel. SSL автоматичний. Інакше посилання *.vercel.app підійде - воно має HTTPS, його можна ділитися, і воно завантажується скрізь.

Крок 16: Запишіть 15-секундний GIF найкращого моменту. Використовуйте активне посилання, а не localhost. GIF - це те, що отримує кліки в Twitter, Bluesky та Reddit.

Крок 17: (Необов’язково, але високоефективно) Створіть сторінку itch.io. Заголовок, одномісний слоган, три скріншоти, GIF, керування, кредити та вбудований iframe з вашим *.vercel.app (itch.io підтримує вбудовування iframe для HTML5 ігор). Тепер у вас є два посилання - одне для загального обміну, а інше для геймерської аудиторії.

Крок 18: Опублікуйте посилання. Twitter, Bluesky, ваш Discord-сервер для розробників, r/IndieDev, r/threejs, r/WebGames. Завжди починайте з GIF. Завжди додавайте посилання. Якщо ви використовували систему Vibe Skills, згадайте про це в пості розробника - іншим розробникам, які читають, знадобиться такий самий стартер.

Як уникнути трьох найпоширеніших збоїв розгортання Vercel

Три речі ламають майже кожні вихідні для соло-розробників Three.js + Vercel. Усі три виправляються за 5 хвилин, якщо ви помітите їх у п’ятницю ввечері, і перетворюються на 5-годинні кролячі нори, якщо ви виявите їх у неділю о 19:00.

Неправильна директорія виводу збірки. Vite за замовчуванням використовує dist/. Vercel автоматично виявляє Vite і використовує dist/. Якщо ви налаштували вивід, встановіть outputDirectory у vercel.json, налаштуваннях проекту або ваша збірка буде 404.
Шляхи до активів, які працюють локально, але видають 404 у продакшні. Використовуйте відносні шляхи або допоміжну функцію Vite import.meta.env.BASE_URL для будь-яких файлів GLB, текстур або аудіо, що завантажуються в часі виконання. Шляхи, написані вручну /assets/..., зазвичай працюють, але абсолютні шляхи Windows, скопійовані вручну, точно не працюватимуть.
Заголовки CSP, які блокують блокування вказівника або аудіоконтекст. Першоособовим іграм потрібне блокування вказівника. Аудіо потребує активації жестом користувача. Будь-яка система з категорії 3D-ігор постачається з правильним блоком headers у vercel.json для обробки цього. Якщо ви написали власну з нуля, скопіюйте конфігурацію з репозиторію системи.

Розгортання працює в п’ятницю, тому коли воно ламається в неділю, це завжди через нещодавні зміни. git bisect - ваш друг. Ще краще: завантажуйте кожні 30 хвилин, щоб зламаний коміт був невеликим.

Часті запитання

Чи дійсно безкоштовний тариф Vercel витримає, якщо моя гра отримає трафік?

Так, для запуску на вихідних і перших кількох тижнів. Безкоштовний тариф надає 100 ГБ пропускної здатності на місяць, що приблизно відповідає 20 000 відтворенням збірки Three.js розміром 5 МБ. Якщо ви досягнете цієї межі, тариф Pro коштує $20 на місяць і збільшує її до 1 ТБ. Для запуску на вихідні безкоштовного варіанту більш ніж достатньо. Системи на Vibe Skills постачаються з конфігураціями збірки, які мінімізують розмір пакетів, що дозволяє ще довше використовувати безкоштовний тариф.

Чи можу я використовувати власний домен на безкоштовному тарифі Vercel?

Так. Безкоштовний тариф підтримує власні домени з автоматичним HTTPS. Придбайте домен (Namecheap, Cloudflare Registrar, Porkbun), вкажіть його на Vercel, і Vercel подбає про сертифікат SSL. Налаштування займає близько 10 хвилин. Якщо у вас немає домену, посилання name-game.vercel.app достатньо коротке, щоб ділитися ним на будь-якій платформі.

Чи підходить цей стек для подання гри на конкурс?

Так, і це один з найкращих стеків для подання на конкурси. Більшість конкурсів (Ludum Dare, GMTK, js13k, GitHub Game Off) приймають будь-яке грабельне в Інтернеті посилання. Посилання *.vercel.app працює для суддів точно так само, як і посилання itch.io. Багато переможців конкурсів випускають на обох платформах - itch.io для геймерської аудиторії, Vercel як швидке канонічне посилання.

Чи потрібно мені знати Three.js перед початком?

Вам потрібен достатній рівень JavaScript, щоб читати те, що пише Cursor, і налаштовувати значення. Вам не потрібно писати Three.js з нуля. Системи на Vibe Skills генерують налаштування двигуна, камеру, контролер та конфігурацію збірки. Cursor обробляє код ігрового процесу з ваших описів.

Що станеться, якщо моя збірка Vercel зазнає невдачі в неділю о 19:00?

Найпоширенішою причиною є помилка TypeScript або відсутність змінної середовища. Vercel показує журнал збірки із зазначенням рядка, що спричинив помилку. Один клік у панелі керування відкочує останню робочу збірку та просуне її на продакшн. Оскільки кожен коміт - це попередній перегляд, ви завжди знаходитесь на відстані одного коміту від робочої збірки. Ось чому завантаження кожні 30 хвилин у суботу та неділю має значення.

Чи можу я продавати або модифікувати код із системи штучного інтелекту для 3D-ігор Vibe Skills?

Так. Системи на Vibe Skills постачаються з ліцензією, дружньою до комерційного використання, яка дозволяє випускати код у власній грі на Vercel, itch.io, Steam або будь-де ще. Творці зберігають інтелектуальну власність на систему, а ви зберігаєте інтелектуальну власність на гру, створену на її основі.

Що робити, якщо я не хочу використовувати Cursor?

Працює будь-який редактор ШІ, який може редагувати файли проекту. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - будь-який з них може ітерувати над шаблоном Three.js із системи Vibe Skills. Сама система не залежить від редактора.

Випустіть це на вихідних

Причина, чому більшість соло-розробників ніколи не випускають 3D-гру, - це не двигун, жанр чи рівень навичок. Це вечір п’ятниці, коли вони "просто трохи більше досліджують" і ніколи не починають. Наступні вільні вихідні дотримуйтесь чотирифазного плану: встановіть систему штучного інтелекту для 3D-ігор Vibe Skills, завантажте до GitHub, підключіть Vercel, розгорніть до п’ятниці 20:00, а потім проведіть суботу та неділю, ітеруючи на живому посиланні.

Ваше портфоліо з десяти випущених за вихідні ігор на Vercel коштує більше, ніж ваш гіпотетичний піврічний проект з рушієм мрії. Випущене завжди перемагає. Безкоштовне посилання Vercel - це доказ.

Перегляньте системи штучного інтелекту для 3D-ігор на Vibe Skills →

Пропустіть марафон із шаблонів Three.js. Встановіть систему штучного інтелекту для 3D-ігор на Vibe Skills, завантажте до Vercel і отримайте активне посилання до ночі неділі.