Свой калькулятор стоимости для ремонта: как собрать через вайб-кодинг

Делюсь этим с удовольствием. В кейсе о калькуляторе расчёта стоимости ремонта показан близкий сценарий, а ниже я собрал пошаговую инструкцию из десяти действий с готовым промптом к каждому рабочему шагу. Копируй его, описывай свою задачу обычными словами и собирай решение под себя. Такой подход подходит не только для ремонта, но и для задачи «калькулятор стоимости забора», автосервиса, салона, клиники или небольшой бригады.

А началось всё с ручного пересчёта каждой заявки.

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

Каждый день повторяется один и тот же разговор. Сначала я прошу площадь, количество комнат, состояние стен и потолка. Потом открываю прайс, считаю комнаты отдельно, уточняю, нужна ли подготовка стен, и вручную собираю ответ. Если данных не хватает, приходится возвращаться к переписке и задавать ещё вопросы.

Проблема не в самой формуле. Сложно держать в голове все условия, когда параллельно идут замеры, закупки и чистовые работы на разных объектах. Вечерняя переписка растягивается, а часть обращений остаётся без нормального ответа.

Поэтому я собрал одну страницу с правильными вопросами для клиента. Клиент сам выбирает параметры, а я получаю уже понятную заявку. Окончательную цену это не заменяет: без замера и проверки объекта точную смету всё равно нельзя обещать.

Как рассчитать стоимость ремонта на сайте?

Раньше я начинал с фотографии и пытался сам восстановить по ней весь объём работ. Теперь логика начинается раньше. Клиент выбирает комнаты, указывает площадь и отмечает, нужна ли подготовка стен и потолка. Отдельно выбирает чистовую отделку и дополнительные работы.

На странице не должна появляться одна красивая цифра без пояснений. В расчёте видны строки:

• комната;
• площадь;
• подготовка стен;
• подготовка потолка;
• чистовая отделка;
• дополнительные работы;
• предварительная стоимость.

Так клиент понимает, из чего получилась сумма. Я вижу состав будущего разговора: клиент уже указал, что именно хочет сделать.

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

Цена на странице остаётся предварительной. После неё нужен замер. На объекте могут обнаружиться перепады стен, дополнительные слои покрытия или другие обстоятельства, которых не видно по фотографии. Калькулятор только отсекает пустые обращения и сокращает ручной пересчёт.

Я не стал добавлять в страницу всё, что можно придумать для ремонта. Чем больше лишних полей, тем сложнее клиенту пройти форму. Оставил те вопросы, которые действительно влияют на предварительный расчёт и на следующий разговор.

Почему своя страница лучше купленного сервиса?

Мне нужна была понятная страница под мой прайс и правила конкретного дела. В одном деле подготовка стен считается отдельно, в другом она уже включена в пакет. Где-то клиент выбирает комнату, где-то важнее тип основания. Эти правила нельзя заранее одинаково задать для всех.

С собственной страницей я меняю таблицу и формулу под действующую логику. Если появляется новое правило, его можно описать помощнику обычными словами и проверить на тестовых данных. Не приходится ждать ответа поддержки или искать подходящий пункт в настройках.

У готового сервиса есть свои плюсы. Не надо собирать структуру с нуля. Часто уже есть оформление, публикация и уведомления. Но за это приходится принимать чужие ограничения. Новое поле может оказаться недоступным на нужном тарифе. Связка услуг может работать не так, как принято у меня.

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

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

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

Из чего складывается калькулятор стоимости ремонта?

Я разделил конструкцию именно так, чтобы каждую часть можно было проверить отдельно.

Google Sheets со справочниками. В Google Таблицах лежат услуги, единицы измерения, цены и дополнительные условия. Отдельно можно хранить список комнат, типы основания, варианты подготовки стен и виды чистовой отделки.

Я сделал поля выбора раскрывающимися списками. Google прямо описывает такую возможность:

В справке Google описаны раскрывающиеся списки, которые можно создавать прямо в ячейках Google Таблиц: справка о раскрывающихся списках в Google Таблицах.

Так меньше ошибок в названиях. Клиент или я не введём одну услугу тремя разными способами, и формула сможет найти её в справочнике.

Страница с формой. Здесь клиент выбирает комнаты, площадь и состав работ. Расчёт должен меняться сразу, без перезагрузки страницы. Если форма собирает имя и телефон, перед публикацией добавь рядом с полями ссылку на действующую политику конфиденциальности и отдельный unchecked-чекбокс согласия на обработку персональных данных.

Apps Script. Он связывает форму и таблицу. Скрипт получает параметры, проверяет обязательные поля, подтягивает цены, рассчитывает сумму и записывает строку заявки.

Чтобы опубликовать веб-приложение, я добавляю doGet(e) или doPost(e), которые возвращают HTML- или текстовый результат. Это указано в документации Google:

