Формат Владимир Казаков объявил сразу: хватит разговаривать, давайте попробуем. За полчаса он вместе с залом и добровольцем собрал рабочее приложение. Ни одной строчки кода руками, в бесплатном чате, который открыт любому.
Начал он с воспоминания. Когда он только начинал работать, к нему приходил начальник и просил: сделай мне формулу в Excel, а то эти твои ВПР совсем непонятны. Тогда для такого нужны были специально обученные люди, и Владимир был одним из них. Сегодня прийти и спросить про ВПР никому в голову не придёт, её делает кто угодно.
С кодом происходит то же самое.
«Мы перешагиваем в момент, когда написание кода по сложности становится таким же, как работа с Excel».
Если он прав, специально обученные люди, которые собирают интерактивы для курсов, скоро будут нужны заметно реже. Судя по тому, что происходило на сцене, он прав.
Рецепт со сцены
Три слова, с которых начинается всё: HTML, JavaScript, один файл.
Промпт звучит примерно так: создай микроприложение на чистом HTML, CSS, JavaScript, всё в одном файле. Ключевые здесь именно эти слова, остальное пишите как угодно. Дальше словами описываете, что нужно. Ответ сохраняете как файл с расширением .html и открываете в браузере.
Работает это всегда по простой причине. Любой код когда-то был текстом, но большинству языков перед запуском нужно либо особое окружение, либо компиляция. Браузеру не нужно ничего, кроме самого текста. Как сказал Владимир, браузеры безопасники пока, к счастью, не заблокировали.
Что собрали вживую
Тему предложили из зала: дневник питания, который тут же окрестили «Обжоркой». Владимир специально работал в бесплатном DeepSeek, чтобы ни у кого не осталось ощущения, будто такое доступно только избранным за десять тысяч долларов в секунду.
Приложение получилось рабочим: несколько экранов, добавление записи, статистика, мобильный интерфейс по умолчанию, данные сохраняются между заходами. Распознавание еды по фотографии за пятнадцать минут не собрать, там нужна отдельная интеграция по ключу доступа, поэтому загрузку фото честно сделали заглушкой. Как делается настоящая интеграция, он объяснил отдельно, но в демо не полез ради времени.
Три приёма, которые переносятся на любую задачу
Первое. Когда правите приложение, не дописывайте в том же диалоге. Скопируйте текст задания, вычистите мусор, откройте новый диалог и вставьте туда. Иначе контекст растёт, и модель начинает путаться и ломать уже сделанное.
Второе. Пишите ТЗ вместе с моделью. Попросите: проверь это ТЗ на полноту и логичность, предложи дополнения. В демо она сама предложила поле для нормы, группировки и отдельный экран деталей, до которых на сцене не додумались.
Третье. В конце промпта напишите: задай мне пять вопросов по одному, чтобы убедиться, что понял, что я хочу. Модель спрашивает поочерёдно, вы отвечаете и по дороге вспоминаете то, что забыли указать. Повторять, пока вопросы не станут пустыми. Это заменяет мозговой штурм.
Что браузер может
Мобильный интерфейс получается по умолчанию, в 2025 году немобильный ещё надо умудриться заказать. Браузер читает и сохраняет файлы, которые понимает: текст, CSV, PDF. Можно сделать офлайн-приложение на телефоне, это называется Progressive Web App: открываете сайт, добавляете на главный экран, дальше оно работает без интернета. Можно сохранять данные между сессиями через local storage, для этого достаточно попросить сохранять введённое. Можно просить красивый дизайн, например в стиле Material Design, и подключать готовые библиотеки, вплоть до фейерверка при выполненной задаче.
С библиотеками есть одна осторожность. Модель может выдумать несуществующую, а мошенники такие фейковые библиотеки создают специально, чтобы подсунуть вредный код. Это стоит проверять.
Чего браузер не может
Полноценного бэкенда не будет. Передать данные в вашу внутреннюю LMS не выйдет, пока на её стороне не сделана встречная интеграция: VPN и firewall браузерное приложение не пробьёт. Для таких вещей нужен маленький сервер, который может крутиться хоть на вашем ноутбуке, ключ доступа и отдельный файл. Как всё это настроить, модель подскажет.
Как это превращается в SCORM
Любое такое приложение упаковывается в SCORM. Попросите модель дописать второй файл, манифест, положите его рядом с html и запакуйте в zip.
То, над чем раньше мучились днями, верстая интерактивы в iSpring, Articulate и Adobe, где вечно что-то нельзя, теперь собирается за часы. Кейсы Владимир показал рабочие. Система рандомизации команд для чемпионата по промптингу в фарм-компании, которая учитывала даже пол участников и спортивно-оздоровительную часть. И система приёма и оценки заданий для чемпионата крупного банка, собранная на Google-таблицах в роли базы данных: ИИ проверял ответы и выставлял баллы в рейтинг.
Где проходит граница
Всё это только фронтенд. Для телеграм-бота или настоящего бэкенда браузера мало.
Один файл годится для простого. В сложном приложении, чтобы добавить одну кнопку, модель переписывает файл целиком, а на третий-четвёртый раз начинает ломать и забывать старое. Дальше нужны специальные среды, которые видят десятки файлов и правят их по строчке.
Разница между моделями небольшая. DeepSeek, ChatGPT и Qwen дают примерно одинаковый код, Claude лучше держит большие файлы, DeepSeek его недавно нагнал. На задачах такого уровня вы разницы не почувствуете.
Закончил Владимир так: «Добро пожаловать в вайб-кодинг, было почти не больно». И попросил зал поставить плюсик, если кодили вместе с ним. Экран залило реакциями.
В программе ИИ.Elements 2026 таких разборов будет больше: практика внедрения, ошибки и подводные камни, инструменты, которые работают уже сейчас, и честный разговор о том, какие задачи ИИ отдавать не стоит. 16–17 сентября, онлайн. Программа и билеты: elearningelements.ru/ii
Начал он с воспоминания. Когда он только начинал работать, к нему приходил начальник и просил: сделай мне формулу в Excel, а то эти твои ВПР совсем непонятны. Тогда для такого нужны были специально обученные люди, и Владимир был одним из них. Сегодня прийти и спросить про ВПР никому в голову не придёт, её делает кто угодно.
С кодом происходит то же самое.
«Мы перешагиваем в момент, когда написание кода по сложности становится таким же, как работа с Excel».
Если он прав, специально обученные люди, которые собирают интерактивы для курсов, скоро будут нужны заметно реже. Судя по тому, что происходило на сцене, он прав.
Рецепт со сцены
Три слова, с которых начинается всё: HTML, JavaScript, один файл.
Промпт звучит примерно так: создай микроприложение на чистом HTML, CSS, JavaScript, всё в одном файле. Ключевые здесь именно эти слова, остальное пишите как угодно. Дальше словами описываете, что нужно. Ответ сохраняете как файл с расширением .html и открываете в браузере.
Работает это всегда по простой причине. Любой код когда-то был текстом, но большинству языков перед запуском нужно либо особое окружение, либо компиляция. Браузеру не нужно ничего, кроме самого текста. Как сказал Владимир, браузеры безопасники пока, к счастью, не заблокировали.
Что собрали вживую
Тему предложили из зала: дневник питания, который тут же окрестили «Обжоркой». Владимир специально работал в бесплатном DeepSeek, чтобы ни у кого не осталось ощущения, будто такое доступно только избранным за десять тысяч долларов в секунду.
Приложение получилось рабочим: несколько экранов, добавление записи, статистика, мобильный интерфейс по умолчанию, данные сохраняются между заходами. Распознавание еды по фотографии за пятнадцать минут не собрать, там нужна отдельная интеграция по ключу доступа, поэтому загрузку фото честно сделали заглушкой. Как делается настоящая интеграция, он объяснил отдельно, но в демо не полез ради времени.
Три приёма, которые переносятся на любую задачу
Первое. Когда правите приложение, не дописывайте в том же диалоге. Скопируйте текст задания, вычистите мусор, откройте новый диалог и вставьте туда. Иначе контекст растёт, и модель начинает путаться и ломать уже сделанное.
Второе. Пишите ТЗ вместе с моделью. Попросите: проверь это ТЗ на полноту и логичность, предложи дополнения. В демо она сама предложила поле для нормы, группировки и отдельный экран деталей, до которых на сцене не додумались.
Третье. В конце промпта напишите: задай мне пять вопросов по одному, чтобы убедиться, что понял, что я хочу. Модель спрашивает поочерёдно, вы отвечаете и по дороге вспоминаете то, что забыли указать. Повторять, пока вопросы не станут пустыми. Это заменяет мозговой штурм.
Что браузер может
Мобильный интерфейс получается по умолчанию, в 2025 году немобильный ещё надо умудриться заказать. Браузер читает и сохраняет файлы, которые понимает: текст, CSV, PDF. Можно сделать офлайн-приложение на телефоне, это называется Progressive Web App: открываете сайт, добавляете на главный экран, дальше оно работает без интернета. Можно сохранять данные между сессиями через local storage, для этого достаточно попросить сохранять введённое. Можно просить красивый дизайн, например в стиле Material Design, и подключать готовые библиотеки, вплоть до фейерверка при выполненной задаче.
С библиотеками есть одна осторожность. Модель может выдумать несуществующую, а мошенники такие фейковые библиотеки создают специально, чтобы подсунуть вредный код. Это стоит проверять.
Чего браузер не может
Полноценного бэкенда не будет. Передать данные в вашу внутреннюю LMS не выйдет, пока на её стороне не сделана встречная интеграция: VPN и firewall браузерное приложение не пробьёт. Для таких вещей нужен маленький сервер, который может крутиться хоть на вашем ноутбуке, ключ доступа и отдельный файл. Как всё это настроить, модель подскажет.
Как это превращается в SCORM
Любое такое приложение упаковывается в SCORM. Попросите модель дописать второй файл, манифест, положите его рядом с html и запакуйте в zip.
То, над чем раньше мучились днями, верстая интерактивы в iSpring, Articulate и Adobe, где вечно что-то нельзя, теперь собирается за часы. Кейсы Владимир показал рабочие. Система рандомизации команд для чемпионата по промптингу в фарм-компании, которая учитывала даже пол участников и спортивно-оздоровительную часть. И система приёма и оценки заданий для чемпионата крупного банка, собранная на Google-таблицах в роли базы данных: ИИ проверял ответы и выставлял баллы в рейтинг.
Где проходит граница
Всё это только фронтенд. Для телеграм-бота или настоящего бэкенда браузера мало.
Один файл годится для простого. В сложном приложении, чтобы добавить одну кнопку, модель переписывает файл целиком, а на третий-четвёртый раз начинает ломать и забывать старое. Дальше нужны специальные среды, которые видят десятки файлов и правят их по строчке.
Разница между моделями небольшая. DeepSeek, ChatGPT и Qwen дают примерно одинаковый код, Claude лучше держит большие файлы, DeepSeek его недавно нагнал. На задачах такого уровня вы разницы не почувствуете.
Закончил Владимир так: «Добро пожаловать в вайб-кодинг, было почти не больно». И попросил зал поставить плюсик, если кодили вместе с ним. Экран залило реакциями.
В программе ИИ.Elements 2026 таких разборов будет больше: практика внедрения, ошибки и подводные камни, инструменты, которые работают уже сейчас, и честный разговор о том, какие задачи ИИ отдавать не стоит. 16–17 сентября, онлайн. Программа и билеты: elearningelements.ru/ii