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

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

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

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

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

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

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

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

Разница в отдаче между «горячей» и «холодной» страницей огромная, вот два числа по данным Grow and Convert.

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

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

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

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

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

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

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

Вот как расходятся базовые ставки в примере ниже - от них и пляшет весь расчёт.

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

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

Разберём формулу на живом числе, чтобы было видно, как она собирается. Капитальный ремонт квартиры 60 м² с электрикой, срочно, без выезда за город:

• база: 8000 ₽/м² (капитальный) + 1200 ₽/м² (электрика) = 9200 ₽/м²
• за площадь: 9200 × 60 = 552 000 ₽
• срочность: 552 000 × 1,3 = 717 600 ₽

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

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

Открываешь 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. Открываешь Claude или ChatGPT в браузере, вставляешь промпт выше в поле ввода, жмёшь отправить.
2. Через несколько секунд нейросеть выдаёт длинный блок кода. Над блоком обычно есть кнопка Copy - жмёшь её, весь код копируется целиком.
3. Открываешь «Блокнот» (Windows) или TextEdit в режиме простого текста (Mac), вставляешь код, сохраняешь файл как calc.html. Важно, чтобы имя заканчивалось именно на .html, а не на .txt.
4. Находишь файл в папке и открываешь двойным кликом. Он откроется в браузере как обычная страница - это и есть твой калькулятор.
5. Вводишь площадь, тыкаешь чекбоксы, смотришь, как меняется сумма внизу.

Если что-то выглядит криво или считает не так - не переписываешь код руками. Возвращаешься в чат и словами говоришь, что поправить. Нейросеть выдаёт новую версию, ты снова сохраняешь и проверяешь. Так по кругу, пока не устроит.

Способ 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, для встройки лучше версия без тегов-обёрток, попроси нейросеть отдельно.

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

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

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

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

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

Три способа встройки: что выбрать под свою ситуацию

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

Для старта самый быстрый путь - отдельная ссылка. Даже если сайт на Tilda, сначала выложи калькулятор на Netlify Drop, проверь, что всё работает, и только потом встраивай на страницу. Так ты отделяешь проверку логики от возни с вёрсткой конструктора.

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

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

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

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

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

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

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

Примеры под задачу: 4 сценария из жизни

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

Клининг квартиры. Базовая ставка за м² зависит от вида уборки: поддерживающая 80 ₽/м², генеральная 150 ₽/м², после ремонта 250 ₽/м². Множитель за срочность «сегодня» +40%. Фиксированные надбавки: мытьё окон +200 ₽ за створку, химчистка дивана +1500 ₽. Поля калькулятора: площадь, вид уборки, чекбоксы допуслуг, чекбокс «нужно сегодня».

Грузоперевозки по городу. Базовая ставка за километр: газель 35 ₽/км, фура 90 ₽/км. Множитель за этаж без лифта. Фиксированные: подача машины +500 ₽, грузчики +600 ₽ за человека в час. Поля: тип машины, расстояние в км, количество грузчиков, этаж.

Фотосъёмка. Базовая ставка за час съёмки: 5000 ₽/час. Множитель за формат (студия дороже улицы). Фиксированные надбавки: обработка кадра +300 ₽ за фото сверх пакета, выезд за город +3000 ₽. Поля: тип съёмки, количество часов, число обработанных кадров.

Установка натяжных потолков. Базовая ставка за м²: матовый 350 ₽/м², глянцевый 450 ₽/м², тканевый 900 ₽/м². Фиксированные: каждый угол сверх четырёх +250 ₽, обвод трубы +400 ₽, встроенный светильник +600 ₽. Поля: площадь, тип полотна, число углов и светильников.

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

Как проверить, что калькулятор считает правильно

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

1. Контрольный пример на бумаге. Возьми один набор параметров, посчитай сумму вручную (или на обычном калькуляторе телефона). Введи те же значения в свой HTML-калькулятор. Числа обязаны совпасть до рубля.
2. Крайние случаи. Введи ноль в площадь - калькулятор не должен показывать бред или ошибку. Введи очень большое число, миллион метров - сумма должна оставаться читаемой, без «e+» и научной записи.
3. Все галочки разом. Отметь каждый чекбокс, выбери самый дорогой тариф и срочность. Проверь, что итог сходится с ручным расчётом и надбавки не задваиваются.
4. Проверка на телефоне. Открой калькулятор с мобильного. Поля должны нажиматься пальцем, сумма читаться, кнопка заявки работать. Больше половины людей смотрят именно с телефона.
5. Кнопка заявки. Нажми «Оставить заявку» сам. Должен открыться Telegram с готовым текстом, где стоят выбранные параметры и правильная сумма, а не заглушка МОЙ_USERNAME.

Если на любом шаге что-то не так - копируешь описание проблемы в чат нейросети, она чинит. Например: «при площади 0 калькулятор показывает NaN, покажи вместо суммы прочерк» или «на телефоне кнопка заявки уезжает за край экрана».

Что делать, если калькулятор не считает после встройки

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

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

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

Конфликт с другими скриптами страницы. Редко, но твой JavaScript спорит с чужим на той же странице. Проверка простая: та же страница калькулятора, выложенная отдельной ссылкой через Netlify Drop, работает всегда, потому что она одна и ей никто не мешает. Если по ссылке считает, а на сайте нет - дело в окружении сайта, и самый быстрый выход всё та же отдельная ссылка.

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

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

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

Что дальше: от калькулятора к своему мини-продукту

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

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

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

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

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

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