Telegram. После сохранения заявки скрипт отправляет мне сообщение. В нём можно показать выбранные комнаты, параметры ремонта, предварительную сумму, имя и телефон клиента.

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

Сколько стоит собрать калькулятор и что поставить?

Для начала я ставлю две программы, а ещё нужны аккаунт Google и Telegram-бот:

1. Visual Studio Code. Это редактор, в котором открывается папка проекта и видны файлы. Сам код руками писать не нужно. Я использую его как рабочее место, где помощник создаёт и меняет файлы; рабочий процесс с Claude Code разобран в отдельной инструкции.

2. Claude Code. Он встраивается в редактор и работает внутри проекта. Я описываю задачу словами: что должна считать форма, какие поля обязательны, куда записывать заявку. Помощник создаёт техническую часть и объясняет, что изменил.

3. Google-аккаунт и таблица. В таблице лежат справочники и заявки. Apps Script работает рядом с таблицей и публикует страницу.

4. Telegram-бот. Он нужен для уведомления о новой заявке. Для отправки сообщения заранее получи корректный chat_id; способ его получения зависит от сценария бота. Храни токен и chat_id в настройках проекта, а не в коде страницы.

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

Claude Pro стоит 20 долларов в месяц официально. Через найденный российский сервис оплаты цена составляла около 2 599 ₽ в месяц на 19 августа 2026 года. Посредник не является официальным партнёром Anthropic, поэтому это не официальный рублёвый тариф.

У Claude общий лимит для работы в веб-интерфейсе, поддерживаемых редакторах и Claude Code. Лимит зависит от длины и сложности диалога и сбрасывается по скользящему пятиичасовому окну. После исчерпания лимита может понадобиться ждать сброса, менять тариф или отдельно оплачивать usage credits.

Apps Script и Telegram тоже имеют ограничения. У Google Apps Script есть квоты на время выполнения, запросы, триггеры, одновременные запуски и отправку писем. Для потребительских аккаунтов в документации Google указано 100 получателей писем в сутки, для Google Workspace - 1500. Эти лимиты могут меняться.

Подписку на помощника надо сразу считать постоянной статьёй расходов. Она не исчезает после первой сборки, если ты хочешь продолжать менять страницу и собирать соседние автоматизации.

Как сделать онлайн-калькулятор ремонта без программирования?

1. Создай папку проекта.

   Установи VS Code, создай папку remont-kalkulyator и открой её в редакторе. Рядом подготовь Google-таблицу с листами Услуги, Параметры, Заявки.

   Разобрать задачу до начала сборкиСкопировать промпт

   У меня небольшая бригада по ремонту квартир. Я веду несколько объектов одновременно. Заявки приходят с сайта, телефона и мессенджеров. Клиент присылает фотографии и короткое описание, а я вручную считаю предварительную стоимость. Собери для меня калькулятор на сайте: клиент выбирает комнаты, площадь, состояние стен и потолка, подготовку стен и чистовую отделку, получает предварительный расчёт и оставляет контакты. Пока не пиши код. Разбери задачу простыми словами, перечисли данные, обязательные поля, справочники и порядок сборки. Задай вопросы, если чего-то не хватает. Сохрани план в файл plan.md в папке проекта.

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

2. Собери справочники услуг.

   Открой Google Sheets и внеси реальные позиции из прайса. Не начинай с красивой формы: сначала проверь, что услуги и цены читаются отдельно.

   Подготовить структуру таблицыСкопировать промпт

   Создай структуру Google Sheets для калькулятора ремонта. Нужны листы: «Услуги», «Параметры», «Заявки». На листе «Услуги» предусмотрены колонки: название работы, единица измерения, базовая цена, применяется к комнате или ко всей заявке, обязательность уточнения. На листе «Параметры» сделай списки комнат, вариантов состояния стен и потолка, видов подготовки стен и чистовой отделки. На листе «Заявки» подготовь заголовки: дата, комнаты, площади, состояние основания, выбранные работы, предварительная стоимость, имя, телефон, вопрос для уточнения, статус. Не добавляй выдуманные цены. Объясни, какие строки я должен заполнить своими данными.

   В ответе должен появиться понятный набор листов и колонок. Цены заполни по своему прайсу, а не по примеру из промпта.

3. Задай поля формы.

   Теперь опиши помощнику, что именно должен выбрать клиент. Каждое поле связывай с расчётом или с вопросом для уточнения.

   Создать поля формы ремонтаСкопировать промпт

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

   Правильный результат виден сразу: форма не позволяет молча отправить пустые обязательные поля и объясняет, что именно надо добавить.

4. Добавь формулу расчёта.

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

   Настроить предварительный расчётСкопировать промпт

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

   Внутри помощник может использовать IF, IFERROR, VLOOKUP или XLOOKUP. Тебе не надо запоминать эти функции. Проверь другое: совпадают ли строки с прайсом и не появляется ли цена при неполных данных.

