Вайб кодинг, как и зачем делать браузерные приложения и причем здесь аркадные игры
Тема искусственного интеллекта невероятно популярна сегодня. Количество пользователей, сумевших с ним «подружиться» и эффективно использовать его — будь то для решения домашних работ, генерации изображений и видео, создания контента — растёт с каждым днём.
Главная возможность современных нейронных сетей (а именно их я буду подразумевать под ИИ в этой статье, хотя это понятие существенно шире) — выполнять ту работу и решать те задачи, с которыми ранее мог справляться только человек. Эта особенность и стала отправной точкой автоматизации процессов с использованием ИИ.
Хочется отметить, что автоматизация бывает разная: от комплексов управления беспилотными автомобилями до чего-то очень простого, но от того не менее полезного в повседневном применении для конкретного пользователя — того, что позволяет автоматизировать наши рутинные задачи.
Сегодня мы часто слышим, что сложные математические расчёты, аналитика данных, построение отчётов, графиков, дашбордов, создание презентаций и так далее стали простыми задачами для ИИ. Но тут важно понимать, что речь, как правило, идёт об определённых программах — продуктах на базе нейросетей, а не о нейронных сетях как таковых. А вот чаты — та форма, которая известна, доступна и широко используется большинством пользователей, — хотя и достаточны для целого ряда практических задач, но не всегда способны удовлетворить их ожидания; отсюда нередко появляется скептическое отношение к способностям ИИ.
На связи блог immers.cloud. Наша цель — рассказывать о технологиях искусственного интеллекта и показывать, как наш облачный GPU-сервис помогает эффективно решать такие задачи.
Дело в том, чтобы предоставлять действительно сложную аналитику, ИИ, как правило, должен быть дополнительно обучен и встроен в сервис, который создают команды программистов, промпт-инженеров, экспертов предметной отрасли, дизайнеров и многие другие — например, «Нейроюрист» от Яндекса.
Таким образом, чат — это не волшебная кнопка, а довольно несовершенный инструмент, обращаться с которым нужно очень аккуратно. Проиллюстрирую сказанное на примере реального кейса.
Мой друг провёл анкетирование через Яндекс.Формы, опросил 170 человек и получил таблицу в Excel с ответами на вопросы. Далее он составил очень подробный промпт, в котором указал, какую аналитику нужно провести по этим данным, на что обратить особое внимание и как структурировать ответ. Этот промпт вместе с файлом таблицы он загрузил в Perplexity и уже на второй генерации получил идеальный отчёт с графиками, таблицами, выводами и рекомендациями — а главное, в виде готового Word-документа.
На радостях, что сделал работу за два дня всего за пять минут, он уже почти отправил этот документ руководителю, но решил ещё раз внимательнее его прочитать. И ужас: уже на первой странице, в графике распределения пола респондентов, он увидел, что их 140, а не 170, как в исходной таблице. Дальше — хуже: все числа в отчёте, а значит, и метрики, не соответствовали действительности. Повторные генерации не помогли — они только ухудшали отчёт.
С этой проблемой он обратился ко мне. Ситуацию мы исправили довольно просто: я скопировал первые пять строк из Excel-таблицы анкетирования в чат DeepSeek (да, если будете так делать — не обращайте внимания, что эти данные в интерфейсе чата будут выглядеть как откровенная ерунда; модель прекрасно поймёт, что это таблица, и получит необходимые сведения о её структуре), а затем попросил написать скрипт на Python для Google Colab, который запросит загрузку исходной таблицы, рассчитает требуемые статистики, распределит ответы на открытые вопросы по категориям и запишет результат в простой текстовый файл.
Потом мы загрузили этот файл в чат Perplexity, где ранее был сгенерирован визуально отличный, но совершенно неточный отчёт, и попросили модель исправить отчёт, опираясь строго на рассчитанные нами самостоятельно статистики. Результат был великолепным.
Не проси ответ — проси скрипт
Мораль этой истории такова: в некоторых ситуациях просить у модели в чате готовый результат — плохая идея (особенно если это просто текстовая модель, а в интерфейсе чата не реализована возможность вызова инструментов). Всё, что модель отвечает, нужно тщательно проверять.
Но попросить её написать код, который позволит получить промежуточный результат — и который потом можно будет использовать для аналогичных задач (например, получить статистику по другой анкете) — вот это уже хорошая история. Здесь как раз доступная всем форма чата оказывается достаточно эффективной: модель способна написать довольно сложную программу по вашему пожеланию. Это уже следующий шаг к автоматизации процессов, а сам подход называется AI pair programming или, в народе, «vibe coding».
Мне кажется, это сейчас одно из золотых правил: во многих случаях лучше попросить ИИ написать код, который решает задачу, чем просто попросить решить саму задачу.
И тут мы переходим к предметной части статьи. А что, если — и это вполне нормально — у пользователя нет навыков программирования? Как он будет запускать и использовать код, сгенерированный моделью? Мало кому из моих знакомых, кто не занимается программированием, хочется решать повседневные задачи, просматривая и копируя выводы из консоли IDE или Google Colab.
Интерфейс вместо консоли
Большинству пользователей — да и программистам, иногда тоже — нужен понятный и удобный интерфейс для использования кода в автоматизации простых рутинных задач. И тут на помощь приходят HTML, JS и CSS, которые позволяют создавать и запускать небольшие приложения прямо в браузере.
И да, это тоже код — и чаты на базе ИИ отлично справляются с его написанием.
Поясню, что я имею в виду. Одно время по работе мне было необходимо просматривать конфигурационные JSON-файлы нейросетевых моделей и выписывать из них строго определённые сведения. На первом этапе автоматизации я пользовался поиском по файлу или на странице браузера — это было очень неудобно, особенно если учесть, как выглядит JSON-файл, их количество и число позиций, которые нужно было выписывать.
Что я сделал? Я попросил нейросеть написать мне код браузерного приложения на HTML и JS, которое позволяло бы вставлять в исходное поле JSON, задавать ключи для поиска, сортировать найденные значения и отображать результат на экране в нужном формате. Получилось следующее:
Рабочее приложение было сгенерировано практически с первого ответа: все необходимые мне сведения выводились в виде удобной таблички, которую я потом использовал дальше.
Безусловно, это довольно специфический — отраслевой — пример и относительно простая задача. На текущем этапе автоматизации я этим уже не занимаюсь — эту работу выполняет программа, запускаемая по расписанию. Но на том предыдущем этапе это мини-приложение очень помогло мне ускорить процесс.
Интерактивные презентации
Дочь попросила меня помочь сделать презентацию по биологии на тему простейших организмов. Я снова обратился к возможностям ИИ в создании браузерных мини-приложений. Модель сгенерировала код приложения, которое открывается в любом браузере — включая мобильные телефоны.
На экране симпатичная инфузория-туфелька хаотично движется и «поедает» бактерии. При нажатии на кнопку информации появляется изображение её внутреннего строения с интерактивными подписями-кнопками для всех органелл. При клике на каждую — всплывает окно с описанием.
Презентация имела успех у учеников: дети с удовольствием читали описания и при этом не забывали следить за происходящим на экране — соревновались, у кого инфузория «съела» больше еды и насколько подросла.
Ещё один пример — интерактивная презентация по информатике на тему форматов чисел, с которыми работают машины: как их правильно конвертировать и почему возникают ошибки в вычислениях.
Надеюсь, мне удалось убедить вас в полезности практического vibe coding и, в частности, в удобстве браузерных мини-приложений.
Теперь перейдём к практике — и здесь нужно ответить на два вопроса: какую нейросеть выбрать для генерации кода и как правильно действовать.
Выбор модели: от чатов к агентам
Отвечая на первый вопрос, скажу, что идеальный вариант — это сервисы с ИИ-агентами, например Cursor и им подобные. Пожалуй, главное удобство таких сервисов — в механизме редактирования кода. При необходимости внесения исправлений не нужно писать: «исправь мне класс такой-то или функцию такую-то» (хотя и желательно), — можно просто сказать: «в моём приложении не работает вот это — сделай что-нибудь». Агент при этом изучает текущий код и точечно вносит изменения, не переписывая всё с нуля, как это часто делают модели при общении в чате.
Ещё один серьёзный плюс — система контроля версий (но это уже отдельная история). К сожалению, Cursor требует оплаты подписки. Хорошая новость в том, что существуют открытые и бесплатные модели, способные генерировать качественный исполняемый код, причём доступны они не только на платформе Hugging Face — в первую очередь ориентированной на разработчиков и инференс, — но и в уже упомянутых чатах. Но какая из них лучше?
Чтобы ответить на этот вопрос, я протестировал самые известные на рынке решения на задачах генерации, на мой взгляд, самых сложных браузерных мини-приложений — а именно игр. Программирование игр требует прописывания сложных условий и логики взаимодействия объектов, поэтому не случайно разработчики нейросетей демонстрируют возможность генерации игр в своих релизах — например, здесь или здесь. Если модель умеет хорошо создавать игры, она без труда справится с логикой вашего мини-приложения для автоматизации рутинных операций.
Мои оценки моделей основаны не на бенчмарках, а на практической пользовательской метрике: запускается ли игра и реализованы ли все её механики. Результат получился однозначным. Из протестированных — DeepSeek, Qwen, Kimi K2 и ряда других (включая ChatGPT и Gemini) — лучшими оказались серии моделей GLM 4.5, GLM 4.6 и GLM 4.7 от компании z.ai, доступные в чате chat.z.ai. Именно этим моделям удалось сгенерировать серию узнаваемых и горячо любимых классических игр. Примеры результатов я покажу ниже, а пока расскажу о процедуре.
Переходим по адресу chat.z.ai, в окне чата вводим простейший промпт:
Сгенерируй мне код браузерной версии классической игры pacman в одном файле. Используй html, js, css. Можешь использовать emoji. … Далее вы можете сразу описать какие-то особые пожелания
В ответе вы увидите примерно следующее:
При нажатии на объект №1 (артефакт генерации) справа откроется окно с превью игры в браузере. Далее переключаемся на вкладку №2 (отображение кода) и нажимаем кнопку «Копировать» (№3) — код игры скопируется в буфер обмена.
Затем создаём текстовый документ в обычном блокноте (подойдёт любой простой редактор), вставляем скопированный код и нажимаем Ctrl + S, чтобы сохранить файл.
Пока это просто текстовый файл, чтобы он запускался в браузере, необходимо изменить его расширение с .txt на .html. Для этого щёлкните правой кнопкой мыши по иконке файла, выберите «Переименовать» и подтвердите предупреждение об изменении расширения.
Далее запускаем игру двойным щелчком левой кнопкой мыши (ЛКМ) или нажатием клавиш Enter — и всё, смотрим, что получилось!
Если в игре что-то не работает или работает не так, как вам нужно, — возвращайтесь в чат с моделью и отправьте промпт, в котором опишите проблему и попросите её исправить.
Советы по эффективному генерации кода
Модель чаще всего сгенерирует код с нуля, хотя может создать и фрагмент для исправления. Если лень искать нужный участок или разбираться в структуре — просто попросите переписать код или создать новый артефакт (для модели это эквивалентно).
Еще раз повторюсь: переписывание кода с нуля — не лучший подход, но если у вас нет возможности использовать ИИ-агенты для редактирования, — придётся смириться. Либо научиться использовать агентов 😊 — правда, это потребует не только времени, но и определённых затрат.
Несколько практических советов:
- Чем подробнее вы опишете механику игры, управление и функции — тем лучше будет результат. Детализация помогает модели точнее понять задачу.
- Популярные игры, информация о механике которых есть в интернете, генерируются качественнее. То же справедливо и для мини-приложений: модель легко создаст калькулятор под любую специфическую задачу, потому что «знает», как он должен выглядеть и работать.
- Не бойтесь начинать новый диалог — более того, это строго рекомендуется. Да, модель теоретически помнит контекст, но с каждым запросом на исправление она вынуждена перечитывать весь диалог. Чем он длиннее — тем сложнее ей сохранять фокус. Ответы начинают деградировать вопреки ожиданиям. Не используйте один чат более чем для 5–7 корректировок (одна игра в среднем занимает около 1000 строк кода).
- Создайте новый диалог: скопируйте в него последнюю рабочую версию кода и изложите, что именно вас не устраивает в текущей реализации.
- Не пытайтесь исправить всё сразу. Вместо промпта с длинным списком багов — просите исправлять по одной проблеме за раз. Это повышает точность и снижает шанс ошибки.
- В какой-то момент захочется вносить правки самостоятельно. Начните с простого: цвет интерфейса, ширина игрового экрана, текстовые пояснения. Скорее всего, так и случится — ведь модель, умея решать сложные задачи, иногда путается в мелочах. Вы можете попросить её добавить комментарии к каждому блоку кода или указать, в какой строке реализуется та или иная механика.
Так вы сможете сами изменить количество врагов, координаты их появления или цвет стен — и постепенно приобщитесь к программированию. Для этого рекомендую открывать файл с игрой в редакторе, например, VS Code — мощном, бесплатном и удобном инструменте. Скачать его можно здесь.
Что получилось: игры, созданные ИИ
Далее стоит показать, что получилось у меня — и почему я отдал предпочтение моделям GLM. Ниже — небольшой список игр с кратким описанием их механик и скриншотами:
Pac-Man
Классическая аркадная видеоигра, разработанная японской компанией Namco и вышедшая в 1980 году. Колобок в лабиринте должен собирать точки-энерджайзеры, одновременно уворачиваясь от монстров-привидений.
Если Пак-Ман съест «арбуз» (power pellet), он получает возможность временно съесть привидение и заработать дополнительные очки.
- Количество строк кода: 692.
- Главная сложность: плавная анимация открывания и закрывания рта у колобка.
Donkey Kong
Компьютерная игра в жанре платформера, разработанная и выпущенная компанией Nintendo в 1981 году.
Наша версия немного упрощена: игрок управляет Прыгуном, который бегает и прыгает по платформам, собирает мешки с деньгами, а собрав все — получает право добраться до флага финиша на верхней платформе. При этом ему нужно уворачиваться от бананов, которые в него кидает Донки Конг.Дойдя до финиша, игрок переходит на следующий уровень, где меняется расположение платформ, а Донки Конг бросает бананы всё быстрее и точнее.
- Количество строк кода: 1 121.
- Главная сложность: плавная анимация ходьбы персонажа (для отрисовки использовались простые эмодзи).
Тетрис
Компьютерная игра, изобретённая и разработанная советским программистом Алексеем Пажитновым. Игра была выпущена в 1985 году; её механика, пожалуй, одна из самых узнаваемых в истории и практически не требует объяснений.
С учётом её популярности и культового статуса модели удалось сгенерировать очень аккуратную и полностью играбельную версию — с постепенным повышением сложности и корректной реализацией механики дропа.
- Количество строк кода: 818.
- Главная сложность: плавное и резкое опускание фигур («мягкий» и «жёсткий» дроп), требующее точной синхронизации с игровым циклом.
Звериный Dig Dug
Моя версия аркадной игры Dig Dug, разработанной и выпущенной компанией Namco в 1982 году в Японии.
В игре кролик пробирается по норам под землёй, собирая алмазы и морковки, одновременно уворачиваясь от змей. Он может копать туннели и уничтожать врагов, сбрасывая на них камни — за это начисляются дополнительные очки. Архитектура уровней генерируется случайным образом; сложность зависит от количества врагов и расположения алмазов.
- Количество строк кода: 932.
- Главная сложность: синхронизация плавности анимации всех движущихся объектов — особенно камней при падении на змей.
Asteroids
Аркадный шутер, выпущенный компанией Atari в 1979 году. Игрок управляет космическим кораблём, пролетающим сквозь пояс астероидов, по которому периодически перемещаются летающие тарелки. Цель игры — стрелять и уничтожать вражеские корабли (астероиды при этом не разрушаются), избегая столкновений со всеми объектами. С каждым новым уровнем увеличиваются скорость, количество астероидов и врагов.
Для отрисовки игровых объектов использовались изображения, сгенерированные в чате Qwen — к слову, он отлично справляется с генерацией изображений и коротких видео (но это уже тема для отдельного обсуждения).
- Количество строк кода: 673.
- Главная сложность: точная настройка точки вылета лазерного луча — она должна исходить строго из центра носа корабля, что потребовало тонкой привязки координат в JavaScript-анимации.
Морское приключение
Моя авторская задумка, вдохновлённая классическими аркадными играми.
Рыбка плавает по экрану, собирая хаотично движущиеся креветки. При этом ей нужно избегать акул, кальмаров и других хищных морских обитателей, которые на высоких уровнях начинают атаковать с разных сторон экрана. Периодически на дне появляются бонусы — дополнительные жизни, ускорение или защита. Чтобы получить их, игрок должен перехитрить крабов, ползающих по дну.
Игра простая по механике, но получилась очень красочной, динамичной и увлекательной. Все объекты, кроме пузырей, выполнены в виде эмодзи.
- Количество строк кода: 1 173.
- Главная сложность: создание красивых и плавно движущихся пузырей — обычный CSS-анимируемый круг не подошёл, пришлось экспериментировать с градиентами и прозрачностью для эффекта объёма.
От игр — к реальным задачам
Почему я начал с vibe coding мини-приложений для работы, а пришёл к играм? Ответ прост: технология и процесс генерации мини-приложений по представленному мной алгоритму — тот же самый, что и у игр, а зачастую даже проще. ИИ-модели, включая GLM, справляются с такими задачами быстрее и качественнее.
Приведу пример браузерного мини-приложения, которое я создал с помощью нейросети GLM. По работе мне нужно было тестировать открытые и проприетарные модели ИИ через API — в том числе те, которые развёртывала наша команда. Цель — быстро оценить не качество ответов по бенчмаркам (у них сейчас, похоже, совсем другая роль), а способность модели чувствовать системный промпт, корректно работать с параметрами вроде температуры, top-p и другими настройками генерации.
Не все Spaces на Hugging Face предоставляют такую возможность, а Playground от разных разработчиков позволяют экспериментировать только со своими моделями. Вдоволь насмотревшись на экран IDE, я решил использовать vibe coding и за один промпт собрал всё необходимое в одном HTML-файле — лёгкое, автономное приложение, которое решает эту задачу.
Далее — сам чат. Первоначально он создавался для визуализации диалога, но быстро оброс полезными возможностями: поддержкой загрузки документов и извлечением текста из них — чтобы модель могла работать с контекстом; экспортом чата в документ (да, именно в форме чата — красиво оформленным, что есть далеко не у всех современных ИИ-чатов); а также возможностью сохранять и загружать диалоги прямо в браузере, без привязки к серверам.
Это приложение оказалось приятнее и удобнее IDE — и, что самое главное, позволяло быстрее решать задачи, поставленные передо мной. Его основа была написана с нуля моделью GLM 4.5 по тому же сценарию и правилам, что и генерация игр.
С полным основанием могу предположить: не всем нужны специфичные инструменты вроде моего или игры как таковые. Но поверьте — генерация браузерных мини-приложений способна закрыть и автоматизировать широкий круг повседневных задач, на которые люди сейчас тратят часы и даже дни. При этом такие решения работают быстрее, точнее и — главное — с постоянной воспроизводимостью.
А ведь именно этого так часто не хватает в обычном общении с ИИ: да-да, если вы три раза получили отличный ответ по хорошему промпту, ничто не гарантирует, что на четвёртый раз результат будет таким же. А вот код, однажды сгенерированный и проверенный, остаётся неизменным. Двигателем такого приложения становится программный код, который фактически отражает все ваши пожелания — а для его запуска достаточно любого интернет-браузера (доступ к Сети при этом вовсе не обязателен).
Поэтому всем рекомендую попробовать vibe coding браузерных приложений. А если не знаете, с чего начать — начните с игр. 😊
Технологии ИИ развиваются стремительно, но настоящая сила скрывается не в том, чтобы просто спрашивать, а в умении заставить ИИ работать на вас. Браузерные мини-приложения — это простой, доступный и мощный способ превратить идею в инструмент за считанные минуты. И неважно, вы программист или нет — главное, иметь задачу и желание её автоматизировать.
А мы в immers.cloud верим, что будущее — за такими подходами. За теми, кто не ждёт готовых решений, а создаёт свои. Наши облачные GPU-сервисы разработаны именно для таких задач: где нужно обучать модели, запускать тяжёлые вычисления или масштабировать ИИ-инструменты, созданные с помощью vibe coding.
Если вам интересно больше узнать о том, как облачные технологии помогают раскрывать потенциал искусственного интеллекта — подписывайтесь на наш блог. Здесь мы рассказываем не только о возможностях ИИ, но и о том, как сделать их своими — практично, быстро и без лишней сложности.