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

Ключевые слова: вайб-кодинг, нейросети, промпт, промптинг, интерактивные материалы, цифровые образовательные ресурсы. 

This article explores the potential of using vibe coding to help teachers develop their own interactive educational materials. The author describes the stages of working with neural networks, the requirements for creating an effective prompt, and provides a practical example of creating a standalone HTML quiz for elementary school students.

Keywords: vibe coding, neural networks, prompt, prompting, interactive materials, digital educational resources.

Цифровые инструменты стали неотъемлемой частью современного образовательного процесса. С их помощью учитель может эффектно представить новый материал, закрепить его, проверить знания учащихся, наладить дистанционное взаимодействие с классом и получить обратную связь от каждого ученика. Для этого существует множество онлайн-платформ и сервисов, предлагающих готовые интерактивные шаблоны: задания на сопоставление, классификацию, викторины, тесты, квесты, пазлы и другие. Их главные преимущества — простота использования, автоматическая проверка результата и статистика для педагога, а для учеников — интерактивность, мультимедийность, геймификация и мгновенное получение обратной связи.

Однако долгое время большинство таких сервисов были зарубежными, что создавало определенные риски: педагоги могли потерять доступ к своим материалам из-за блокировок платформ. За последние несколько лет появление российских аналогов частично решило проблему, но сохранились и другие ограничения: зависимость от интернета и от работы сервера, условий бесплатных тарифов, шаблонность заданий и риск прекращения работы самого сервиса.

С развитием искусственного интеллекта у педагогов появилась принципиально новая возможность – создавать уникальные образовательные ресурсы самостоятельно без навыков программирования с помощью нейросетей. В 2025 году учёный в области машинного обучения Андрей Карпатый ввел новое понятие «вайб-кодинг» (англ. vibe coding, от vibe — «ощущение, атмосфера» и coding – «программирование»). Вайб-кодингом он назвал такой метод программирования, при котором пользователь описывает задачу на естественном языке, а нейросеть генерирует готовый программный код [3; 5]. Такой подход для педагога позволяет получить свободу от шаблонов, сохранить полный контроль над учебными материалами, избежать зависимости от условий сторонних сервисов и обеспечить стабильный доступ к ресурсам как для педагога, так и для учащихся [1].

Работа с нейросетью по созданию интерактивных материалов включает несколько этапов. Во-первых, необходимо подготовить или сгенерировать учебный материал (текст, задания, вопросы). Во-вторых, составить промпт – детальный текстовый запрос для нейросети, в котором описать идею игры. В-третьих, выбрать нейросеть, способную с высокой точностью «понимать» задачу пользователя и создавать рабочий HTML-код. В-четвертых, проверить результат и при необходимости уточнить запрос, внося правки. Корректировки в существующий код можно вносить до тех пор, пока не будет достигнут желаемый результат. Такой диалог с нейросетью называют промптингом.

В итоге педагог получает автономный HTML-файл – готовую игру или тренажёр, который можно открыть на любом устройстве и в любом браузере без интернета, отправить ученикам через мессенджер или опубликовать в сети для общего доступа по ссылке.

На рисунке 1 представлены примеры интерактивных материалов для начальной школы (интерактивные плакаты «Органы чувств человека» и «Пищевая цепь», текстовый квест «Безопасный путь» по типу чат-бота, игра «Найди пару – Животные» по типу «Мемо»), разработанные с применением техник вайб-кодинга. Данные игры по функциональности и визуальной привлекательности не уступают шаблонам популярных онлайн-сервисов, а также имеют свои конкурентные преимущества: они созданы по определенной теме для конкретного класса с учетом уровня знаний, возраста, особенностей и интересов детей.

Рисунок 1. Примеры интерактивных материалов, созданных с помощью нейросети

Качество результата во многом зависит от грамотно составленного промпта. Чем точнее и детальнее описание, тем качественнее результат. В запросе необходимо указать:

– роль: не более двух (например, учитель начальных классов и веб-дизайнер одновременно) для создания эффективного педагогического продукта в качественной «веб-обертке»;

– цель: полностью автономный HTML-файл, т. е. независимый от сети интернет;

– тему, прикрепить учебный материал по теме или попросить нейросеть его создать;

