Привет, Хабр.

Я продолжаю свою педагогическую работу. Если в прошлый раз речь шла о генераторе судоку, то сегодня — о более острой теме: искусственном интеллекте.

У меня сложилось впечатление, что большинство людей в моём окружении не умеют правильно использовать ИИ. Для одних он — волшебная кнопка, выдающая мусор, для других — шпаргалка, убивающая критическое мышление. Я решил показать детям третий путь: когда ИИ становится не заменой мозга, а мощным ускорителем идей.

Подготовительный этап: чтение кода глазами

Прежде чем приступать к созданию проекта, нужно было заложить основу. Дети уже освоили базовые понятия HTML и CSS. Мой подход был прост: я давал им готовые файлы, насыщенные комментариями.

Задача: «Посмотри на строку 42, измени background-color, сохрани и перезагрузи страницу. Что изменилось?» Такой метод помог привыкнуть к чужому коду и понимать, где искать эффект от своих правок.

Концепция: от карандаша к алгоритму

Когда дети перестали бояться тегов, мы перешли к проектированию. Я убеждён: любая программа должна начинаться с бумаги. Взяли листы А4 и карандаши.

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

Логика игры

• Сетка из 3×3 «норок»
• Случайное появление «раздутого» лица в одной из ячеек
• Таймер и сброс состояния

Почему именно HTML, CSS, JavaScript?

Для школьного проекта это идеальный стек:

• Нулевой порог входа: не нужно устанавливать IDE или настраивать среду. Достаточно браузера и текстового редактора.
• Мгновенный фидбек: изменил код — нажал F5 — увидел результат.
• Портируемость: проект можно отправить родителям по ссылке или файлу — он заработает на любом устройстве.

Работа с ИИ: составляем промт

Пока дети фотографировались и обрезали изображения, я подготовил демонстрационную версию. Вместо их фото использовал картинки мультяшных котят. С помощью простого промта в Google Gemini сгенерировал 9 котиков и 9 их «реакций».

Я объяснил детям: ИИ — это очень исполнительный, но бесконечно глупый стажёр. Попросишь «сделай игру» — получишь абстракцию. Нужно говорить чётко и подробно.

Вместе составили детальный запрос:

Prompt for creating the game "Catch the Cheeks"
Role: You are an experienced Frontend developer. You need to create a simple web game using pure HTML, CSS, and JavaScript in a single file. It should be similar to “Whac-A-Mole,” but instead of characters popping up, use photos where they puff their cheeks.
Overall style: Light background, everything centered on the page.
Game field: A white panel with rounded corners and a soft shadow. Inside is a 3×3 grid.
Cells: 9 square images. The images should have rounded corners and a press (shrink) effect when clicked.
On mobile devices, the cells should scale relative to the screen width.
Use 18 image files.
Normal state: photo 1 normal.jpg … photo 9 normal.jpg.
Changed state: photo 1 highlighted.jpg … photo 9 highlighted.jpg.
Every 5 seconds, a random “normal” image changes to “highlighted” (puffed cheeks).
The player must click or tap the image to return it to the “normal” state.
With each new change, the game speed increases.
If all 9 images become “highlighted” at the same time, the game ends.
On loss, input (clicks/taps) is completely disabled for 5 seconds.
All 9 images start blinking synchronously (normal/puffed) every 0.5 seconds.
After 5 seconds from the start of blinking, a modal window appears.
The modal background should blur the game.
Modal text: once again?
Button: sure!
Clicking the button resets all timers, clears the field, and returns the game to its initial speed.
Code requirements:
All code (HTML, CSS, JS) must be in a single file.
Use modern JavaScript methods.
Include concise and clear explanatory comments for styles and key functions.
Make sure there are no blue tap highlights on smartphones.

Результат

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

Финальная версия — результат совместной работы детей, меня и ИИ.

Главный урок

Дети поняли: программирование сегодня — это не только знание синтаксиса, но и умение чётко формулировать задачи. Мы не «списали» код. Мы выступили в роли архитекторов, а ИИ стал нашими быстрыми руками.

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

Это и есть вайбкодинг: минимум рутины, максимум творчества и быстрая реализация идей.

Привет, Хабр.

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

У меня сложилось стойкое ощущение, что среди моего окружения почти никто не умеет пользоваться этим инструментом правильно. Для большинства это либо волшебная кнопка, которая выдает мусор, либо шпаргалка, убивающая критическое мышление. Я решил показать детям другой путь, когда ИИ становится не заменой мозга, а мощным ускорителем реализации идей.

Подготовительный этап: Чтение кода глазами

