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

Чтобы сделать калькулятор для сайта без программиста, опишите нейросети вроде Claude или ChatGPT логику расчёта: какие поля вводит клиент, какие цены и как складывается итог. Нейросеть напишет калькулятор одним HTML-файлом. Дальше вы встраиваете его на Tilda или WordPress через блок HTML-кода либо отдаёте клиентам отдельной ссылкой. Код руками писать не придётся.

В этом гайде соберём сквозной пример - калькулятор стоимости ремонта одним файлом. Разберём, как правильно сформулировать логику расчёта (это половина успеха), дам развёрнутый готовый промпт, покажу три способа поставить калькулятор на сайт и научу собирать заявки прямо в Telegram без сервера.

Коротко: словарик

• HTML-калькулятор - одна веб-страница с полями и кнопками, которая считает сумму по вашей формуле прямо в браузере клиента.
• Логика расчёта - правило, по которому складывается цена: базовая ставка, множители, надбавки. Именно её вы объясняете нейросети.
• Встраивание (embed) - вставка калькулятора на существующий сайт через блок HTML-кода.
• Хостинг статики - бесплатный сервис, который держит вашу страницу в интернете и даёт ссылку, если калькулятор нужен отдельно от сайта.
• Заявка - обращение клиента с выбранными параметрами и посчитанной суммой, которое падает вам, например, в Telegram.

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

Зачем калькулятор на сайте и что он даёт

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

Что даёт калькулятор бизнесу:

• Отсеивает не ваших клиентов. Кто увидел цену и она не подошла - не тратит ваше время. Кто увидел и остался - уже прогрет.
• Собирает заявки с контекстом. Вы получаете не просто «здравствуйте», а заявку с параметрами и суммой. Проще отвечать предметно.
• Работает круглосуточно. Считает ночью, в выходные, пока вы заняты.
• Выглядит солидно. Свой калькулятор на сайте - признак того, что бизнес системный.

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

Половина успеха - правильно описать логику расчёта

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

Базовая ставка - за что берёте деньги в основе. За квадратный метр, за час, за штуку, за километр. Пример: косметический ремонт - 4000 ₽ за м².

Множители - что меняет базовую ставку. Тип услуги, срочность, сложность. Пример: капитальный ремонт вместо косметического - другая ставка за м²; срочность +30% к сумме.

Фиксированные надбавки - что добавляется отдельной суммой независимо от объёма. Выезд за город, конкретная допработа, доставка материалов. Пример: демонтаж +800 ₽ за м², выезд за МКАД +2000 ₽ разово.

Выпишите на бумаге все составляющие своей цены в этих трёх категориях с конкретными цифрами. Это и есть техзадание для нейросети. Чем понятнее объясните - тем точнее посчитает калькулятор. Расплывчатое «посчитай ремонт» даст расплывчатый результат.

Готовый развёрнутый промпт для калькулятора

Открываете Claude или ChatGPT и даёте промпт ниже. Он написан так, чтобы получить один самодостаточный HTML-файл, готовый к встройке и к сбору заявок.

Ты фронтенд-разработчик. Напиши мне ОДИН самодостаточный HTML-файл -
калькулятор стоимости ремонта квартиры для встраивания на сайт. Требования:

СТРУКТУРА ФАЙЛА
1. Весь код (HTML, CSS, JavaScript) в одном файле, без внешних библиотек
   и подключаемых файлов. Должен работать открытием в браузере
   и вставкой в HTML-блок конструктора сайта.

ПОЛЯ ВВОДА
2. Тип помещения: выпадающий список (квартира, офис, дом).
3. Площадь в м2: числовое поле.
4. Тип ремонта: переключатель:
   - косметический - 4000 ₽/м2
   - капитальный - 8000 ₽/м2
   - дизайнерский - 14000 ₽/м2
5. Чекбоксы допработ (добавляются к цене за м2):
   - демонтаж +800 ₽/м2
   - электрика +1200 ₽/м2
   - сантехника +1500 ₽/м2
6. Чекбокс "срочно" - добавляет 30% к итоговой сумме.
7. Фиксированная надбавка "выезд за город" +2000 ₽ (чекбокс).

РАСЧЁТ
8. Итог считается и обновляется мгновенно при любом изменении полей,
   без кнопки "рассчитать". Показывай сумму крупно и заметно.
9. Все цены и коэффициенты вынеси в начало JavaScript в понятные переменные,
   чтобы я легко их поменял.

ЗАЯВКА
10. Кнопка "Оставить заявку" ведёт по ссылке в Telegram:
    https://t.me/МОЙ_USERNAME?text=... где в text подставлены
    выбранные параметры и итоговая сумма, чтобы у меня в личке
    сразу появилось готовое сообщение с заявкой.

ДИЗАЙН
11. Чистый современный вид, крупные поля и кнопки под палец,
    адаптив под телефон. Нейтральные цвета, чтобы вписался в любой сайт.

Выдай только код файла целиком, готовый сохранить как calc.html.
Добавь короткий комментарий, где менять цены и куда вписать мой Telegram username.

Цены и надбавки в промпте условные - подставьте свои из вашего разбора логики. Нейросеть вернёт код целиком. Скопируйте его, сохраните файлом calc.html (через «Блокнот» или TextEdit в режиме простого текста) и откройте двойным кликом для проверки.

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

Способ 1. Встроить калькулятор на Tilda