– механику игры: принцип работы, подсчет баллов, таймер с обратным отчетом и автоматическим переходом к следующему вопросу, вывод результата с обратной связью, анимация и т. п.;

– дизайн: цветовая схема, шрифты, размеры, форма и расположение объектов на экране;

– адаптивность содержимого под размеры экрана и браузеры для корректного отображения игры;

– особые технические требования (необязательно), связанные с корректной работой HTML-кода.

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

За генерацию кода отвечают большие языковые модели (LLM), которые обучены на огромных массивах текстовых данных. Они работают как с естественными языками, например, с русским или английским, так и с формализованными, например, с языками программирования. Модели «понимают» логику запроса и создают корректный, адаптивный HTML-код, соответствующий современным веб-стандартам [2].

При выборе подходящей модели следует учитывать несколько ключевых критериев: точность интерпретации задачи, «чистота» генерируемого кода, скорость работы, способность к нестандартным решениям (креативность) и «предугадывание» запросов пользователя, а также для удобства работы с нейросетью наличие окна предпросмотра результата непосредственно в чате и возможность скачивания готового файла в формате .html [4].

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

Нейросеть способна писать сотни строк кода за считанные секунды, но только человек способен сделать игру эффективной. В вайб-кодинге важно применять итеративный подход: генерировать код, тестировать, анализировать и улучшать. Ключевой принцип эффективного промптинга — это пошаговое улучшение кода. Чтобы не «поломать» то, что уже было отлажено ранее, необходимо вести точечное редактирование, то есть в каждом последующем запросе просить нейросеть внести правки только в один выделенный фрагмент программы, а остальное оставить без изменений. После проверки его стабильной работы можно переходить к следующему этапу правок.

Рассмотрим пошаговое создание интерактивной игры в одном HTML-файле с помощью нейросети на примере викторины «Витаминки» для младших школьников.

1 шаг. Готовим материал по теме урока в текстовом документе с расширением .docx.

2 шаг. Составляем подробный промпт для создания викторины. За основу берем знакомый онлайн-шаблон и подробно описываем механику игры, желаемый визуальный стиль, анимацию и другое:

Ты – учитель начальных классов и продвинутый веб-дизайнер одновременно.

Создай викторину для младших школьников по теме «Витамины». Изучи прикрепленный файл с конспектом урока и создай 5 вопросов. В каждом вопросе 4 варианта ответа, один верный.

Механика игры:

– показывай по одному вопросу;

– добавь таймер с обратным отчетом на 30 секунд для каждого вопроса, останавливай таймер после выбора ответа или истечения времени;

– после выбора ответа в отдельном окне покажи объяснение (верно/неверно + пояснение);

– кнопку «Далее» для перехода к следующему вопросу активизируй только после выбора ответа;

– по истечении времени покажи правильный ответ с пояснением и активизируй кнопку «Далее», балл не засчитывай;

– подсчет баллов: балл начисляется только за верный ответ до истечения времени.

– по окончании викторины покажи модальное окно с итоговым счетом и персонализированной обратной связью в зависимости от результата: 5/5 — «Великолепно! Ты настоящий эксперт!»; 4/5 — «Отличная работа!»; 3/5 — «Хороший результат!»; 0-2/5 — мотивирующее сообщение.

– в итоговом модальном окне покажи кнопку «Начать заново» для перехода к началу викторины.

         Дизайн:

– яркий, дружелюбный, современный интерфейс для детей 7-11 лет;

– шрифт Nunito хорошо читаемый;

– SVG-иконки (овощи, фрукты, символы) используй в вариантах ответа и в качестве оформления;

– правильные ответы подсвечивай зеленым цветом, неправильные – красным, пояснения выделяй желтым;

– добавь анимацию: плавное появление вопросов, мигание при правильном ответе, тряска при неправильном; пульсация счета; в случае набора максимального количества баллов (5/5) в конце игры показывай праздничный дождь из конфетти.

Адаптивность: дизайн адаптивный для разных размеров экрана, совместим с браузерами Chrome, Firefox, Edge.

Технические требования (необязательно): HTML, CSS и JavaScript в одном HTML-файле, работающем не зависимо от интернета. Не используется display: none для основного контейнера вопросов. Скрипт запускается после полной загрузки DOM.

