NEYRO COMMUNITY представляет

VIBE HACK Создай игру и приложение за 3 часа

10 марта 2026 Онлайн-хакатон по вайб-кодингу
🎮 Сегодня вы создадите браузерную игру и полезное приложение — даже если никогда не писали код
🤖 Вайб-кодинг — это когда вы описываете словами что хотите, а AI создаёт это за вас

Расписание дня

0:00 – 1:00

Вводная часть и воркшоп

Приветствие от ведущих Андрея, Александра и Марины. Объяснение формата, живая демонстрация, советы по промптам, распределение ролей. Общий зал Zoom.

1:00 – 2:35

Хакатон

Команды по 5 человек в breakout rooms. 90 минут на игру, приложение и презентацию.

2:35 – 3:15

Презентации

Каждая команда за 2–3 минуты показывает приложение жюри.

3:15 – 3:30

Результаты и призы

Объявление победителей.

3:30 – 4:10

Закрытие

Презентация факультета Автоматизаторов и Вайбкодеров (по желанию).

Что нужно создать

🎮

Браузерная игра

Классика с изюминкой или своя идея. Открывается в браузере, можно играть.

Зачёт / Незачёт — допуск к оценке приложения.

📱

Полезное приложение

Основной продукт для жюри. Решает реальную задачу.

Трекер привычек, калькулятор бюджета, планировщик, дневник питания — любое полезное приложение.

🎤

Презентация

Питч на 2–3 минуты. Покажите приложение жюри.

Структура — в разделе ниже.

Роли в команде

«Секрет успеха — не один герой, а параллельная работа»

🎮

Игродел

Создаёт игру. Идея → промпт → сборка в Разработчике ИИ → тест. Тратит свои 1 000 кредитов.

📐

Архитектор

Продумывает приложение, составляет ТЗ в AI Чате. Передаёт готовый промпт Сборщику.

🔧

Сборщик

Берёт ТЗ от Архитектора, собирает приложение в Разработчике ИИ.

🔍

Тестировщик

Проверяет игру и приложение. Кнопки, экраны, баги. Помогает формулировать фиксы.

🎤

Презентатор

Готовит питч. Проблема → решение → демо → польза. Может создать лендинг в Genspark.

Это рекомендация. Главное — работайте параллельно.

Экономика кредитов

1 000 на участника  •  5 000 на команду

Игра
~1 000
ТЗ
~500
Сборка
~2 000–2 500
Презент.
~500
Резерв
~500

Каждый работает со своего аккаунта. Договоритесь заранее, кто что берёт.

Шаг 0: Регистрация в Genspark

Сделайте до начала хакатона. 2–3 минуты.

1

Откройте ссылку-приглашение

Открыть Genspark →
2

Войдите через Google или Microsoft

3

Вы получите 1 000 кредитов + 100 ежедневных

4

Убедитесь, что видите: AI Чат, Разработчик ИИ

⚠️ Не получилось? Техпомощник поможет в начале мероприятия.

Два инструмента

💬

AI Чат

Чат с AI. Обсуждаете идею, составляете ТЗ. Пишете обычным языком — AI отвечает, уточняет, предлагает.

⚙️

Разработчик ИИ

Конструктор. Вставляете промпт → «Начать сборку» → AI собирает рабочий продукт по ссылке.

AI Чат
Разработчик ИИ
Проверка
Доработка
💡 В Разработчике ИИ выбирайте «Простой веб-сайт или веб-приложение»

Два принципа вайб-кодинга

Планирование

Принцип 1: План важнее промпта

Сначала план — потом сборка. Откройте AI Чат:

Я хочу создать [название идеи]. Прежде чем писать код, помоги мне составить спецификацию: цель приложения, 5 главных функций и пошаговый порядок реализации.
Уточнение

Принцип 2: Режим диалога

Общайтесь с AI. Пусть задаёт вопросы:

Проанализируй мою идею. Задай мне 3–5 уточняющих вопросов, чтобы лучше понять задачу, прежде чем приступать к написанию кода.

5 правил хорошего промпта

🎯

Будьте конкретны

Не «сделай игру», а какую: механика, управление, стиль.

🖼️

Описывайте результат

