Вы описываете задачу.
ИИ предлагает код.
Вы проверяете результат.
Так можно попробовать вайбкодинг — работу над программой через задания для ИИ. Начнём с небольшой страницы: она посчитает стоимость заказа по цене и количеству.
В этом упражнении вы получите код, запустите его, проверите расчёт и попросите внести изменение.
Описать
Открыть
Проверить
Изменить
На телефоне можно изучить руководство и попробовать пример. Сохранение и правку своего файла здесь разбираем для компьютера.
Первое действие · ИИ-чат
Дайте ИИ конкретное задание
Откройте новый диалог в ИИ-чате, к которому у вас уже есть доступ. Скопируйте задание ниже и отправьте целиком. Доступ и лимиты зависят от выбранного чата.
Задание для первой версии
Сделай учебный калькулятор заказа на русском языке. Верни полный код одного файла index.html. CSS и JavaScript помести внутрь. Без библиотек, внешних ресурсов, сетевых запросов, сервера и установки пакетов. На странице нужны: — «Цена за штуку, ₽», начальное значение 200; — «Количество, шт.», начальное значение 3; — кнопка «Рассчитать» и итог 600 ₽ при начальных значениях; — кнопка «Вернуть пример»: возвращает 200, 3 и итог 600 ₽. Цена — от 0 до 1 000 000 ₽, максимум две цифры после запятой или точки. Количество — целое от 1 до 10 000. Пустые поля, буквы, отрицательные числа, дробное количество и значения вне границ должны давать понятную ошибку рядом с полем. При ошибке итог не показывай. После изменения полей скрой старый итог до расчёта. Считай деньги целым количеством копеек. Сделай аккуратную страницу с видимыми подписями полей, удобную на компьютере и телефоне. Сохрани управление с клавиатуры. Не добавляй оплату, доставку, скидки, аккаунты и базу данных. Верни весь HTML целиком, без пропусков.
В ответе должен быть полный HTML-код или файл index.html. Внешний вид может отличаться от нашего образца.
Следующее действие · Ваш компьютер
Сохраните файл и откройте его в браузере
Если чат позволяет скачать готовый index.html, сохраните его в отдельную папку, проверьте расширение и откройте через браузер. Инструкция ниже нужна, если вы получили текст кода.
Скопируйте весь блок от <!doctype html> до </html>. Обрамляющие код символы ``` в файл не добавляйте.
Откройте Блокнот и вставьте код.
Выберите «Файл → Сохранить как». Имя —
index.html, тип — «Все файлы», кодировка — UTF-8.В Проводнике включите «Вид → Показать → Расширения имён файлов». Проверьте окончание:
index.html.Нажмите на файл правой кнопкой → «Открыть с помощью» → выберите браузер.
Названия пунктов могут немного различаться в разных версиях Windows и Блокнота.
В браузере должны появиться поля цены и количества, кнопки и итог. Если открылся текст кода, посмотрите, что проверить.
Проверка · Ваш собственный файл
Проверьте, что страница действительно работает
Откройте получившийся файл и пройдите проверки. Отметки — ваш список выполненного, страница сама не проверяет ваш файл. Они действуют, пока открыта эта страница.
Отмечено 0 из 4 проверок
Также пройдите поля и кнопки клавишей Tab и сузьте окно браузера. Всё должно оставаться доступным.
Новая итерация · Тот же диалог
Попросите небольшое изменение
Сохраните рабочую версию отдельно. Затем продолжите тот же диалог с ИИ: добавим скидку и проверим, что прежний расчёт сохранился.
Задание на правку
Добавь в предыдущий калькулятор поле «Скидка, %», начальное значение 0. Разреши целые значения от 0 до 100. Вычитай скидку из общей суммы и округляй итог до копейки. Пустое поле и значения вне диапазона должны давать понятную ошибку. «Вернуть пример» должен возвращать скидку 0 и итог 600 ₽. Все прежние функции, ограничения и управление с клавиатуры сохрани. Пришли полный обновлённый index.html.
Сохраните новый ответ как index-v2.html и откройте в браузере. Если чат прислал отдельные строки для вставки, попросите весь файл целиком.
540 ₽
При скидке 0% должно остаться 600 ₽, при 100% — 0 ₽. Значения −1 и 101 должны давать ошибку. Для проверки округления: 199,99 ₽ × 3 со скидкой 50% → 299,99 ₽.
Нажмите «Вернуть пример»: скидка снова 0%. Затем повторите прежние проверки.
Если что-то не получилось
Сначала определите, на каком шаге возникла проблема. Так проще описать её ИИ и проверить исправление.
Какую модель выбрать?
Для первой попытки начните с доступной в вашем чате модели, которая умеет писать код. Оцените её на этом упражнении: вы уже знаете, что именно проверять.
Если сравниваете модели, давайте им одинаковое задание и используйте один список проверок. Один удачный ответ ещё не делает модель лучшей для всех задач.