5. Проверь расчёт без отправки заявки.

   Выбери одну комнату, укажи площадь и несколько работ, затем поменяй значение. Расчёт должен измениться без перезагрузки страницы.

   Проверить расчёт на тестовых данныхСкопировать промпт

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

   Первый результат должен быть виден на странице сразу. Я проверяю результат глазами: форма должна задавать мои вопросы и считать по моему прайсу. Этот подход называют вайб-кодингом.

6. Запиши заявку в таблицу.

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

   Записывать заявку в Google SheetsСкопировать промпт

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

   После отправки найди строку в таблице. Повтори отправку и убедись, что одна и та же попытка не создала вторую заявку.

7. Подключи уведомление Telegram.

   Создай бота через официального бота Telegram, отправь ему первое сообщение и сохрани токен с chat_id в настройках проекта, а не в HTML-странице.

   Отправлять заявку в TelegramСкопировать промпт

   Добавь уведомление владельцу в Telegram после записи заявки в Google Sheets. Сообщение должно содержать статус заявки, комнаты, площади, состояние стен и потолка, подготовку стен, чистовую отделку, дополнительные работы, предварительную стоимость, имя, телефон и вопрос для уточнения, если он есть. Используй POST-запрос к методу sendMessage. Токен и chat_id не вставляй в HTML и не показывай на странице, храни их в настройках проекта или безопасном хранилище. Записывай ответ Telegram в журнал ошибок, но не показывай клиенту секретные данные.

   Правильный результат: после тестовой отправки строка появляется в таблице, а в Telegram приходит одно понятное сообщение. Если бот молчит, не подставляй токен в код страницы наугад.

8. Оформи страницу для клиента.

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

   Оформить страницу калькулятораСкопировать промпт

   Оформи страницу калькулятора ремонта для клиента с телефона и компьютера. Раздели её на понятные этапы: комнаты и площадь, состояние стен и потолка, подготовительные работы, чистовая отделка, дополнительные работы, предварительный расчёт, контакты. Показывай выбранные работы и цены отдельными строками. Добавь заметное пояснение: расчёт предварительный, окончательная стоимость определяется после замера. Не добавляй регистрацию, личный кабинет, оплату и лишние поля. Проверь, чтобы кнопка отправки не нажималась повторно, пока первая заявка обрабатывается.

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

9. Проверь сквозной сценарий.

   Отправь тестовую заявку с уникальным маркером, например ТЕСТ-РЕМОНТ-001. Проверь страницу, таблицу и Telegram по одной цепочке.

   Проверить путь заявки целикомСкопировать промпт

   Проверь сквозной путь тестовой заявки от формы до Google Sheets и Telegram. Отправь или смоделируй заявку с уникальным маркером «ТЕСТ-РЕМОНТ-001». Проверь, что клиент видит результат без перезагрузки, заявка записывается одной строкой, все выбранные параметры сохраняются, сообщение приходит в Telegram, а повторная отправка не создаёт дубликат. Если что-то не работает, сначала покажи симптом и место сбоя, потом предложи точечную правку. Не переписывай весь проект целиком.

   Если страница показывает «готово», это ещё не доказательство. Ищи именно маркер в таблице и Telegram. Успешный экран может появиться даже тогда, когда запись дальше не прошла.

10. Опубликуй веб-приложение.

    После тестов попроси помощника подготовить публикацию через Apps Script и объяснить, какие доступы появятся.

    Подготовить публикацию калькулятораСкопировать промпт

    Подготовь проект Apps Script к публикации как веб-приложение. Проверь, что HTML-страница открывается через doGet, а серверные функции получают данные формы, записывают заявку в Google Sheets и отправляют уведомление в Telegram. Перед публикацией перечисли нужные разрешения и секреты. Объясни простыми словами, какие настройки выбрать при развёртывании и как получить URL. После публикации проверь страницу в отдельном окне и повтори сквозной тест с маркером «ТЕСТ-ПУБЛИКАЦИЯ-001». Не называй расчёт окончательной сметой.

    Google выдаст адрес веб-приложения. Его можно разместить отдельно или встроить через iframe, если платформа сайта разрешает такое встраивание. Сначала открой адрес напрямую, потом проверяй размещение внутри сайта.

Что появится в папке после сборки?

В проекте может быть файл index.html или Index.html. В нём находятся разметка страницы, стили и клиентский JavaScript. Название зависит от того, как помощник создаст проект.

Также появятся серверные файлы Apps Script. В них находятся функции:

• получения страницы;
• проверки полей;
• расчёта стоимости;
• записи строки в таблицу;
• отправки сообщения в Telegram;
• обработки ошибок.