Не «создай файл», а как выглядит и что делает.

📌

Один промпт = одна задача

Игра отдельно, приложение отдельно.

🎨

Указывайте стиль

Тёмная/светлая, цвета, настроение.

🔄

Итерируйте

Собрали → проверили → уточнили → улучшили. 3–5 итераций — норма.

⚠️ Ошибки новичков:
  • «Сделай крутую игру» — AI не знает что «крутое»
  • Стена текста без структуры
  • Пропущены детали (кнопки, очки, навигация)
  • Слишком сложный продукт за 90 минут

Создание игры: пошагово

🎮 Для Игродела
01

Придумайте идею

Откройте AI Чат:

Я хочу создать простую браузерную игру. Прежде чем писать код, помоги составить спецификацию.

Игра должна быть:
— простой (один экран, понятная механика)
— увлекательной
— с подсчётом очков и кнопкой «Играть снова»
— с управлением с клавиатуры и мобильного

Предложи 5 идей с названием и механикой.
02

Уточните через диалог

Я выбираю: [название игры].
Задай мне 3–5 уточняющих вопросов прежде чем составлять промпт для сборки.
03

Получите промпт

Составь подробный промпт для Разработчика ИИ:
— Название, описание
— Механика: управление, очки, конец игры
— Экраны: стартовый, игровой, проигрыш
— Лучший результат в localStorage
— Визуальный стиль
— Адаптивный дизайн, язык русский
Оформи как единый текст для копирования.
04

Соберите

  1. Откройте Разработчик ИИ
  2. «Простой веб-сайт или веб-приложение»
  3. Вставьте промпт → «Начать сборку»
  4. Ждите 1–5 минут
05

Проверьте

  • ✓ Старт работает?
  • ✓ Управление — клавиатура + мобильное?
  • ✓ Очки считаются?
  • ✓ Конец игры работает?
  • ✓ «Играть снова» — сброс и перезапуск?
  • ✓ Лучший результат сохраняется?
06

Исправьте

Примеры:

Кнопка «Старт» не реагирует. При нажатии должна запускаться игра. Исправь.
На мобильном нет управления. Добавь виртуальные кнопки внизу экрана.
07

Получите ссылку

  1. «Поделиться» в Разработчике ИИ
  2. «Любой пользователь, у которого есть ссылка»
  3. «Копировать ссылку» → «Готово»
  4. Вставьте в таблицу
Таблица результатов →

Создание приложения: пошагово

📐🔧 Для Архитектора + Сборщика
01

Придумайте идею

Я хочу создать простое полезное веб-приложение.
Прежде чем писать код, помоги составить спецификацию.

Приложение должно:
— решать конкретную проблему
— быть простым (3–5 экранов)
— быть понятным без инструкции
— красиво выглядеть

Темы: [впишите свои — продуктивность, финансы, здоровье, привычки, обучение, планирование]

Предложи 5 идей: название, проблема, функции (3–5).
02

Уточните

Я выбираю: [название приложения].
Задай 3–5 уточняющих вопросов прежде чем составлять ТЗ.
03

Составьте ТЗ

Составь ТЗ как промпт для Разработчика ИИ:
1. Описание — 2–3 предложения
2. Экраны: название, элементы, действия, кнопки
3. Навигация между экранами
4. Данные в localStorage
5. Визуальный стиль: тема, цвета
Адаптивный дизайн, язык русский.
Единый текст для копирования.
04

Соберите

  1. Разработчик ИИ
  2. «Простой веб-сайт или веб-приложение»
  3. Вставьте промпт → «Начать сборку»
  4. Ждите 1–5 минут
05

Проверьте

  • ✓ Все экраны на месте?
  • ✓ Навигация работает?
  • ✓ Кнопки реагируют?
  • ✓ Данные сохраняются после перезагрузки?
  • ✓ На мобильном всё корректно?
06

Исправьте

Примеры:

Экран «Статистика» пустой. Должна быть диаграмма расходов и список категорий. Исправь.
Данные пропадают после перезагрузки. Сохраняй всё в localStorage.
Выглядит скучно. Добавь градиентный фон, скруглённые карточки с тенью, анимацию кнопок. Логику не трогай.
⚠️ После исправления проверяйте ВСЁ заново — AI иногда ломает работавшее.
Если сломал — напишите:
«После исправления сломалась навигация. Верни её и сохрани последние правки.»
07

