Вайбкодинг веб-игры на $40 000 в месяц: кратко о главном
🎯 О чём этот конспект: История создания GeoSports (и экосистемы Geo Games) создателем спортивного контента Фрэнком Смитом. Без навыков программирования автор с помощью Claude за выходные собрал браузерную географическую викторину, которая за 3 месяца вышла на $40 000 ежемесячного дохода (700 000 MAU), получая 98% трафика через сарафанное радио и виральные механики в X (Twitter).
👤 Кому будет полезно: Вайбкодерам, инди-хакерам, соло-фаундерам и создателям контента, которые хотят собирать простые, но сверхдоходные веб-приложения и казуальные сервисы с виральным потенциалом, используя LLM как основного разработчика и девопса.
✨ Что получите: Готовую архитектуру ультралегкого стека (Claude + Vercel + MapLibre + Upstash Redis + Google Sheets), пошаговый алгоритм составления технической спецификации для ИИ, механику достижения 53% органического шеринга и стратегию бесплатного привлечения инфлюенсеров в качестве соавторов контента.
1. Минималистичный стек для сверхнагрузок: Архитектура казуальной веб-игры
Контекст: Большинство начинающих разработчиков перегружают свои первые проекты сложными базами данных, тяжелыми фреймворками и сложными бэкендами. Фрэнк Смит, будучи абсолютно нетехническим специалистом, собрал проект с нуля, выбрав минималистичный стек, способный выдерживать резкие скачки до 150 000 пользователей в сутки без падений и огромных счетов за инфраструктуру. Вся система построена на готовых облачных API и бессерверных решениях, где в качестве базы вопросов используется обычная таблица, а для расчетов — легковесные библиотеки рендеринга карт.
Тайминг:
Выгода: Нулевые затраты на поддержку собственной серверной инфраструктуры при трафике 700 000 MAU. Запуск прототипа за 8–16 часов чистого времени.
Как применить:
- Шаг 1: Инфраструктура хостинга и домена — Vercel Pro] — Зарегистрируйте аккаунт Vercel Pro для бессерверного деплоя Next.js/HTML-приложений и приобретите домен напрямую в панели Vercel, чтобы исключить ручную настройку DNS-записей.
- Шаг 2: Клиентский рендеринг карты — MapLibre GL JS] — Используйте открытую библиотеку MapLibre вместо дорогостоящего Google Maps API для отображения интерактивного глобуса и фиксации координат клика игрока.
- Шаг 3: Быстрая база данных для лидербордов — Upstash Redis] — Подключите Serverless Redis от Upstash для мгновенного сохранения очков, глобальных рейтингов и статистики без поддержки выделенного SQL-сервера.
- Шаг 4: Контентный CMS без кода — Google Sheets API] — Создайте структуру вопросов в Google Таблицах (5 ежедневных вопросов: ID, подсказка, широта, долгота, радиус погрешности), чтобы игра подтягивала ежедневный контент через простой API-запрос без необходимости писать админку.
- Шаг 5: Монетизация подписок — Stripe Billing] — Интегрируйте Stripe Checkout для Pro-тарифа с доступом к архиву игр и отключением рекламы.
Структура таблицы Google Sheets для ежедневных раундов:
| Round_Date | Q_Num | Question_Prompt | Target_Lat | Target_Lng | Tolerance_Km | Fact_Trivia |
| 2026-03-30 | 1 | Buffalo Bills Table Slam | 42.7738 | -78.7870 | 50 | Highmark Stadium, Orchard Park |Результат: Полностью бессерверное веб-приложение, готовое к мгновенному масштабированию под вирусные волны трафика без DevOps-инженера.
2. Разработка без кода через Claude: Метод «Спецификация + Скриншоты»
Контекст: Создание приложения без знания синтаксиса языков программирования часто упирается в «галлюцинации» нейросетей и непонимание того, куда вставлять код и как настраивать окружение. Подход Фрэнка состоял в разделении задачи: сначала Claude генерирует исчерпывающий файл спецификации (PRD/Spec) на основе референса (игры MapTap), а затем шаг за шагом ведет пользователя по процессу сборки. При возникновении любых ошибок и тупиков в интерфейсах Vercel или Git разработчик просто делал скриншот всего экрана и скармливал его мультимодальной LLM.
Тайминг:
Выгода: Экономия тысяч долларов на услугах агентств и фрилансеров; переход от абстрактной идеи к работающему MVP ровно за один 8-часовой блок сфокусированной работы.
Как применить:
- Шаг 1: Генерация спецификации проекта (Spec-driven Development) — Claude 3.5 Sonnet / Claude Opus] — Опишите концепцию механики, референс и ограничения. Попросите составить архитектурный документ.
Я не умею писать код. Я хочу создать ежедневную географическую веб-викторину (аналог MapTap, но с уклоном в тему спорта — GeoSports).
Пользователю дается 5 вопросов в день. Он читает подсказку и кликает по 3D-карте/глобусу.
В зависимости от расстояния начисляются баллы от 0 до 100 (зеленая/желтая/красная метка).
В конце выдается сводный результат и кнопка шеринга в соцсети.
Составь для меня:
1. Полную техническую спецификацию проекта (System Specification).
2. Выбор максимально простого и недорогого стека (клиент + база + хостинг).
3. Пошаговый план разработки на 10 этапов, где каждый этап разбит на атомарные команды, которые я смогу выполнить, просто копируя твой код.- Шаг 2: Пошаговая имплементация — Claude] — Двигайтесь строго по пунктам спецификации. Не переходите к следующему шагу, пока не протестирован предыдущий.
- Шаг 3: Дебаггинг интерфейсов через скриншоты — Служебные скриншоты] — При настройке деплоя, переменных окружения (Environment Variables в Vercel) или DNS делайте полный скриншот экрана с вопросом:
Я нахожусь в панели управления Vercel / Upstash. Вот скриншот моего экрана.
Куда именно мне нажать и какое точное значение из предыдущего шага вставить в выделенные поля? Объясни простым языком.Результат: Работоспособный веб-продукт, развернутый на собственном домене, созданный человеком с нулевым опытом в программировании.
3. Продуктовая виральность: Формула 53% Share Rate и Web-First подход
Контекст: Большинство мобильных игр требуют скачивания из App Store / Google Play, что отсекает до 90% импульсивного трафика. GeoSports сделан как Web-First решение: игра открывается по прямой ссылке прямо во встроенном браузере приложений социальных сетей (X/Twitter, Instagram). Вся игровая сессия занимает не более 60 секунд, правила понятны интуитивно («Тапни туда, где это произошло»), а результат формируется в виде наглядной карточки с эмодзи и баллами, которую пользователи массово пересылают в групповые чаты и ленту.
Тайминг: [02:00], 02:30], 08:53], 09:18]
Выгода: 53 000 репостов на каждые 100 000 сыгранных раундов (коэффициент виральности K-factor > 0.5), что обеспечивает 98% входящего органического трафика без затрат на платную рекламу.
Как применить:
- Шаг 1: Ликвидация онбординга — Спроектируйте интерфейс так, чтобы игра начиналась сразу по клику на кнопку «Play Today's Round». Никаких логинов, паролей, подтверждений почты или обучающих экранов перед первой игрой.
- Шаг 2: Геймификация погрешности — Настройте цветовую индикацию попадания:
- 90–100 баллов: Зеленая точка (идеально/очень близко).
- 50–89 баллов: Желтая точка (среднее попадание).
- 0–49 баллов: Красная точка (промах).
- Шаг 3: Копируемый сниппет результата для шеринга — Реализуйте кнопку, которая в один клик формирует компактный текстовый блок для буфера обмена (по образцу вирусной механики Wordle).
// Логика формирования вирусного текста для буфера обмена
function generateShareText(scoreArray, totalScore, roundNumber) {
const emojiMap = (score) => score >= 90 ? '🟢' : score >= 50 ? '🟡' : '🔴';
const grid = scoreArray.map(s => emojiMap(s)).join('');
return `GeoSports #${roundNumber}\nTotal: ${totalScore}/500\n\n${grid}\n\nCan you beat me? Play here: https://geosports.app`;
}Результат: Продукт, генерирующий лавинообразный виральный охват за счет импульсивного соперничества пользователей внутри мессенджеров и соцсетей.
4. Двухканальная модель монетизации браузерного микро-SaaS ($40 000/мес)
Контекст: Казуальные браузерные игры часто страдают от низкой конверсии в классические платные подписки. Фрэнк разделил монетизацию на два потока: программная баннерная реклама (Programmatic Ads) для 99% бесплатной аудитории и Pro-подписка через Stripe для хардкорных игроков. В результате programmatic-реклама приносит львиную долю дохода (~$1 200 в день / $35 000 в месяц), а Pro-подписка формирует устойчивый ежемесячный MRR с высокой маржинальностью.
Тайминг: ,
Выгода: Выход на оборот в $40 000 в месяц при минимальной стоимости привлечения пользователей ($0 CAC).
Распределение структуры доходов:
- Программная реклама (Mediavine / Raptive / Google Ad Manager): ~$35 000 в месяц (около $1 200 в сутки) за счет высокой глубины просмотров страниц (5 экранов вопросов на каждого пользователя ежедневно).
- Pro-подписки через Stripe: ~$5 000 в месяц (1 800 активных платящих подписчиков).
Как применить:
- Шаг 1: Оптимизация рекламных мест — Размещайте адаптивные рекламные блоки на страницах между вопросами и непосредственно на финальном экране выдачи результатов рядом с кнопкой «Поделиться».
- Шаг 2: Формирование ценности Pro-тарифа — Внедрите платную подписку за $3–$5 в месяц, включающую:
- Полное отключение рекламы.
- Доступ к неограниченному архиву прошедших ежедневных игр.
- Детальную личную статистику и место в глобальном лидерборде.
- Шаг 3: Масштабирование через спин-оффы (Нишевание) — Клонируйте кодовую базу основного движка под смежные тематики: Geo History, Geo Footy, Geo Pop-Culture, объединяя их под единым брендом (Geo Games) и единой Pro-подпиской.
Результат: Сбалансированная монетизация: мгновенный доход с каждого клика аудитории плюс предсказуемый поток подписочных платежей.
5. Маркетинговая стратегия «Приглашенный ведущий» (Guest Host Hack)
Контекст: Даже при наличии 4 миллионов подписчиков в соцсетях личный постинг автора приносил всего 2 000 переходов в день (около 2% от общего объема). Основной взрывной рост обеспечила стратегия коллабораций в X (Twitter). Фрэнк создал механику «Приглашенного ведущего»: спортивные комментаторы, журналисты и действующие атлеты составляют набор из 5 вопросов на день, после чего лично продвигают этот выпуск среди сотен тысяч своих фанатов.
Тайминг: ,
Выгода: Бесплатный выход на миллионные целевые аудитории инфлюенсеров, получение авторитетных ретвитов и установление персонального нетворкинга с лидерами мнений.
Как применить:
- Шаг 1: Мониторинг вовлеченных лидеров мнений — Отслеживайте пользователей с синей галочкой и крупной аудиторией в X, которые лайкают твиты с результатами игры или сами публикуют свой счет.
- Шаг 2: Отправка DM с предложением стать хостом — Напишите прямое сообщение с персонализированным оффером.
Привет, [Имя]! Заметил, что ты играешь в GeoSports.
Мы запускаем рубрику "Guest Host" для ключевых экспертов спортивного сообщества.
Хочешь стать официальным ведущим завтрашней игры?
От тебя нужно всего 5 классных спортивных вопросов/фактов с локациями.
Мы укажем твой профиль на главном экране игры (аудитория >100k игроков в день) и сделаем анонс в соцсетях.- Шаг 3: Публикация и совместный анонс — Загрузите присланные вопросы в Google Sheets на соответствующую дату. В день релиза выпустите официальный твит с отметкой автора. В 90% случаев приглашенный хост делает ретвит или пишет отдельный пост, привлекая свою преданную аудиторию в игру.
Результат: Постоянный приток свежего трафика без рекламных бюджетов за счет использования чужого социального капитала.
6. Принцип «Оставайся в игре»: Долгосрочная стратегия в эпоху AI-разработки
Контекст: Успех GeoSports кажется мгновенным («$40k/мес за 3 месяца»), однако он стал результатом 14 лет работы в продакшене видео (с 2007 по 2020 год до первых крупных успехов) и 6 лет экспериментов с цифровыми браузерными играми (с 2020 года). Появление современных LLM (Claude, ChatGPT Codex) окончательно стерло барьер между идеей и готовым продуктом. Теперь ключевым конкурентным преимуществом становится не знание синтаксиса, а насмотренность в дистрибуции, терпение и готовность быстро тестировать гипотезы до попадания в Product-Market Fit.
Тайминг: ,
Выгода: Формирование устойчивого майндсета создателя: трансформация неудачных попыток в опыт, который при появлении AI-рычага конвертируется в прибыльный бизнес.
Как применить:
- Шаг 1: Выделение неразрывных рабочих блоков — При работе с LLM выделяйте отрезки минимум по 8 часов непрерывного фокуса, чтобы довести MVP до первого кликабельного состояния без потери контекста промпта.
- Шаг 2: Фокус на понимании дистрибуции — Анализируйте, где именно «живут» пользователи вашей будущей ниши (группы в Telegram, сабреддиты, ветки в X) до написания первой строчки спецификации.
- Шаг 3: Серийный запуск микро-проектов — Если запущенный за выходные проект не получает вирального отклика в течение 2–4 недель, не тратьте месяцы на его доработку: перепакуйте механики под другую аудиторию или собирайте следующий концепт.
Результат: Создание портфолио легких веб-приложений с высоким потенциалом выстреливания в условиях минимальных затрат времени и капитала.
Вайбкодинг веб-игры на $40 000 в месяц: ответы на частые вопросы
В: Нужен ли личный бренд или большая база подписчиков, чтобы повторить успех GeoSports? О: Нет. В видео прямо показано, что 4-миллионная аудитория создателя обеспечивала всего 2% переходов (около 2 000 кликов в день). 98% игроков пришли через сарафанное радио, репосты результатов в личные чаты друзей и твиты приглашенных инфлюенсеров-хостов.
В: Почему была выбрана связка Google Sheets + Vercel, а не полноценная база данных вроде Supabase или PostgreSQL? О: Для нетехнического фаундера Google Таблицы — это готовая, бесплатная и интуитивно понятная CMS. Чтобы обновить вопросы на неделю вперед, не нужно писать админ-панель или лезть в базу данных через SQL-запросы: достаточно просто вбить 5 строк в таблицу.
В: Как браузерная игра выдерживает наплыв в 150 000 игроков за сутки на бесплатном/недорогом хостинге? О: За счет статической генерации страниц на Vercel, кэширования клиентской части и использования MapLibre (карта рендерится на стороне браузера пользователя через WebGL). Единственное динамическое узкое место — сохранение очков — обслуживается сверхбыстрым бессерверным Upstash Redis, рассчитанным на огромный RPS.
В: В чем ключевая ошибка тех, кто пытается создать аналог Wordle или GeoGuessr? О: Создание высокого трения на входе: требование регистрации, скачивание тяжелого мобильного приложения через магазины приложений и переусложненный игровой процесс. Секрет GeoSports — старт игры в один клик прямо из встроенного браузера X/Twitter без логина.
В: С чего начать, если я вообще не умею программировать и никогда не открывал терминал? О: Начните с подробного диалога с Claude (версии Sonnet или Opus). Опишите концепцию вашей идеи простыми словами, укажите референс существующего приложения и попросите составить пошаговый план действий «для человека без технического опыта». При любых ошибках на экране делайте скриншот и отправляйте его в чат с вопросом «Что здесь нажать?».
Вайбкодинг веб-игры на $40 000 в месяц: инструменты и ссылки из видео
- Geo Games / GeoSports — Сеть браузерных географических викторин (GeoSports, Geo History, Geo Footy), упомянутая автором — упомянут в видео.
- MapTap — Оригинальная браузерная игра-референс, вдохновившая автора на создание спортивной версии — упомянут в видео.
- Claude (Anthropic) — Основная LLM, использованная для написания спецификации, кода и устранения ошибок —
https://claude.ai - Vercel — Облачная платформа для мгновенного бессерверного деплоя веб-приложений и регистрации доменов —
https://vercel.com - MapLibre GL JS — Open-source библиотека с открытым кодом для рендеринга интерактивных карт и 3D-глобусов —
https://maplibre.org - Upstash Redis — Serverless Redis для хранения результатов игроков, лидербордов и статистики —
https://upstash.com - Google Sheets API — Использование таблиц Google в качестве легковесной базы данных для ежедневных вопросов — упомянут в видео.
- Stripe — Платежная инфраструктура для обработки Pro-подписок —
https://stripe.com - Starter Story — Платформа с базой данных из тысяч реальных бизнес-кейсов и идей —
https://starterstory.com
Конспект создан на основе видео «He Makes $40,000/Month With a Dead Simple Website (Built In a Weekend)» канала Starter Story. Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=s9aLA4IOSZE