Прежде чем бросаться в омут, нам нужно было заложить фундамент. Мы с ребятами уже прошли основы HTML и CSS. Мой метод был прост: я давал им готовые файлы, густо испачканные комментариями. Логика была такая: Посмотри в строку 42, измени параметр background-color, сохрани и посмотри на страницу, что изменилось? Это приучило их не бояться чужого кода и понимать куда именно нужно смотреть, чтобы увидеть результат своих действий.

Концепция: От карандаша к алгоритму

Когда руки перестали дрожать при виде тегов, мы перешли к проектированию. Я сторонник того, что любая программа начинается на бумаге. Мы взяли обычные листы А4 и обычные карандаши.

В качестве идеи выбрали классику, аналог игры Поймай крота (Whack-a-mole). Но делать просто кротов скучно. Мы решили, вместо кротов у нас будут фотографии самих учеников. В обычном состоянии - просто лицо, а в момент “появления” - то же, но с раздутыми щеками.

Мы обсудили логику:

• Сетка из “норок”
• Рандомное появление изображения в одной из ячеек
• Таймер и сброс состояния

Почему такой стек?

Выбор пал на HTML, CSS и JavaScript. Для школьного проекта это идеальное сочетание:

• Нулевой порог входа: не нужно устанавливать тяжелые IDE или настраивать окружение. Достаточно браузера и блокнота
• Мгновенный фидбек: изменил строчку, нажал F5, увидел результат
• Портируемость: проект можно отправить родителям в виде одной ссылки или файла, и он будет работать везде

Пока дети фотографировались и нарезали фотографии в Фотошопе, для "учительской” реализации я решил использовать картинки с мультяшными котиками. Выбрав одну в интернете, с помощью нехитрого промта, я сгенерировал ещё восемь других котят и девять реакций на прикосновение.

Составляем промт

Я объяснил детям, что ИИ, это очень исполнительный, но бесконечно глупый стажер. Если попросить его “сделай игру”, он выдаст среднюю температуру по больнице.

Мы сели и вместе составили подробный запрос для бесплатного ИИ от Google (Gemini).

Prompt for creating the game "Catch the Cheeks"Role: You are an experienced Frontend developer. You need to create a simple web game using pure HTML, CSS, and JavaScript in a single file. It should be similar to “Whac-A-Mole,” but instead of characters popping up, use photos where they puff their cheeks.Overall style: Light background, everything centered on the page.Game field: A white panel with rounded corners and a soft shadow. Inside is a 3×3 grid.Cells: 9 square images. The images should have rounded corners and a press (shrink) effect when clicked.On mobile devices, the cells should scale relative to the screen width.Use 18 image files.Normal state: photo 1 normal.jpg … photo 9 normal.jpg.Changed state: photo 1 highlighted.jpg … photo 9 highlighted.jpg.Every 5 seconds, a random “normal” image changes to “highlighted” (puffed cheeks).The player must click or tap the image to return it to the “normal” state.With each new change, the game speed increases.If all 9 images become “highlighted” at the same time, the game ends.On loss, input (clicks/taps) is completely disabled for 5 seconds.All 9 images start blinking synchronously (normal/puffed) every 0.5 seconds.After 5 seconds from the start of blinking, a modal window appears.The modal background should blur the game.Modal text:once again?Button:sure!Clicking the button resets all timers, clears the field, and returns the game to its initial speed.Code requirements:All code (HTML, CSS, JS) must be in a single file.Use modern JavaScript methods.Include concise and clear explanatory comments for styles and key functions.Make sure there are no blue tap highlights on smartphones.

Что из этого вышло

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

Ниже финальный результат нашего совместного творчества с ИИ.

https://drive.google.com/drive/folders/1kBznLB6SKCJ6DsulXsYVCvjdvfBBjbGA?usp=sharing

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

Дети были в восторге. Оказывается, чтобы создать свою игру с собой в главной роли, не нужно учиться пять лет, нужно просто понимать, как работают базовые технологии и как правильно разговаривать с “кремниевым разумом”.

Это и есть тот самый вайбкодинг: минимум рутины, максимум творчества и быстрая реализация идей.

Вместо послесловия

Прислушавшись к немногочисленным, но полезным комментариям к предыдущей статье, я решил подумать над новой идеей для игры, которая не была бы "головоломкой для яйцеголовых". И мне кажется, такую идею я нашёл. Новый проект показался мне ещё более интересным! Мне пришлось изучать логику работы "искусственных противников" и столкнуться с нехваткой вычислительных мощностей для сложной математики. Плотно работаю над реализацией. Ниже фотографии моих самых маленьких тестеров. Сейчас "летние занятия", и с программой не так строго.