Получите ссылку

  1. «Поделиться»
  2. «Любой пользователь, у которого есть ссылка»
  3. «Копировать ссылку» → «Готово»
  4. Вставьте в таблицу
Таблица результатов →

Промпты для игры: полный цикл

Используйте по порядку. Каждый промпт — отдельный шаг в AI Чате или Разработчике ИИ.

1
AI Чат

Генерация идей

Запустите мозговой штурм — AI предложит 5 вариантов игры.

Я хочу создать простую браузерную игру. Прежде чем писать код, помоги составить спецификацию.

Игра должна быть:
— простой (один основной экран, понятная механика)
— увлекательной (чтобы хотелось играть снова)
— с подсчётом очков
— с кнопкой «Играть снова»
— с управлением и с клавиатуры, и касаниями на мобильном

Предложи 5 идей. Для каждой напиши название и механику в 2–3 предложениях.
2
AI Чат

Уточнение через диалог

Выбрали идею — попросите AI задать уточняющие вопросы. Отвечайте на них.

Я выбираю идею: [название или описание игры].

Проанализируй мою идею. Задай мне 3–5 уточняющих вопросов, чтобы лучше понять задачу, прежде чем составлять промпт для сборки.
3
AI Чат

Получить промпт для сборки

После ответов на вопросы — попросите готовый промпт для Разработчика ИИ.

Теперь составь подробный промпт для Разработчика ИИ, чтобы собрать эту игру. В промпте должно быть:

— Название игры
— Описание в 1–2 предложениях
— Механика: как играть, как управлять, как начисляются очки, когда игра заканчивается
— Экраны: стартовый, игровой, экран проигрыша (что на каждом, какие кнопки, что показывается)
— Сохранение лучшего результата в localStorage
— Визуальный стиль: цвета, фон, как выглядят объекты
— Адаптивный дизайн под мобильные устройства
— Язык интерфейса — русский

Оформи как единый текст, который я скопирую и вставлю в Разработчик ИИ.
4
Браузер

Проверка игры — чеклист

После сборки откройте игру и пройдите по каждому пункту.

  • Стартовый экран отображается? Название видно? Кнопка «Старт» есть?
  • Нажали «Старт» — игра запускается?
  • Управление работает? (стрелки на клавиатуре, касания на мобильном)
  • Очки считаются в процессе игры?
  • Игра заканчивается в нужный момент?
  • Экран проигрыша показывается? Счёт виден?
  • Кнопка «Играть снова» — сбрасывает и перезапускает?
  • Лучший результат сохраняется после перезагрузки?
  • На мобильном всё отображается и играбельно?
5
Разработчик ИИ

Итерации — улучшение

Игра работает, но хотите сделать лучше — используйте эти промпты.

Игра работает. Улучши визуальную часть:
— добавь плавную анимацию появления объектов
— добавь звуковой эффект при столкновении (короткий писк через Web Audio API)
— добавь вибрацию на мобильном при проигрыше (navigator.vibrate)
— сделай анимацию взрыва при проигрыше (частицы разлетаются)
Логику и механику не трогай.
Добавь в игру систему уровней сложности:
— каждые 30 секунд скорость объектов увеличивается на 15%
— на экране показывай текущий уровень (Уровень 1, 2, 3...)
— при переходе на новый уровень — короткая вспышка «Уровень 2!» посередине экрана
Остальное не трогай.
Сделай экран проигрыша более эффектным:
— крупный заголовок «КОНЕЦ ИГРЫ» с анимацией появления
— показывай счёт и лучший результат с анимацией счётчика (число нарастает)
— если побит рекорд — показывай «🏆 Новый рекорд!» золотым цветом
— кнопка «Играть снова» пульсирует, привлекая внимание
Логику не трогай.
6
Разработчик ИИ

Исправление багов

Что-то сломалось — используйте конкретные промпты. Одна проблема = один промпт.