Если ваш сайт на Tilda, калькулятор ставится через специальный блок.

1. Откройте нужную страницу в редакторе Tilda.
2. Нажмите добавить блок и найдите блок «T123» - HTML-код (в разделе «Другое»).
3. Откройте его содержимое и вставьте туда код калькулятора от нейросети целиком.
4. Сохраните и опубликуйте страницу.

Калькулятор появится на странице как встроенный элемент. Важный момент: в блок HTML-кода вставляйте именно содержимое между тегами, если нейросеть выдала полную страницу - попросите её «дай версию для встройки в HTML-блок Tilda, без тегов html, head и body, только сам калькулятор». Так он аккуратно ляжет внутрь страницы.

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

Способ 2. Встроить на WordPress

На WordPress тоже есть блок для произвольного кода.

1. Откройте страницу или запись в редакторе (Гутенберг).
2. Добавьте блок «Произвольный HTML» (Custom HTML).
3. Вставьте код калькулятора от нейросети.
4. Обновите страницу.

Если у вас старый классический редактор - переключитесь на вкладку «Текст» (не «Визуально») и вставьте код туда. Как и с Tilda, для встройки лучше версия без тегов-обёрток - попросите нейросеть отдельно.

Совет: не вставляйте калькулятор через плагины-конструкторы вслепую, некоторые из них ломают JavaScript. Если после вставки калькулятор не считает - попробуйте чистый блок «Произвольный HTML» или отдайте калькулятор отдельной ссылкой (способ 3).

Способ 3. Отдать калькулятор ссылкой

Если сайта нет или встраивать не хочется - выложите калькулятор отдельной страницей и давайте клиентам ссылку. Удобно для соцсетей, мессенджеров, визитки.

Возьмите ваш calc.html (полную версию со всеми тегами) и выложите на бесплатный хостинг статики. Проще всего Netlify Drop: перетаскиваете папку с файлом в окно браузера и получаете готовую ссылку с HTTPS за несколько секунд. Есть и другие варианты - GitHub Pages, Cloudflare Pages, Vercel.

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

Отдельный бонус: ту же HTML-страницу можно превратить в Telegram Mini App, чтобы калькулятор открывался прямо внутри мессенджера. Как это сделать через @BotFather, разбираем в гайде как собрать Telegram Mini App без программиста.

Как собирать заявки из калькулятора в Telegram

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

Как это устроено: кнопка «Оставить заявку» ведёт по ссылке https://t.me/ваш_username?text=..., где в части text заранее подставлен текст заявки с выбранными параметрами и суммой. Человек жмёт кнопку, у него открывается чат с вами, а в поле ввода уже готовое сообщение вроде «Заявка: капитальный ремонт, 60 м², электрика, сумма 552 000 ₽». Он отправляет - вы получаете заявку с полным контекстом.

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

Добавь в калькулятор кнопку "Оставить заявку". По нажатию она должна
открывать Telegram по ссылке https://t.me/МОЙ_USERNAME?text=... где в text
через перенос строки перечислены все выбранные параметры и итоговая сумма.
Текст заявки собирай из текущих значений полей на момент нажатия.

Плюс способа: работает без сервера, без бота, без настройки. Минус: нет автоматики и аналитики, заявки просто падают вам в личку. Для старта этого хватает с запасом.

Если заявок много и нужна автоматизация (складывать в таблицу, слать уведомления, вести воронку) - калькулятор связывают с Telegram-ботом. Как собрать такого бота нейросетью без программирования, разбираем в гайде как создать бота в Телеграме самому бесплатно.

Частые ошибки при сборке калькулятора

• Расплывчатая логика. Если не разложить цену на составляющие с цифрами, калькулятор посчитает не то. Сначала формула на бумаге, потом промпт.
• Не проверили на разных значениях. Прогоните калькулятор на крайних случаях: ноль, очень большая площадь, все галочки сразу. Так ловятся ошибки в формуле.
• Вставили полную страницу в HTML-блок. Для встройки нужна версия без тегов-обёрток, иначе вёрстка может поехать. Попросите нейросеть отдельную версию под встройку.
• Забыли про телефон. Больше половины людей смотрят с телефона. Обязательно проверьте калькулятор на мобильном после публикации.
• Не подставили свой Telegram. Кнопка заявки ведёт в никуда, если в ссылке остался МОЙ_USERNAME. Впишите свой реальный username.

Чек-лист: что у тебя теперь есть

• Понимание, как разложить цену на базовую ставку, множители и надбавки - основу калькулятора.
• Развёрнутый готовый промпт, по которому нейросеть пишет калькулятор одним HTML-файлом.
• Три способа поставить калькулятор: встройка на Tilda, встройка на WordPress, отдельная ссылка.
• Рабочий способ собирать заявки в Telegram без сервера - кнопкой со ссылкой.
• Список частых ошибок, чтобы не наступить на грабли при сборке.

Дальше по логике - либо показать калькулятор прямо внутри Telegram как Mini App (как собрать Telegram Mini App без программиста), либо автоматизировать заявки через бота (как создать бота в Телеграме самому бесплатно). А чтобы увереннее работать с нейросетью, которая собирает такие штуки, начните с Claude Code для нетехнарей.

Источники проверки способов встройки и хостингов: документация Tilda и WordPress, обзоры бесплатных хостингов статики по состоянию на июль 2026.