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 управляет развертыванием. Вы управляете дизайном.

Это руководство предназначено для инди-разработчиков, "вайб"-кодеров, участников хакатонов и всех, кто устал от наполовину законченных вкладок 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 ГБ трафика в месяц. Сборка Three.js размером 5 МБ при 10 000 прохождений - это 50 ГБ. Вы исчерпаете выходные раньше, чем исчерпаете трафик.
Неограниченное количество статических развертываний с HTTPS и поддоменом *.vercel.app.
Поддержка пользовательских доменов на бесплатном тарифе - используйте свой name-game.com, если он у вас есть, в противном случае бесплатный URL vercel.app можно распространять на всех социальных платформах.
Предварительные просмотры развертываний для каждого коммита - каждый push получает свой URL, поэтому вы можете поделиться сборкой с другом и продолжать итерации, не нарушая ее.

Добавьте ИИ-навык от Vibe Skills, и шаблонный код тоже исчезнет. Сцена Three.js, контроллер игрока, конвейер сборки и готовый к Vercel vercel.json генерируются одной командой. Затем Cursor превращает остаток выходных в чат, где вы описываете желаемый геймплей и настраиваете вывод. Это полный стек: навык из маркетплейса для основы, ИИ-редактор для итераций и Vercel для развертывания. Соло, бесплатно и быстро.

Vibe Skills

Сотни готовых навыков для Claude, Cursor и других инструментов.

Смотреть навыки

Начать бесплатно

Анатомия 48 часов: Концепция в пятницу - Развертывание в воскресенье

Каждый успешно запущенный на выходных проект следует одним и тем же этапам. Хитрость в том, чтобы спланировать развертывание в пятницу, а не в воскресенье днем, чтобы последние шесть часов были посвящены полировке, а не борьбе с ошибкой сборки.

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

Причина, по которой это работает, - это пятничная отправка в Vercel. Как только URL существует, каждый коммит в субботу и воскресенье развертывается автоматически. Нет "паники развертывания в воскресенье вечером", потому что развертывание уже произошло в пятницу и работало в автоматическом режиме всю неделю.

Как выглядит "вайб-кодинг" 3D-игры на Vercel

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

Выходные с вайб-кодингом игры на Vercel выглядят так:

Откройте папку стартового проекта навыка в Cursor.
Опишите функцию в чате: "двойной прыжок, если нажать пробел дважды в течение 200 мс".
Cursor редактирует файл контроллера. Сохраните. pnpm dev перезагружается. Вы чувствуете прыжок в браузере.
Если это кажется правильным, git push. Vercel собирает URL предварительного просмотра. Отправьте его другу.
Объедините в main, когда ощущение будет зафиксировано. URL продакшена обновляется в течение 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, и у вас есть рабочий URL.

Лучше всего подходит для: любого жанра, кроме чисто 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, что угодно). Имя репозитория часто становится вашим 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: Отправляйте каждый час. Каждый push получает URL предварительного просмотра Vercel. Отправьте каждый из них другу. Цикл обратной связи - секретное оружие этого стека.

Воскресенье 10:00 - 16:00: Полировка

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

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

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

Шаг 14: Проверка ошибок. Сыграйте в свою рабочую ссылку пять раз подряд. Исправьте все, что ломается дважды. Игнорируйте все, что ломается один раз.

Воскресенье 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, управление, кредиты и встроенный iframe вашего *.vercel.app (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 в продакшене. Используйте относительные пути или вспомогательную функцию 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 минут. Если у вас нет домена, 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 показывает журнал сборки с выделенной строкой с ошибкой. Один клик в панели управления откатывает последнюю рабочую сборку и продвигает ее в продакшн. Поскольку каждый push - это предварительный просмотр развертывания, вы всегда находитесь на расстоянии одного коммита от рабочей сборки. Вот почему важно отправлять данные каждые 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, а затем проведите субботу и воскресенье, итерируя над рабочим URL.

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

Просмотреть навыки для 3D-игр на Vibe Skills →

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