Кнопка «Старт» на стартовом экране не реагирует на нажатие. При нажатии должна запускаться игра. Исправь.
Управление стрелками на клавиатуре работает, но на мобильном нет кнопок управления. Добавь виртуальные кнопки влево и вправо внизу экрана для мобильных устройств.
Очки не считаются — счётчик остаётся на нуле всю игру. Очки должны прибавляться по 1 за каждую секунду выживания. Исправь.
При нажатии «Играть снова» очки не сбрасываются до нуля. Нужно полностью перезапускать игру: очки на 0, все объекты в начальные позиции, игра запускается заново.
Лучший результат не сохраняется — после перезагрузки страницы показывается 0. Нужно сохранять рекорд в localStorage и загружать при старте. Исправь.
⚠️ После каждого исправления проверяйте не только то, что чинили, но и всё остальное. AI иногда, исправляя одно, ломает другое. Если это произошло:
После последнего исправления сломалось [что сломалось]. Раньше работало. Верни как было и сохрани последние исправления.
7
Браузер

Финальная проверка перед сдачей

Откройте ссылку в новом окне браузера (как новый пользователь) и пройдите полный цикл.

  • Открыл ссылку в новом окне — всё загрузилось?
  • Полный цикл: Старт → игра → проигрыш → «Играть снова» → ещё раз
  • Открыл на телефоне — играбельно?
  • Перезагрузил страницу — рекорд сохранился?
  • Скопировал ссылку и открыл заново — работает без логина?
Внести ссылку в таблицу →

Промпты для приложения: полный цикл

Используйте по порядку. Каждый промпт — отдельный шаг в AI Чате или Разработчике ИИ.

1
AI Чат

Генерация идей

Попросите AI предложить 5 идей под ваши интересы.

Я хочу создать простое полезное веб-приложение. Прежде чем писать код, помоги мне составить спецификацию.

Приложение должно:
— решать конкретную повседневную проблему
— быть простым (3–5 экранов максимум)
— быть понятным без инструкции
— красиво выглядеть

Мне интересны темы: [напишите свои — продуктивность, финансы, здоровье, привычки, обучение, планирование, спорт, кулинария]

Предложи 5 идей. Для каждой напиши: название, какую проблему решает, основные функции (3–5 штук).
2
AI Чат

Уточнение через диалог

Выбрали идею — пусть AI задаст уточняющие вопросы. Отвечайте подробно.

Я выбираю идею: [название и суть приложения].

Проанализируй мою идею. Задай мне 3–5 уточняющих вопросов, чтобы лучше понять задачу, прежде чем составлять техническое задание.
3
AI Чат

Составить ТЗ — промпт для сборки

После ответов на вопросы — попросите полное ТЗ в виде промпта.

Теперь составь подробное техническое задание и оформи его как готовый промпт для Разработчика ИИ. Включи:

1. Что делает приложение — 2–3 предложения.

2. Все экраны. Для каждого экрана:
   — название
   — что на нём находится (кнопки, поля ввода, списки, графики, карточки)
   — что может делать пользователь
   — что происходит при нажатии каждой кнопки

3. Навигация — как переключаться между экранами (нижняя панель с вкладками).

4. Хранение данных — что сохраняется в localStorage.

5. Визуальный стиль — тема (светлая/тёмная), цвета, форма элементов, настроение дизайна.

В конце обязательно добавь:
— адаптивный дизайн под мобильные устройства
— язык интерфейса — русский

Оформи как единый текст, который я скопирую и вставлю в Разработчик ИИ.

Хотите изменить что-то в ТЗ — скажите прямо в чате, например:

Добавь на главный экран виджет с мотивационной цитатой на сегодня.
Измени цветовую схему на тёмную тему с фиолетовыми акцентами.
Убери экран регистрации — приложение работает без логина, все данные хранятся локально.
4
Браузер

Проверка приложения — чеклист

После сборки откройте приложение и пройдите по каждому пункту.

  • Все экраны на месте? Их столько, сколько описано в ТЗ?
  • Навигация работает? Можно переключаться между вкладками?
  • На каждом экране есть все описанные элементы?
  • Кнопки реагируют на нажатия?
  • Можно ввести данные и сохранить их?
  • После перезагрузки страницы данные не исчезают?
  • На мобильном всё отображается корректно?
  • Текст читаемый? Элементы не налезают друг на друга?
  • Дизайн соответствует тому, что описывали?
