Памятка по вайбкодингу

От правильного ТЗ до рабочего кода без боли и галлюцинаций.

1

Начинаем не с промпта, а с ТЗ

ИИ отлично пишет код, но плохо читает мысли. Чем полнее вы опишете задачу на старте, тем меньше галлюцинаций и бесконечных правок получите.

Как правильно: Опишите нейросети суть проекта, кто целевая аудитория и как продукт должен работать в целом. Нарисуйте логику прежде, чем открывать чат с нейросетью, набросайте схему. Как ученик переходит от экрана к экрану? Какие переменные мы считаем (баллы, шкала стресса героя)?

2

Выбор формата сборки проекта

На старте нужно решить, как ИИ должен отдавать вам готовый код.

Вариант А: «Все-в-одном» (Один HTML-файл)

У вас есть один файл index.html. И структура, и CSS (внутри <style>), и скрипты (внутри <script>) лежат в нём. Картинки подтягиваются по ссылкам из интернета.

  • Плюсы: Идеально для Тильды. Берешь весь код, вставляешь в блок T123 (или через настройки страницы), и всё работает. Легко обернуть в SCORM.
  • Для чего: Небольшие лонгриды, мини-игры, тесты.
Вариант Б: «Взрослый проект» (Папочная структура)

У вас есть папка проекта. В ней index.html, отдельная папка css (со стилями), папка js (с логикой), папка assets (с картинками).

  • Особенности: Просто скопировать в Тильду уже не выйдет. Нужно заливать проект на хостинг (например, GitHub Pages), а в Тильду вставлять через <iframe>. Легко собирается в SCORM.
  • Для чего: Большие курсы, сложные игровые лонгриды с кучей механик.
3

Фронтенд и Бэкенд

Большинство образовательных проектов (сценарии, квесты с Drag&Drop) можно сделать чисто на фронтенде. Ученик прошел тренажер, JS посчитал баллы, а дальше SCORM-пакет передал финальный балл в LMS.

Но если вы хотите внедрить мощную социальную геймификацию (например показать: «75% коллег приняли такое же решение» или общий лидерборд) — чистый фронтенд не справится. Для этого нужен Бэкенд.

Как это сделать с ИИ?

  • Supabase Вы создаете таблицу в облаке (похожую на Excel), а ИИ пишет небольшой скрипт для отправки выбора ученика в базу и забора общей статистики.
  • localStorage Если нужна только пауза/сохранение прогресса конкретного ученика. Просто добавьте в промпт: "Используй localStorage для сохранения прогресса". ИИ напишет код, и ученик сможет продолжить тренажер на следующий день с того же места. Никаких баз данных!
4

Где именно вайбкодить? Инструменты под задачу

Выбирайте инструмент, который подходит под ваши задачи прямо сейчас:

  • Генераторы веб-приложений: Отличный вариант, чтобы собрать прототип, посмотреть идею вживую и поискать вдохновение (они сразу делают красивый UI).
  • Диалоговые модели: Рабочая история для разработки лонгридов и курсов с ветвящимся сюжетом. Общаетесь в чате, нужный код копируете и вставляете в свои файлы.
  • AI-Редакторы кода: Полноценная среда разработки (IDE) со встроенным ИИ для сложных многофайловых проектов.
Название Категория Платно / Бесплатно Нужен ВПН?
Cursor AI-Редактор кода Беспл. (лимит) / $20/мес Не нужен
Bolt Генератор UI Беспл. (лимит) / от $25/мес Не нужен
Lovable Генератор UI Беспл. (лимит) / Платно Нужен
DeepSeek Диалоговая модель Бесплатно Не нужен
Qwen Диалоговая модель Бесплатно Не нужен
GigaChat Диалоговая модель Бесплатно Не нужен
Claude Диалоговая модель Беспл. / 15 евро/мес Нужен
ChatGPT Диалоговая модель Беспл. / $20/мес Нужен
Gemini Диалоговая модель Беспл. (Flash) / Платно Нужен
5

Работаем послойными итерациями

Худший промпт: "Сделай симулятор на 10 вопросов, с таймером, анимациями и базой данных". ИИ попытается сделать всё сразу и сломается.

Правильный алгоритм:

  • Сначала — голая логика. Каркас без дизайна. Кнопки нажимаются? Баллы считаются? Идем дальше.
  • Затем — контент. Наполняем реальными текстами.
  • В конце — визуал. Натягиваем CSS и адаптивность. Лайфхак: всегда просите ИИ сделать верстку «резиновой», чтобы тренажер хорошо смотрелся на ПК и телефоне.
Техника безопасности

Как не дать ИИ всё сломать

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

Чек-лист перед стартом проекта
0 / 5 выполнено