Вайбкодинг с нуля: первый рабочий инструмент за вечер — калькулятор услуг со ссылкой для клиента

У вас есть прайс — в голове, в заметках, в переписке. И каждый второй разговор с клиентом начинается с «а сколько это будет стоить». За вечер на месте этого разговора может встать калькулятор: человек выбирает услугу, видит сумму, скачивает смету в PDF. Кода вы при этом не напишете ни строчки — хотя код там будет, и заглядывать в него иногда придётся.

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

Обычно программирование без кода означает конструктор с блоками: перетащили, настроили, получили. Здесь механика другая. Код пишется полностью — обычный HTML с CSS и JavaScript внутри, — просто пишет его модель, а вы описываете результат словами и проверяете глазами. Откуда взялось название и почему подход работает, разобрано в материале что такое вайбкодинг.

Собирать мы будем артефакт — один самодостаточный файл, который открывается в панели рядом с чатом. Есть ещё проекты: много файлов, зависимости из npm, настоящий сервер. Для калькулятора проект не нужен и даже мешает: он работает только в режиме «Задачи», тратит нейроны за каждую минуту и на бесплатном тарифе недоступен вовсе. К проектам вернёмся в конце, когда станет видно, где проходит граница.

По умолчанию отвечает Gemini 3.7 Flash: она доступна на бесплатном тарифе и держит контекст в 1 048 576 токенов — для одного калькулятора это запас с многократным перекрытием. Если код важнее скорости, с тарифа «Старт» открывается Claude Sonnet 5. Подробности по обеим — в разборах Gemini 3.7 Flash и Claude Sonnet 5 для кода, а общий принцип выбора — в гайде какую модель выбрать.

Копаться в каталоге не обязательно: в выборе модели есть режим «Лайт», где вместо списка моделей предлагаются сценарии. В режиме «Задачи» среди них — «Код и разработка», «Сложные проекты», «Экономный агент». Размер самого каталога зависит от тарифа: на бесплатном видно 52 модели из 95, на «Старте» и «Стандартном» — 81, с PRO — все 95. Чем «Чат» отличается от «Задач», разобрано отдельно: режимы «Чат» и «Задачи».

Сделай HTML-артефакт — калькулятор стоимости моих услуг.

Услуги и цены (это пример, замените на свои):
— лендинг: 60 000 ₽
— интернет-магазин: 180 000 ₽
— доработка сайта: 2 500 ₽ за час

Что нужно:
— выбор услуги из списка, поле «количество»;
— галочки допов: срочность +30%, тексты +15 000 ₽;
— итог пересчитывается сразу при любом изменении, без кнопки «рассчитать»;
— деньги считай через decimal.js, не обычными числами;
— светлое оформление, одна колонка, крупный шрифт, чтобы читалось с телефона.

Важно: в артефакте заблокирована сеть. Никаких внешних шрифтов, картинок по ссылке и запросов к API — всё внутри файла.

В ответ откроется панель с готовым калькулятором, а в чате останется карточка с картинкой-превью. Ширину панели можно тянуть мышью, и она запомнится; в док-режиме панель встаёт рядом с чатом — чат сжимается, но остаётся рабочим. Первым делом потыкайте: посчитайте два лендинга со срочностью и сверьте сумму на калькуляторе телефона.

Первая версия обычно считает то, что вы просили, но выглядит скучно и не объясняет цифру. Клиенту важно видеть, из чего сложилась сумма. Формулируйте правку узко: что меняем и что не трогаем. Больше готовых формулировок — в промптах для вайбкодинга.

Оставь всё как есть, поменяй только блок итога.

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

Остальную разметку, стили и логику расчёта не трогай.

Библиотеки лежат на платформе локально и подключаются без интернета — в том числе jsPDF и jsPDF-AutoTable для документов и decimal.js для денег. Второе не формальность: во float деньги считать нельзя, копейки начнут разъезжаться на скидках и процентах. Прямо так модели и пишите.

Добавь кнопку «Скачать смету в PDF».

Используй jsPDF и jsPDF-AutoTable из локальных библиотек платформы, интернет не подключай.