5
Разработчик ИИ

Итерации — улучшение

Приложение работает — хотите сделать его лучше? Используйте эти промпты.

Приложение работает. Улучши визуальную часть:
— добавь плавные анимации при переключении между экранами
— анимацию появления карточек (fade in снизу вверх)
— микро-анимацию при нажатии кнопок (лёгкое уменьшение и возврат)
— приятный favicon (иконка вкладки в браузере), подходящий по тематике
Логику и данные не трогай.
Добавь пустые состояния (empty states):
— если список пустой, вместо пустого экрана показывай дружелюбное сообщение с эмодзи и подсказкой «Нажмите + чтобы добавить первый элемент»
— сделай для каждого пустого экрана своё сообщение, соответствующее контексту
Остальное не трогай.
Добавь возможность удалять записи:
— на каждой карточке в правом верхнем углу — кнопка-крестик (×)
— при нажатии — модальное окно «Удалить?» с кнопками «Да» и «Отмена»
— при подтверждении — запись удаляется из списка и из localStorage
— плавная анимация исчезновения карточки
Остальные функции не трогай.
6
Разработчик ИИ

Исправление багов

Что-то не работает — пишите конкретно. Одна проблема = один промпт.

Экран «[название экрана]» не отображается. При нажатии на вкладку — пустая страница. На этом экране должно быть: [опишите содержимое]. Исправь.
Данные пропадают после перезагрузки страницы — список становится пустым. Сделай так, чтобы все данные сохранялись в localStorage и восстанавливались при открытии страницы.
Кнопка «[название кнопки]» не реагирует на нажатие. При нажатии должно происходить: [опишите что должно случиться]. Исправь.
На мобильном телефоне карточки слишком широкие — текст выходит за край экрана, появляется горизонтальная прокрутка. Сделай карточки 100% ширины экрана с отступами 16px с каждой стороны. Длинный текст переносить на следующую строку.
Приложение работает, но выглядит скучно. Улучши внешний вид:
— фон градиентный от [цвет 1] к [цвет 2]
— карточки со скруглением 16px и лёгкой тенью
— кнопки с плавной анимацией при нажатии
— иконки-эмодзи рядом с названиями разделов
Логику и данные не трогай.
⚠️ После каждого исправления проверяйте всё заново — не только то, что чинили. Если AI сломал что-то работавшее:
После последнего исправления сломалось [что сломалось — например, навигация]. Раньше это работало. Верни как было и сохрани последние исправления.
7
Браузер

Финальная проверка перед сдачей

Откройте ссылку в новом окне браузера (как новый пользователь) и пройдите полный сценарий.

  • Открыл ссылку в новом окне — всё загрузилось без ошибок?
  • Прошёл основной сценарий: создал запись → увидел в списке → переключил экран → вернулся
  • Перезагрузил страницу — данные сохранились?
  • Открыл на телефоне — всё читаемо и нажимаемо?
  • Нет горизонтальной прокрутки на мобильном?
  • Скопировал ссылку и открыл заново — работает без логина?
Внести ссылку в таблицу →

Готовые промпты: игры

Скопируйте в Разработчик ИИ как есть или адаптируйте.

🚀 «Звёздный пилот» — космическая аркада

Создай браузерную аркадную игру «Звёздный пилот».

Описание: корабль уворачивается от астероидов. Чем дольше — тем больше очков.

Механика:
— Корабль внизу, двигается влево-вправо
— Сверху падают астероиды разного размера
— Клавиатура: стрелки. Мобильное: касание левой/правой половины экрана
— +1 очко за секунду. Каждые 30 сек — быстрее
— Столкновение — конец

Экраны:
— Старт: название, рекорд, кнопка «Старт»
— Игра: корабль, астероиды, счёт
— Проигрыш: счёт, рекорд, «Играть снова»

Рекорд в localStorage.

Стиль: тёмный космос, звёзды двигаются вниз. Корабль — треугольник с свечением. Астероиды — серые круги.

Адаптивный. Русский.

🧠 «Битва эрудитов» — викторина

Создай браузерную викторину «Битва эрудитов».

