Нейросеть, пишущий код помощник: сайт мастерской за вечер
Нейросеть пишущий код бесплатно: как я получила HTML-страницу мастерской с ценами и кнопкой «Позвонить» в LibraChat, что поменяла руками и где нужен программист.
О
Ольга
Основатель малого бизнеса, партнёр LibraChat
7 мин чтения
Фрилансер попросил за страницу-визитку 25 000 рублей и две недели. Нейросеть написала её код за один запрос, а я потратила вечер на правки и проверку. Речь о мастерской по ремонту обуви моей сестры: восемь услуг, цены, адрес, часы работы и кнопка, которая на телефоне сразу набирает номер. Если ты ищешь «нейросеть пишущий код», чтобы сделать простую страницу для своего дела, ниже четыре приёма, которые сработали, настоящий ответ LibraChat и честный список того, где без программиста не обойтись.
Фрилансер, конструктор или нейросеть, пишущий код помощник
Мастерская «Каблучок» работает пятый год. Клиенты находят её по карте и по сарафанному радио. Сестра давно хотела страницу, на которую можно дать ссылку: что чиним, сколько стоит, где мы, как позвонить. Ничего больше.
Варианты, которые мы рассматривали:
фрилансер: 25 000 рублей, две недели, правки за отдельные деньги;
конструктор сайтов: ежемесячная оплата и вечер на то, чтобы разобраться в шаблонах;
нейросеть, пишущая код: один файл, который можно поправить самой.
Сначала я сомневалась. Я не программист и HTML последний раз видела в школе. Но задача была маленькая, и рисковали мы одним вечером.
Приём 1. Описать страницу, как описываешь работу мастеру
Первое правило я вынесла из прошлых попыток работать с подрядчиками. Однажды я заказала листовку со словами «сделайте красиво, для мастерской». Получила три варианта, и ни в одном не было часов работы. Подрядчик не виноват: я их не назвала. Задача должна быть такой, чтобы её нельзя было понять по-другому. Не «сделай сайт», а список блоков: что на странице, в каком порядке, что должно работать.
Запрос ушёл в LibraChat в таком виде:
Напиши код HTML-страницы для мастерской по ремонту обуви «Каблучок»: 8 услуг с ценами в таблице, адрес, часы работы и кнопка «Позвонить», которая на телефоне сразу набирает номер. Всё в одном файле, стили внутри, страница должна нормально выглядеть на телефоне. Номер телефона и адрес оставь заглушками, я подставлю свои.
В нём три вида требований. Содержание: услуги, цены, адрес, часы. Поведение: кнопка набирает номер. Форма: один файл, стили внутри, вид на телефоне. Если какая-то группа выпадает, ответ получается неполным.
Приём 2. Заглушки вместо своих данных
Номер и адрес я сознательно не дала. Попросила оставить заглушки. Причины две. Свои контакты я впишу сама и точно не перепутаю цифру. И мне было важно увидеть, в каких местах кода они стоят, чтобы потом менять без помощи.
Ответ начался с инструкции, где править:
Подставь свои данные в двух местах: `tel:+70000000000` в кнопке и текст адреса в блоке контактов. Номер в `href` пиши без пробелов и скобок.
Я открыла код и прошлась поиском по нулям. Номер стоит в ссылке кнопки и ещё раз текстом в строке «Телефон». Заменила в обоих местах. Адрес стоял в квадратных скобках, его видно сразу.
Цены в таблице нейросеть поставила сама, потому что своих я не дала. Набойки 400 рублей, замена молнии от 600. Мы, конечно, заменили их на свои. Это главное, что нужно помнить: всё, чего ты не дала в запросе, нейросеть заполнит примером, и пример нужно проверить.
Приём 3. Один файл, стили внутри
Слова «всё в одном файле, стили внутри» сэкономили мне больше всего времени. Код пришёл одним куском, от первой строки до последней. Его можно скопировать целиком, вставить в Блокнот и сохранить с расширением `.html`.
Так и выходит файл, о котором спрашивают в запросе «нейросеть пишущая код и выдаёт его файлом». Код приходит в ответе, а файлом его сохраняешь ты. На это уходит минута:
Скопируй код из ответа целиком.
Открой Блокнот, вставь, нажми «Сохранить как».
Имя файла `kabluchok.html`, тип «Все файлы», кодировка UTF-8.
Открой файл двойным щелчком, он откроется в браузере.
Перешли файл себе на телефон и открой там: так видно, как страница выглядит у клиента.
Страница открылась аккуратной: тёмно-красная шапка с названием, белая карточка с таблицей услуг, блок контактов и большая кнопка «Позвонить». Цены выровнены по правому краю, а таблица на узком экране прокручивается вбок и не ломает страницу. Об этом я не просила.
Приём 4. Правки следующим сообщением
Первую версию я не стала переделывать с нуля. Правки писала в тот же чат, по одной. Тот же чат держит в голове всю страницу и меняет только то, что попросили.
Что мы поменяли:
цены на свои;
часы работы: у сестры суббота короче;
текст в шапке: убрали «уход», оставили только ремонт.
Каждую правку я проверяла тем же способом: сохраняла файл, обновляла страницу в браузере.
Одно наблюдение про формулировки правок. Сначала я писала «сделай понаряднее», и не могла объяснить, чего хочу. Потом стала писать так же, как в первом запросе: что именно, где именно, каким должно стать. «В блоке часов работы поставь субботу 10:00–16:00» понятно с первого раза. «Сделай шапку светлее» тоже понятно. «Сделай красивее» не понятно никому, ни нейросети, ни фрилансеру.
И ещё. Перед каждой правкой я сохраняла предыдущую версию файла под новым именем: `kabluchok-1.html`, `kabluchok-2.html`. Если правка не понравилась, вернуться можно за секунду.
Что я проверила, перед тем как дать ссылку клиентам
Страницу увидят люди, которые решают, нести ли нам свои сапоги. Поэтому перед публикацией я сделала короткую проверку, минут на 15:
открыла страницу на трёх телефонах: своём, сестры и старом мамином;
нажала «Позвонить» на каждом и убедилась, что набирается наш номер, а не нули;
сверила каждую цену в таблице с прайсом на стене мастерской;
прочитала текст в шапке вслух: звучит ли он как сестра, а не как реклама;
попробовала открыть страницу с выключенным Wi-Fi, через мобильный интернет.
На старом телефоне таблица не влезла по ширине, но прокрутилась вбок, как и обещал код. На двух других всё встало ровно. Цену на растяжку обуви я нашла неправильную, свою же: в прайсе на стене была старая.
До и после: что изменилось для мастерской
Что · Было · Стало
Где клиент видит цены — спрашивает по телефону — таблица на странице
Как позвонить с телефона — переписать номер с карты — одно нажатие на кнопку
Стоимость страницы — 25 000 рублей у фрилансера — вечер работы
Кто вносит правки — подрядчик, за деньги — сестра, в Блокноте
Звонков с вопросом «сколько стоит поменять набойки» стало заметно меньше. Сестра говорит, что теперь звонят те, кто уже решил прийти.
Где нейросеть, пишущий код помощник, не заменит программиста
По запросу «нейросеть пишущий код» часто ждут, что дальше всё сделается само. Не сделается, и лучше знать это заранее.
Файл нужно где-то разместить, чтобы у страницы был адрес в интернете. Это хостинг или конструктор, где можно вставить свой HTML. Тут я разбиралась сама, и это заняло больше времени, чем сам код.
Если нужна онлайн-запись, оплата на сайте или личный кабинет клиента, это уже не одна страница, а программа с базой данных. Такое лучше заказывать человеку, который отвечает за результат.
И проверку никто не отменял. Нейросеть написала аккуратный код, но цифры, адрес и часы работы на странице проверяю я. Клиенты будут смотреть на мои цены, а не на код.
Если интересно, какие ещё задачи малого бизнеса закрывают нейросети, я собрала свой опыт в статье лучшие нейросети для бизнеса.
Посчитай, сколько тебе сэкономит нейросеть, пишущий код
Простая страница с ценами и кнопкой звонка у фрилансера стоит от нескольких тысяч до десятков тысяч рублей. Через нейросеть пишущий код получаешь за вечер своего времени. Если ты ценишь свой вечер дешевле, чем подрядчика, выгода очевидна.
Попробуй прямо сейчас перенести приём на своё дело. В запросе выше поменяй «Каблучок» на название своего бизнеса, перечисли свои услуги и отправь его в чат LibraChat. Начать можно бесплатно. Если страниц и правок будет много, посмотри, что дают тарифы LibraChat.
нейросеть пишущий кодhtmlсайт для малого бизнесавизиткаремонт обувималый бизнес
