Создадим полноценную игру для Telegram, которая будет работать как веб-приложение прямо в мессенджере. Никакого программирования — только ИИ Claude и несколько простых действий.
Результат: рабочая игра-кликер с предсказаниями судьбы, размещенная в Telegram боте. Посмотреть готовый пример можно тут.
Что понадобится:
- Подписка на Claude
- Аккаунт GitHub
- Telegram на телефоне или в браузере
- 30 минут свободного времени
Процесс состоит из 4 шагов: генерируем код игры в Claude → тестируем в браузере → размещаем на GitHub Pages → подключаем к Telegram через BotFather.
!!! Больше кейсов на канале “AI для продакта”.
Шаг 1: Генерируем код игры в Claude
Заходим в Claude и отправляем готовый промпт. Пример нашего промпта:
Создай веб-игру для Telegram Web App с следующими характеристиками:
Брендинг: В шапке игры добавить текст "Кейс от канала 'AI для продакта'". Кнопка "Подписаться на канал" со ссылкой https://t.me/aiforproduct
Telegram интеграция: Адаптивный дизайн для мобильных устройств. Поддержка темной/светлой темы Telegram. Кнопка "Поделиться результатом" в конце игры. Оптимизация для сенсорных экранов. Основная механика: Продолжительность игры: 30 секунд. Цель: набрать максимальное количество очков. Элементы (круги, звезды, сердечки) появляются случайно на экране. Исчезают через 1-1.5 секунды без клика. Скорость появления увеличивается: 1 элемент/сек → 3-4 элемента/сек к концу. Система очков: Обычные элементы: 10 очков. Специальные "золотые": 50 очков + предсказание. 2-3 золотых элемента за игру. Предсказания (юмор + позитив): "Сегодня ты точно не забудешь покормить кота". "Твоя харизма зашкаливает (почти)". Интерфейс: Таймер, счетчик очков. Финальный экран с результатом. Кнопка "Играть снова" и "Поделиться". Мобильный дизайн, плавные анимации.
Claude сгенерирует полный HTML-код игры. Обычно это занимает пару минут.
Шаг 2: Тестирование игры в браузере
Когда Claude выдал код — сразу тестируем игру в артефакте. Проверяем:
- Запускается ли игра по нажатию "Начать игру"
- Идет ли обратный отсчет (30 секунд)
- Кликаются ли элементы и засчитываются очки
- Появляются ли золотые элементы с предсказаниями
- Работает ли финальный экран с результатом
Типичные проблемы и как их исправить:
Элементы слишком мелкие → "Сделай элементы крупнее для мобильных"
Игра тормозит → "Оптимизируй производительность"
Неудобно кликать → "Увеличь область клика для элементов"
Мало предсказаний → "Добавь больше смешных предсказаний"
Важно: На этом этапе проще всего вносить правки. Claude моментально исправляет код, и вы видите результат.
Когда игра работает без нареканий — копируем весь HTML-код из артефакта. Он понадобится для следующего шага.
Шаг 3: Размещаем игру на GitHub Pages
Теперь нужно разместить игру в интернете. GitHub Pages — бесплатный хостинг, идеальный для наших целей.
3.1. Создаем репозиторий
Идем на github.com и регистрируемся (если нет аккаунта).
Нажимаем зеленую кнопку "New" → "Repository":
- Repository name: telegram-game-clicker (или любое другое)
- Description: "Игра-кликер для Telegram"
- ✅ Ставим галочку "Add a README file"
- Нажимаем "Create repository"
3.2. Загружаем код игры
В созданном репозитории:
- Нажимаем "Add file" → "Create new file"
- В поле "Name your file" пишем: index.html
- Вставляем скопированный из Claude код
- Внизу пишем "Add game code" и нажимаем "Commit changes"
3.3. Настраиваем GitHub Pages
Теперь делаем игру доступной по ссылке:
- В репозитории переходим в "Settings" (вкладка справа)
- В левом меню находим "Pages"
- В разделе "Source" выбираем "Deploy from a branch"
- Branch: выбираем "main"
- Folder: оставляем "/ (root)"
- Нажимаем "Save"
!!! Через 2-3 минуты обновляем страницу. Появится зеленая галочка и ссылка вида: https://ваш-username.github.io/telegram-game-clicker/
Проверяем игру: переходим по ссылке и тестируем на телефоне. Должно работать точно так же, как в Claude.
Шаг 4: Подключаем к Telegram через BotFather
Финальный шаг — интеграция с Telegram.
4.1. Создаем бота
Открываем Telegram и ищем @BotFather. Отправляем команды:
/start
/newbot
BotFather попросит:
- Имя бота: "Кликер Судьбы" (как угодно)
- Username бота: должен заканчиваться на "bot", например: destiny_clicker_bot
Сохраняем полученный токен — он может пригодиться.
4.2. Создаем Web App
Отправляем BotFather:
/newapp
Выбираем созданного бота из списка.
BotFather попросит:
- Web App URL: вставляем ссылку с GitHub Pages
- Short name: например, clicker_game (только буквы, цифры, подчеркивания)
- Title: "Кликер Судьбы"
- Description: "Игра на реакцию с предсказаниями"
- Photo: можно пропустить или загрузить любую картинку 640×360
Готово! BotFather выдаст ссылку вида: https://t.me/ваш_бот/clicker_game
!!! Больше кейсов на канале “AI для продакта”.