Описание: 20 вопросов, 15 секунд на каждый. Быстрее ответ — больше очков.

Механика:
— 20 вопросов (наука, история, география, поп-культура, технологии) — придумай интересные
— 4 варианта, один правильный
— 15 секунд (таймер-полоска)
— Правильно: 100 + бонус за скорость (до +50)
— Неправильно: 0, правильный ответ на 2 секунды

Экраны:
— Старт: название, рекорд, «Начать»
— Вопрос: номер, текст, 4 кнопки, таймер
— Результат: счёт, верных/неверных, «Снова»

Рекорд в localStorage.

Стиль: градиент фиолетовый→синий. Крупный шрифт. Верно — зелёный. Неверно — красный. Конфетти.

Адаптивный. Русский.

Готовые промпты: приложения

✅ «Трекер привычек»

Создай веб-приложение «Трекер привычек».

Описание: создаёшь привычки, отмечаешь каждый день. Серия дней (streak) и прогресс за месяц.

Экраны:

— «Сегодня»:
  Дата, прогресс-бар. Карточки привычек: название, эмодзи, чекбокс, streak. Выполненная — зелёная.

— «Добавить»:
  Название. Эмодзи (15 вариантов). Частота: ежедневно / будни / выходные. «Сохранить».

— «Статистика»:
  Календарь (зелёный/жёлтый/серый). Список с серией и процентом.

Навигация внизу. localStorage.

Стиль: светлый, скруглённые карточки, пастельные цвета.

Адаптивный. Русский.

💰 «Мой бюджет»

Создай веб-приложение «Мой бюджет».

Описание: доходы и расходы по категориям, баланс и аналитика.

Экраны:

— «Главная»:
  Баланс. Карточки «Доходы» (зелёная) и «Расходы» (красная). Последние 10 транзакций.

— «Добавить»:
  Доход/расход. Сумма. Описание. Категории расходов: продукты, транспорт, развлечения, здоровье, одежда, подписки, кафе, прочее. Доходов: зарплата, подработка, подарки, прочее. Дата. «Сохранить».

— «Аналитика»:
  Круговая диаграмма. Список категорий. Период: неделя/месяц.

Навигация внизу. localStorage.

Стиль: тёмный (#1a1a2e). Зелёный #00d48a, красный #ff6b6b. Минимализм.

Адаптивный. Русский.

Как подготовить презентацию

🎤 Для Презентатора
20–30 сек
1. Проблема
Знакомая ситуация
15–20 сек
2. Решение
Что и для кого
60–90 сек
3. Демо
ПОКАЗЫВАЙТЕ на экране
15–20 сек
4. Польза
Один аргумент
5–10 сек
5. Финал
Короткая фраза
Помоги подготовить презентацию для хакатона. 2–3 минуты.

Приложение: [название].
Что делает: [коротко].
Функции: [3–5].
Для кого: [аудитория].

Текст выступления:
1. Проблема (20–30 сек) — знакомая ситуация
2. Решение (15–20 сек)
3. Демо (60–90 сек) — пошагово: что открываю, куда нажимаю, что показываю
4. Польза (15–20 сек) — один аргумент
5. Финал (5–10 сек)

До 3 минут. Уверенный тон. Русский.
💡 60% времени — демо на экране
💡 Прорепетируйте с таймером
💡 Не извиняйтесь за недоделки
💡 Говорите про пользу, не про код
💡 Лучше вовремя закончить

Система оценки

🎮

Игра

Зачёт / Незачёт

Работает по ссылке — допуск. Нет — не оценивается.

📱

Приложение

0–10 баллов

Работоспособность (0–5) + Удобство и полезность (0–5).

🎤

Презентация

0–5 баллов

Понятность, убедительность, подача.

Итого: до 15 баллов

90 минут хакатона

0–10 мин
Знакомство, идеи, роли
10–45 мин
Параллельная работа
⚡ 45 мин
ЧЕКПОИНТ
45–80 мин
Доработка, тест, презентация
⚠️ 80 мин
10 минут! Ссылки в таблицу!
🏁 90 мин
Финиш
🏆 Рабочий MVP лучше недоделанного идеала.
Сдавайте то, что работает!