В PDF должно быть: заголовок «Смета», сегодняшняя дата, таблица со строками расчёта, итог внизу.
Кириллица обязана отображаться корректно. Шрифт по ссылке не подключай — если стандартный кириллицу не поддерживает, реши это внутри файла и напиши мне, как именно.
Имя файла: smeta-ГГГГ-ММ-ДД.pdf

Сломается обязательно — это нормальная часть процесса, а не признак того, что вы делаете что-то не так. Неприятность в другом: снаружи ошибка выглядит одинаково немо. Пустая панель, белый экран, кнопка не реагирует — а почему, непонятно.

Приём, который экономит вечер: попросите модель встроить показ ошибок прямо в файл. Тогда вместо белого экрана вы увидите текст, который можно скопировать в чат. Формула рабочего сообщения дальше простая: что не работает, текст ошибки, «остальной код не переписывай».

Добавь в артефакт собственный показ ошибок.

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

Логику расчёта не меняй.

История версий — ваша страховка. Возврат к прежней версии ничего не стирает: он создаёт новую версию с прежним содержимым, история остаётся линейной. Поэтому откатываться можно смело и часто. Ограничение одно: 1 МБ на версию, для калькулятора это недостижимо далеко.

Артефактом типа html или svg можно поделиться по ссылке — получателю регистрация не нужна, он просто открывает страницу и пользуется. У артефакта есть картинка-превью, она подтягивается в мессенджер, так что ссылка выглядит как нормальная ссылка, а не как голый адрес. Это и есть финал вечера: работающий инструмент, который живёт по постоянной ссылке.

React в артефакте — отдельная история со своими правилами: компонент объявляется как function App(), монтирует его платформа сама. Что там можно и чего нельзя, разобрано в материале React-артефакты.

Если нужен настоящий сервер, npm-зависимости и работающий интернет — это уже проект, а не артефакт. Главная разница именно в сети: в проекте CDN и npm-пакеты работают, в артефакте — нет. Runtime на выбор: node или static. Ограничения свои: до 100 файлов, файл до 512 КБ, весь проект до 5 МБ, до 20 версий и до 3 проектов на пользователя.

Работают проекты только в режиме «Задачи», запуск стоит 1 нейрон за минуту работы песочницы (нейрон ≈ 3 ₽), сессия живёт 60 минут, после чего облако гасит песочницу — это штатно, файлы остаются у платформы, повторный запуск собирает всё заново. У модели есть инструменты создать проект, дописать и отредактировать файлы, поискать по ним и прочитать логи. Инструмента «запустить» у неё нет: кнопку нажимает только человек.

Готовый проект скачивается одним zip-архивом, а на вкладке «Что изменилось» видно построчный дифф между версиями — удобно, когда после очередной правки перестало собираться. Запущенное приложение показывается во фрейме на домене e2b.app.

На командных тарифах суточный лимит — 240 минут. Минуты списываются по факту работы песочницы: если процесс упал через двадцать секунд, время всё равно посчитано. Закрыли панель — уборщик гасит песочницу, и списание прекращается. Как выбрать ступень под свои задачи — в гайде какой тариф выбрать, а как не сжигать нейроны зря — в как тратить меньше нейронов.

Калькулятор — просто удобный первый предмет. Ровно тот же цикл — описать словами, потыкать, поправить точечно, при ошибке скормить её текст модели — работает для чек-листа приёмки объекта, интерактивного прайса, графика загрузки по месяцам, генератора QR-кодов на визитки, таблицы с фильтрами по вашим данным, схемы процесса. Библиотеки для всего этого уже лежат локально: Chart.js и ECharts для графиков, Tabulator и AG Grid для таблиц, Mermaid для схем, SheetJS для Excel, PapaParse для CSV, qrcode для QR.

Меняется только первый промпт. Всё остальное — привычка формулировать узко и не бояться откатов — появится примерно к третьему артефакту. Если дальше потянет в код всерьёз, следующая точка — подборка нейросетей для кода.

Начать можно на бесплатном тарифе: артефакты там работают так же, как на платных, и не стоят нейронов сверх обычного ответа модели. Скопируйте первый промпт, подставьте свои услуги и цены — дальше по шагам. Когда упрётесь в 15 сообщений к платным моделям за 4 часа или захотите проекты и поиск в интернете, следующая ступень — «Старт» за 890 ₽.