Сделаем небольшой сайт, который считает, сколько времени может освободить автоматизация. Начнём с готового примера, затем объясним нейросети, что хотим изменить. Самому писать программу не понадобится.
Что получится и что понадобится
На сайте три поля: сколько раз в месяц выполняется задача, сколько минут она занимает сейчас и сколько будет занимать после изменений. Результат — число свободных часов.
Нужны компьютер и браузер. Готовый пример можно открыть без регистрации и оплаты. Нейросеть понадобится, только если захочешь менять сайт. Её условия зависят от выбранного сервиса. Собственный адрес и размещение сайта оплачиваются отдельно.
Это работающий пример. Картинку можно увеличить нажатием.
Шаг 1. Попробуй сайт прямо сейчас
- Открой готовый калькулятор.
- В первом поле оставь 100 — столько задач выполняется за месяц.
- Во втором оставь 30 — столько минут раньше занимала одна задача.
- В третьем оставь 12 — столько минут она занимает теперь, вместе с проверкой.
- Нажми кнопку расчёта.
Что должно появиться: «Освободится 30 ч в месяц». Раньше уходило 50 часов, теперь — 20.
Теперь замени 12 на 40 и повтори расчёт. Сайт должен показать, что времени уходит больше. Это важная проверка: автоматизация не всегда ускоряет работу.
Шаг 2. Сохрани сайт себе
- Скачай готовый сайт в архиве. Архив — папка, упакованная в один файл для скачивания.
- На Windows нажми по файлу правой кнопкой и выбери «Извлечь всё». На Mac открой архив двойным нажатием.
- Открой получившуюся папку.
- Найди index.html и открой двойным нажатием. Если компьютер спросит программу, выбери браузер.
Что должно появиться: тот же калькулятор, который ты только что проверил.
В папке лежат три файла. Оставь их вместе:
| Файл | Для чего нужен |
|---|---|
| index.html | Текст и поля страницы |
| style.css | Цвета, шрифт и расположение |
| app.js | Сам расчёт |
Если страница открылась без оформления или не считает, проверь, что распаковал всю папку. Открытие одного файла прямо внутри архива может не сработать.
Шаг 3. Попроси нейросеть изменить сайт
Сначала сохрани копию рабочей папки. Затем прикрепи три файла к своему ИИ-помощнику, который умеет работать с файлами, и отправь задание:
У меня есть готовый калькулятор времени. Измени заголовок на «Сколько времени я трачу на отчёты». Добавь пояснение: в новое время нужно включать проверку и исправления. Расчёт не меняй. Верни три полных обновлённых файла с прежними именами и объясни, какие из них заменить. Не добавляй выдуманные отзывы и обещания экономии денег.
Скачай предложенные файлы в копию папки. Если сервис выдал только текст программы, попроси подготовить скачиваемые файлы или дать отдельную инструкцию для твоего сервиса. Не вставляй код в случайные места.
Что проверить: новый заголовок появился, а пример 100 / 30 / 12 по-прежнему даёт 30 свободных часов.
Если хочешь создать сайт с нуля
Можно дать нейросети такое задание вместо готовых файлов:
Сделай простой сайт-калькулятор на русском. Человек вводит число задач в месяц, минуты на задачу до изменений и после. Сайт считает часы до, часы после и разницу. Для 100 задач, 30 минут до и 12 после результат — 30 свободных часов. Если после стало дольше, честно покажи это. Пустые и отрицательные значения не принимай. Сайт должен работать на телефоне и открываться двойным нажатием на index.html. Верни три готовых файла: index.html, style.css и app.js. Без регистрации и формы заявки.
Ответ нейросети может отличаться от нашего примера. Не считай его готовым, пока не повторишь проверки ниже.
Шаг 4. Проверь сайт на простых примерах
| Что ввести | Что должно получиться |
|---|---|
| 100 задач, 30 минут до, 12 после | Освободится 30 часов |
| 100 задач, 30 минут до, 30 после | Время не изменилось |
| 100 задач, 30 минут до, 40 после | Потребуется примерно на 16,7 часа больше |
| 0 задач | 0 часов |
| Отрицательное число | Просьба исправить значение |
| Пустое поле | Просьба заполнить поле |
При ошибке отправь нейросети конкретное описание: «Ввожу 100, 30 и 40. Должно получиться увеличение времени на 16,7 часа, а сайт показывает экономию. Исправь расчёт и верни готовые файлы».
Меняй по одной вещи. Так проще понять, какое изменение помогло, а какое сломало результат.
Шаг 5. Посмотри на сайт с телефона
Открой ссылку на готовый пример на телефоне. После публикации своего сайта повтори проверку по своему адресу.
Так выглядит пример на узком экране. Все изображения в статье открываются крупнее.
Проверь три вещи: текст читается без увеличения; в поля удобно вводить числа; для чтения не приходится двигать всю страницу влево и вправо. Если что-то мешает, сделай скриншот и опиши проблему нейросети обычными словами.
Шаг 6. Подготовь публикацию
Пока файл открывается только у тебя на компьютере. Чтобы сайт увидели другие, его нужно разместить в интернете.
Потребуется хостинг — сервис, где хранятся файлы сайта. Для собственного адреса также нужен домен. Кнопки в панелях хостинга разные. Передай поддержке такой запрос:
Хочу разместить простой сайт из трёх файлов: index.html, style.css, app.js. Помогите создать отдельную папку сайта, подключить мой домен и защищённый адрес HTTPS. Другие сайты в аккаунте не заменять. Подскажите, куда загрузить файлы.
После загрузки открой адрес и повтори расчёт 100 / 30 / 12. Проверь сайт на телефоне.
Наш скачиваемый пример скрыт от поисковиков специальной настройкой. Для собственного публичного сайта попроси исполнителя убрать запрет индексации и заменить заголовок, описание и контакты на твои. Уточнение для исполнителя есть ниже.
Что делать дальше
Сначала получи один работающий инструмент. Добавление формы заявки, оплаты или личного кабинета — отдельная задача. Красивая кнопка «Отправить» ещё не означает, что заявка куда-то приходит.
Чтобы оценить пользу в деньгах, открой калькулятор окупаемости. Если нужен помощник в переписке, посмотри инструкцию по Telegram-боту.
Дополнительно для публикации
Этот блок можно передать специалисту, который размещает сайт.