В одной папке проекта могут лежать index.html, файл серверных функций и файлы настроек. Точную структуру лучше попросить помощника описать после сборки.

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

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

Не надо без причины править связку публикации, серверные функции и секреты Telegram. Если калькулятор уже считает и записывает заявки, любое изменение сначала проверяй на тестовой заявке.

Что делать, если заявка не приходит?

1. Форма показывает успех, но строки нет. Отправь тестовую заявку с уникальным маркером и найди его в таблице.

Форма калькулятора показывает сообщение об успешной отправке, но заявка с маркером «ТЕСТ-ПРОПАЛА-001» не появилась в Google Sheets. Проверь путь от нажатия кнопки до записи строки: получение данных формы, обязательные поля, идентификатор таблицы, имя листа и права Apps Script. Посмотри журнал выполнения. Не переписывай весь проект. Сначала назови вероятную точку сбоя, затем предложи небольшую правку и тест, который подтвердит исправление.

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

2. После повторной отправки появились дубли. Такое бывает после сетевого таймаута или повторного нажатия кнопки.

В Google Sheets появились две одинаковые заявки после одной отправки калькулятора. Найди причину повторного добавления строки. Добавь уникальный submission_id для каждой загрузки формы, передавай его вместе с данными и проверяй на сервере до записи в таблицу. При повторе возвращай уже созданный результат и не отправляй второе сообщение в Telegram. Покажи, какие файлы меняешь, и проверь сценарий с двумя одинаковыми отправками. Не меняй формулу расчёта.

Одной блокировки кнопки недостаточно. Она не защищает от повторного запроса после сетевого сбоя.

3. Apps Script упёрся в квоты. На тестах всё может работать, а потом перестать отправлять уведомления или показать ошибку Service invoked too many times.

Калькулятор ремонта перестал отправлять уведомления, а в журнале появилась ошибка «Service invoked too many times». Проверь, сколько обращений делает одна заявка к Google Sheets, Telegram и другим сервисам. Найди повторные обращения внутри циклов, объедини операции в пакет, добавь запись ошибки и понятное сообщение для владельца. Не обещай, что квоты постоянны: укажи, какие лимиты зависят от типа аккаунта и текущих правил Google. После правки предложи тест с одной заявкой.

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

4. Telegram перестал присылать сообщения. Страница может продолжать считать, а бот уже не доставляет уведомления.

Калькулятор считает стоимость и записывает заявку в Google Sheets, но уведомление в Telegram не приходит. Проверь токен, chat_id, URL метода sendMessage, код ответа Telegram и журнал выполнения. Отдельно проверь ошибки 401, 403, 429 и сетевые таймауты. Не показывай токен в HTML и не вставляй секреты в ответ пользователю. Если причина не подтверждается, составь список проверок для владельца и не переписывай рабочую формулу расчёта.

Истёкший токен или сбой Telegram не всегда видно по странице. Если не получается найти причину самому, передай помощнику журнал выполнения и точный текст ответа API.

Сколько стоит своё решение и кому оно не подойдёт?

У uCalc базовый тариф стоит 460 ₽ в месяц, или 5 520 ₽ в год. У «Цифрового Осьминога» годовая стоимость при помесячной оплате составляет 36 000 ₽. Это цены готовых решений, а не итоговая стоимость всех возможных интеграций.

Для этой связки отдельная плата за саму страницу не заложена в расчёт; могут потребоваться домен, хостинг, тарифы платформы и собственное время. Но подписка Claude Pro остаётся постоянным расходом. Отдельно учти своё время, домен, платформу сайта, ограничения CMS и проверку изменений.

Собственная схема не подойдёт, если нужна сложная CRM-интеграция, высокая нагрузка, нестандартный дизайн или нет времени на проверку. Она также не подходит, если нужна готовая поддержка и некому разбираться с поломками.

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

Я бы не выбирал только по самой низкой цене. Сравни, сколько раз в месяц меняется прайс, кто будет исправлять ошибку и насколько критично получить заявку именно в эту минуту.

Что сделать сегодня, если не разбираешься в технологиях?

Сделай четыре коротких списка:

1. Выпиши комнаты и площади.
2. Определи подготовку стен и потолка.
3. Составь список чистовой отделки.
4. Добавь дополнительные работы и цены.

Рядом напиши, какие данные переводят заявку на уточнение. Например, нельзя фиксировать итог, если неизвестно состояние основания или состав подготовки.

После этого создай три листа: Услуги, Параметры, Заявки. Не пытайся сразу сделать идеальную страницу. Сначала добейся простого результата: выбранная комната, площадь, одна работа и понятная предварительная сумма.

Потом добавляй запись заявки и Telegram. Каждый новый кусок проверяй отдельной тестовой отправкой. Так легче понять, где именно появилась проблема.

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

Вопросы и ответы

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