Создание кастомного интерактивного мини сайта с ИИ без платных сервисов
Предисловие
У любого последователя создания nocode сайтов может возникнуть проблема: хочу создать то‑то, но у сервиса нет этой функции, при этом сервис прекрасный: хорошая цена, обширная функциональность, доступность эксклюзивных функций и т. д. То есть менять на другой нет смысла, но того что я хочу — нет.
Этот рассказ о том, как я пытался решить эту проблему и что из этого вышло.
Описание проблемы
Я пользуюсь WIX, который занимает первое место во многих рейтингах nocode создавальщиков сайтов. У меня есть сайт, где предлагаются различные услуги, цена которых зависит от нескольких опций, а к ним можно применить скидку. Скидки разные: некоторые можно суммировать, а некоторые — нет. Также доступны пакетные покупки, которые накладывают дополнительные скидки.
Я хочу, чтобы пользователь мог быстро узнать итоговую цену со скидками для каждого продукта. При этом ему должно быть видно, сколько он сэкономил на пакетной покупке и других акциях
1. Пробую опции
Я взял базовый промпт для начальной генерации и задал разным ИИ (бесплатным версиям на тот момент) вот результаты и мое мнение:
Промпт: создай код для сайта чтобы клиент мог рассчитать примерную цену сессии с учётом скидок и других опций. Добавь какое-то красивое оформление.
Рекомендуется Claude очень хорошо генерирует скелет и стили сайта, с новым предпросмотрщиком сайтов Artifacts ещё и можно моментально увидеть изменения не скачиваю файл. Вот сайт Artifacts который получился: https://claude.site/artifacts/3c60167e-c34f-491c-a476–14d03d8e6508
Вот код от Claude
Калькулятор цены сессии
Калькулятор цены сессии
Что мне ответил Claude
Конечно, я создам код для сайта с калькулятором цены сессии, включая скидки и дополнительные опции. Я также добавлю красивое оформление с использованием HTML, CSS и JavaScript. Вот код для такого интерактивного веб-приложения:
Калькулятор цены сессии
Click to open website
Этот код создает простой, но функциональный и стильный веб-сайт с калькулятором цены сессии. Вот краткое описание его функций:
Пользователь может ввести базовую цену сессии.
Можно выбрать длительность сессии (с шагом в 30 минут).
Есть возможность указать скидку в процентах.
Пользователь может выбрать дополнительные опции, которые увеличивают стоимость.
После нажатия кнопки «Рассчитать цену» скрипт вычисляет итоговую стоимость с учетом всех параметров.
Дизайн сделан в современном минималистичном стиле с использованием приятной цветовой схемы. Сайт адаптивен и будет хорошо выглядеть как на десктопе, так и на мобильных устройствах.
Вы можете скопировать этот код и сохранить его в файл с расширением .html, затем открыть его в любом веб-браузере. Если вы хотите внести какие-либо изменения или добавить дополнительные функции, я с радостью помогу вам это сделать.
ChatGPT очень хорошо вносит изменения в файл и улучшает сам проект (например добавляет в файл HTML возможность подтягивать данные с JSON файла проекта). Если просить с нуля, он делает просто маленький пример и/или рекомендует обратиться к специалисту.
Что мне ответил GPT 4o
Вот пример кода для сайта, где клиент может рассчитать примерную цену сессии с учетом скидок и дополнительных опций. Для оформления используется HTML, CSS и JavaScript.
HTML (index.html)
Session Price Calculator
Session Price Calculator
Estimated Price: $0.00
CSS (styles.css)
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
form {
display: flex;
flex-direction: column;
}
label {
margin-top: 10px;
}
input, select, button {
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background-color: #28a745;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
.result {
text-align: center;
margin-top: 20px;
}
.result h2 {
color: #333;
}
JavaScript (script.js)
function calculatePrice() {
const basePrice = parseFloat(document.getElementById('basePrice').value);
const discount = parseFloat(document.getElementById('discount').value);
const additionalOptions = parseFloat(document.getElementById('additionalOptions').value);
if (isNaN(basePrice) || isNaN(discount) || isNaN(additionalOptions)) {
alert('Please enter valid numbers');
return;
}
const discountedPrice = basePrice - (basePrice * (discount / 100));
const estimatedPrice = discountedPrice + additionalOptions;
document.getElementById('estimatedPrice').innerText = `$${estimatedPrice.toFixed(2)}`;
}
Этот код создаёт простую страницу, где пользователь может ввести базовую цену, скидку в процентах и выбрать дополнительные опции, после чего нажать кнопку «Calculate» для расчета итоговой стоимости.
GitHub Copilot не рассчитан на генерацию целого файла или внесение изменений, которые затрагивают весь файл, только на малые и локальные изменения. Если попробовать сделать что‑то глобальное, половина кода теряется. В нём делать не пробовал, только редактировал.
Mistral AI, если просить с нуля, делает просто маленький пример, как в спойлере внизу и при этом не рассчитанный на удобное использование
Что мне ответил Mistral
Creating a full website is beyond the scope of this platform, but I can provide you with a basic structure of how you might approach this using HTML, CSS, and JavaScript.
HTML:
Session Price Calculator
Session Price Calculator
CSS (styles.css):
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f0f0f0;
}
h1 {
text-align: center;
color: #333;
}
form {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 300px;
margin: 0 auto;
}
input[type="number"] {
width: 100%;
padding: 10px;
margin: 5px 0 10px;
border: 1px solid #ddd;
border-radius: 3px;
}
input[type="button"] {
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 3px;
cursor: pointer;
width: 100%;
}
input[type="button"]:hover {
background-color: #45a049;
}
#result {
text-align: center;
font-size: 18px;
margin-top: 20px;
}
JavaScript (script.js):
function calculatePrice() {
var duration = document.getElementById('duration').value;
var discount = document.getElementById('discount').value;
var options = document.getElementById('options').value;
var basePrice = duration * 50; // Assuming $50 per hour
var discountAmount = basePrice * (discount / 100);
var optionsPrice = options * 10; // Assuming $10 per option
var totalPrice = basePrice - discountAmount + optionsPrice;
document.getElementById('result').innerHTML = 'Total Price: $' + totalPrice.toFixed(2);
}
This is a very basic example and you may want to adjust it according to your needs. This code assumes that each session is $50 per hour, each discount is a percentage of the base price, and each additional option costs $10.
Заключение: Начальную генерацию кода лучше делать с Claude, потом лучше переходить на другой, Claude очень забывчивый. Я решил перейти на ChatGPT 4o, хотя можно попробовать и другие
2. Создаю сам сайт
Этап начальной генерации кода (создания скелета) — Claude Omni
Я сначала описал свой минисайт Claude. Когда дошёл до уровня, который мне нравится внешне, но не хватает функциональности и Claude уже начинает тупить, забывая предыдущие функции (в тот момент был только один файл с кодом, где было всё: стили, скрипт и HTML), перешёл на ChatGPT 4o.
Этап улучшений и доработки — ChatGPT 4o
Скопировал весь код из файла, в тот момент он был рабочим, но в нём не хватало некоторых функций и опций. Потом просто начал задавать в ChatGPT, что я хочу и он изменял под мои требования.
Вот варианты создания, которые я пробовал или мне приходили в голову:
Только HTML | HTML + JSON | HTML + база данных (от Microsoft или SQL) | |
Описание | Всё в одном файле: стиль, скрипт и оформление | Оформление, стиль и скрипт в HTML, а данные в файле JSON | Оформление, стиль и скрипт в HTML, а данные в файле JSON |
Кому подходит | Всем, особенно тем кто хочет интегрировать на существующий сайт | Если надо создать отдельный сайт | Если надо создать отдельный сайт, особенно на хостинге. |
Специальные требования | Существующий сайт | Место для размещения | Купленный хостинг в случае SQL |
Плюсы | Всё в одном файле | Если надо изменить данные по опциям или добавить новые не надо пересоздавать весь код | Если надо изменить данные по опциям или добавить новые, не надо пересоздавать весь код, визуально видны опции и легче добавлять новые и изменять существующие. |
Минусы | При генерациях полностью пересоздается код, т. е. намного дольше делать. | Отдельный файл | - |
Чтобы взять какую‑то из опций, или использовать собственную, просто скажите об этом GPT. Или объясните, какие опции, условия, требования у вас есть и он вам покажет наилучшую опцию.
Рекомендации, когда будете создавать код:
У любого ИИ бывает, что предыдущие промпты в чате забываются, поэтому всегда просите его сохранить всё предыдущие правки за исключением тех, которые вы просите изменить прямым текстом. Также проверяйте на глаз и в браузере каждую версию кода.
Если пользуетесь ChatGPT, он при каждой правке будет выдавать весь код заново, так что лучше разделить на несколько файлов и просить его генерировать только те файлы, которые он изменяет. Например, разделите на файл CSS, HTML, и файл данных JSON. Если вы хотите вставить это на ваш сайт, а не сделать отдельный, это вам не подходит.
Описывайте точно и будто для очень ленивого программиста, который, если ему не описать точно и подробно, найдёт возможность сказать, что этого не было в ТЗ.
3. Публикую сайт
Место публикации сайта зависит от того, как вы сделали проект и для чего вы его сделали.
Вставить HTML отрывок в сайт | GitHub Pages | Claude Artifacts | Через собственный хостинг | |
Уровень сложности | Низкий | Средний | Легче невозможно | Сложный |
Кому подходит | Когда нужно чтобы это был инструмент на сайте, а не отдельный сайт. | Кто не хочет платить за хостинг и согласен, чтобы домен сайта был оформлен в виде: https://username.github.io/sitename/. Есть возможность купить собственный домен. | Кому всё равно если сайт потеряется, и согласен чтобы сайт был на чужом домене с длинной ссылкой. | Кому важно иметь сайт у себя, если важна безопасность и недоступность кода. |
Что нужно | Код и существующий сайт, где вы это добавите | Иметь Github аккаунт и базовое понимание как с ним работать. | Аккаунт Claude и попросить у него создать сайт. | Купить хостинг |
Плюсы | Очень быстро вставлять и обновлять. | Полностью бесплатно, доступен бесплатный домен, можно изменять во встроенном редакторе. | Моментальные изменения и публикация, 100% бесплатно. | Сам используешь и поддерживаешь сайт, точно никто не получит доступ к закрытому коду. |
Минусы | Поскольку это просто HTML со встроенным скриптом и CSS возможна нехватка интерактивности. | В бесплатной версии GitHub для публикации сайта файлы обязаны быть публичными. | Длинная ссылка и чужой домен, публикуется результат генераций, добавить мелкие изменения нельзя. | Более сложный в обновлении. |
Послесловие
Я просто делюсь своим опытом и не считаю, что моя манера лучше или хуже. Мне очень хочется создать универсальный гайд, поэтому буду благодарен любой конструктивной критике, отзывам об использовании и конкретно описанным дополнениям. Я их всё (те которые будут правильными) внесу в этот пост.