Сайт с калькулятором стоимости
Интерфейс предварительной оценки дизайн-проекта с понятными исходными данными и объяснением результата.
Учебный пример, созданный с помощью ИИ. Названия, проекты и цены вымышлены.
Живой пример сайта
Измените площадь и пакет. Итог равен площади, умноженной на учебную ставку за м².
Ваш дом.
Ваш ритм.
Попробуйте рассчитать стоимость дизайн-проекта. Площадь и состав пакета определяют предварительную оценку.
Все ставки учебные. Ремонт, мебель и материалы в расчёт не входят.
Демо показывает основную механику страницы. Его можно повторить и развить с помощью инструкции ниже; подключения форм, оплаты и публикации здесь нет.
Как это сделать с ИИ
Что подготовить
Зафиксируйте единицы, минимальное и максимальное значение, ставки и исключения. В примере все суммы учебные: это не предложение SmartLanding или студии дизайна.
Начните с любого удобного ИИ: ChatGPT, Claude, Gemini или DeepSeek. Работайте в одном диалоге и прикладывайте актуальный код при доработке.
- 01
Определите формулу вне интерфейса
Для демо: площадь 20–150 м² × ставка пакета 1 800 / 2 600 / 3 400 ₽ за м². Для вашего бизнеса замените её согласованной формулой и перечислите исключения.
Результат: Проверяемая формула с единицами измерения.
- 02
Соберите минимальную версию
Попросите ИИ добавить ползунок, выбор пакета и итог. Все изменения должны пересчитываться из одного состояния; не храните итог отдельно от исходных значений.
Результат: Один источник данных для формы и суммы.
- 03
Объясните результат
Покажите площадь, ставку и умножение рядом с итогом. Отделите предварительную оценку от окончательной сметы. Укажите, чего формула не учитывает.
Результат: Посетитель понимает, откуда появилась сумма.
- 04
Проверьте границы
Сверьте вручную минимум, максимум и каждый пакет. Пройдите ползунок стрелками на клавиатуре; проверьте вывод в узком окне и озвучивание результата.
Результат: Проверены сценарии, в которых чаще возникают ошибки.
Создайте, доработайте, проверьте
Отправляйте промпты по порядку. Первый создаёт основу, второй добавляет нужное поведение, третий помогает найти ошибки. Ответы разных моделей могут отличаться; это учебный сценарий, а не сравнение их качества.
01 · Создать основу
Замените поля в [скобках] на свои данные.
02 · Доработать поведение
Замените поля в [скобках] на свои данные.
03 · Проверить результат
Замените поля в [скобках] на свои данные.
Как открыть полученный сайт
- Попросите полный файл
index.htmlи сохраните его с этим расширением. - Откройте файл в браузере. Для видео положите предоставленные материалы по путям из кода.
- Проверьте действия и мобильный экран. Если ИИ выбрал React или другой стек, используйте инструкцию запуска, которую он приложил.
- Перед публикацией замените учебные материалы своими и подключите необходимые сервисы.
Что проверить вручную
- 60 × 2 600 = 156 000 ₽
- 20 × 1 800 = 36 000 ₽
- 150 × 3 400 = 510 000 ₽
- Выбор пакета сохраняет площадь
- Ползунок и radio доступны клавиатурой
- Предварительный характер расчёта обозначен
Если что-то пошло не так
ИИ выбирает ставки сам
Передайте таблицу цен или явно назовите суммы учебными.
Итог расходится с выбранным пакетом
Вычисляйте его из текущего состояния, без второго независимого значения.
Слишком много полей
Оставьте только параметры, которые меняют оценку.
Попробуйте идею сайта в VidLix бесплатно
Перенесите свой бриф в выбранный сценарий конструктора и сравните, как он подходит вашей задаче. Начать можно с примеров на сайте VidLix.
Открыть vidlix.ruДоступ к редактору — по заявке. Условия подключения и публикации смотрите в VidLix; перенос произвольного кода и эффектов нужно уточнять отдельно.
Квиз-сайт с подбором путешествия
Открыть следующий разбор →