3 шаг. Прикрепляем файл с материалом урока и отправляем промпт в чат нейросети для генерации кода.

4 шаг. Тестируем получившуюся игру в окне предварительного просмотра в чате (рисунок 2).

Рисунок 2. Тестирование сгенерированного кода в чате нейросети

5 шаг. Вносим точечные правки в код программы последовательными запросами. В конце каждого запроса записываем фразу «Остальное не изменяй», чтобы сохранить рабочую часть кода.

6 шаг. Сохраняем код викторины в текстовом файле с расширением .html. Викторина готова к использованию и может быть открыта в любом браузере на любом устройстве (рисунок 3).

Рисунок 3. Готовая викторина «Витамины» для младших школьников

7 шаг (необязательно). Публикуем викторину в интернете и предоставляем к ней доступ по ссылке: https://informvpd.github.io/vitaminka/.

Таким образом, вайб-кодинг стирает границу между педагогическим замыслом и его технической реализацией: достаточно идеи, сформулированной в чётком и структурированном запросе, чтобы нейросеть воплотила её в интерактивном формате. Такой подход позволяет учителю создавать собственные уникальные, персонализированные и технически независимые ресурсы под свои задачи и для своего класса.

Литература

1. Байжанова А. П. Vibe coding и искусственный интеллект: инструменты цифровой методической деятельности педагога / А. П. Байжанова, Е.А. Спирина. –  Текст электронный: // Передовые технологии и инновации в образовании и науке для улучшения качества жизни и стимулирования устойчивого экономического роста: сборник статей VIII международной научно-технической конференции : в 3 томах /  Белорусский государственный технологический университет. – Минск, 2025. –С. 51-55. – URL:  https://www.elibrary.ru/item.asp?id=87145665. – Дата публикации: 23.12.2025. – Режим доступа: научная электронная библиотека eLIBRARY.RU.

2. Батаева П. С. Создание сайтов при помощи нейросети. методы, этапы и анализ / П. С. Батаева, Д.О.Х. Шахбиев. – Текст электронный: // Умаровские чтения-2023: сборник материалов всероссийской научно-практической конференции с международным участием / ООО «Издательство АЛЕФ». – Махачкала, 2023. – С. 47-53. – URL: https://www.elibrary.ru/item.asp?id=68576118. – Дата публикации: 14.08.2024. – Режим доступа: научная электронная библиотека eLIBRARY.RU.

3. Ералимова Г. С. Вайб-кодинг: революция в разработке программного обеспечения с помощью кода, сгенерированного искусственным интеллектом / Г.С. Ералимова, Е. С. Зозуля, Б. Л. Чуб. - Текст электронный: // Повышение качества образования, современные инновации в науке и производстве: сборник трудов международной научно-практической конференции / Кузбасский государственный технический университет. – Прокопьевск, 2025. – С. 372-375. – URL: https://www.elibrary.ru/item.asp?id=82684052. – Дата публикации: 31.07.2025. – Режим доступа: научная электронная библиотека eLIBRARY.RU.

4. Жукова Д. Н. Обзор возможности создания веб-сайта с использованием нейронной сети / Д. Н. Жукова, М. С. Соломина. – Текст электронный: // Наука, инновации, образование: актуальные вопросы XXI века: сборник статей VII международной научно-практической конференции / Наука и Просвещение (ИП Гуляев Г.Ю.). – Пенза, 2023. – С. 29-34. – URL: https://www.elibrary.ru/item.asp?id=54749632. – Дата публикации: 31.10.2023. – Режим доступа: научная электронная библиотека eLIBRARY.RU.

5. Шайдуллин, Д. А. Программирование будущего: как нейросети меняют подход к написанию кода / Д. А. Шайдуллин. – Текст электронный: // Российская наука в современном мире: сборник статей LXX международной научно-практической конференции / ООО АКТУАЛЬНОСТЬ.РФ. –  Москва, 2025. – С. 139-140. – URL: https://www.elibrary.ru/item.asp?id=82482610. – Дата публикации: 22.06.2025. – Режим доступа: научная электронная библиотека eLIBRARY.RU.