Ожидание обычно такое: пишешь ChatGPT «сделай мне сайт для кофейни», и через пару минут сайт готов. Реальность чуть сложнее. Через пару минут действительно будет готово многое: структура, тексты, код страницы, иногда даже предпросмотр прямо в чате. Но это черновик. Между ним и сайтом, который открывается по адресу, принимает заявки и нормально выглядит на телефоне, есть еще несколько шагов, и ChatGPT делает их не сам.
Разберу, что ChatGPT умеет при создании сайта, где начинается работа человека и из чего складывается путь от ответа в чате до черновика страницы.
Что ChatGPT делает при создании сайта
Структура и тексты
С этого стоит начинать, даже если код вы писать не собираетесь. ChatGPT хорошо помогает разложить сайт на страницы и блоки: что на главной, какие разделы нужны, в каком порядке идут блоки лендинга, что написать в первом экране.
Тексты он тоже пишет быстро, но качество зависит от того, что вы ему дали. Если в запросе только «кофейня в центре города», тексты получатся общими. Если дать меню, особенности, адрес, часы работы, кто ваши гости и чем вы отличаетесь, текст станет конкретнее. Факты ChatGPT берет из запроса, а когда их нет, может их придумать, поэтому цены, сроки и обещания в тексте нужно проверять.
Хороший черновик начинается с вопросов, а не с ответа: кто аудитория, какая цель у страницы, чем бизнес отличается от соседей, как с ним связаться. ChatGPT умеет задавать такие вопросы, если его об этом попросить. Но понять, какие ответы действительно важны для страницы, а какие только звучат убедительно, — уже работа человека, который видел много таких проектов.
Код HTML, CSS и JavaScript
ChatGPT пишет код страницы: разметку HTML, стили CSS, простые скрипты на JavaScript. Для одностраничного сайта он может выдать все одним файлом, который откроется в браузере.
Код обычно рабочий для простых задач: блоки, меню, кнопки, галерея, аккордеон с вопросами. Сложнее с тем, что требует сервера: отправка формы, личный кабинет, оплата. Здесь ChatGPT напишет код, но без настроенного сервера и сервисов этот код ничего не отправит.
Отдельный момент — изображения. ChatGPT не знает, как выглядит ваш зал, товар или команда. В коде он поставит заглушки или ссылки на картинки, которых у вас нет. Фотографии и графику нужно подготовить самостоятельно, привести к разумному размеру и подставить в код. Если этого не сделать, страница будет либо пустой, либо с чужими картинками.
Еще одна деталь: код из чата живет в чате. Если вы просите правки несколько раз, легко запутаться, какая версия последняя, и потерять удачные изменения. Без привычки вести версии, которая есть у разработчиков, так происходит почти всегда.
Предпросмотр в чате
В справке OpenAI сказано, что для поддерживаемых блоков кода можно переключиться с кода на предпросмотр прямо в ChatGPT. Среди поддерживаемых — HTML-страницы и React-компоненты. Набор доступных действий зависит от тарифа, устройства, настроек рабочего пространства и модели, поэтому кнопки предпросмотра может и не быть.
Предпросмотр удобен, чтобы быстро увидеть, как выглядит страница, и попросить поправить. Но это просмотр внутри ChatGPT: сайт от этого не появляется в интернете, и проверка на телефоне и в разных браузерах все равно нужна отдельно.
От ответа в чате до страницы в интернете
Хостинг и домен
Чтобы страница открывалась у других людей, файлы нужно разместить на хостинге и привязать домен. ChatGPT объяснит, как это сделать, и подскажет варианты, но сам ничего не размещает: выбрать хостинг, зарегистрировать домен, загрузить файлы и настроить адрес придется самостоятельно.
После размещения стоит проверить, что сайт открывается по защищенному адресу с https, что адрес с www и без него ведет на одну и ту же страницу, а все картинки и стили подгрузились. Частая ошибка — пути к файлам, которые работали на компьютере и сломались на хостинге.
Формы
Форма заявки в коде от ChatGPT обычно выглядит готовой: поля, кнопка, сообщение «Спасибо». Но чтобы заявка куда-то пришла, нужен обработчик: сервер, сервис форм или интеграция с почтой, Telegram, CRM. Без этого форма красиво отправляет данные в никуда. Это одна из самых частых ловушек самодельных сайтов: все выглядит работающим, пока не выясняется, что заявки не приходили.
Проверяется это только тестовыми заявками с телефона и с компьютера: обе должны дойти туда, куда нужно, со всеми полями.
Если форма собирает имя, телефон или почту, понадобится еще и согласие на обработку персональных данных. Это уже не вопрос кода.
Проверка на телефоне и в браузерах
ChatGPT пишет адаптивную верстку, если попросить, но проверить ее на настоящих устройствах он не может. На практике на телефоне чаще всего ломаются меню, широкие таблицы, длинные слова в заголовках, кнопки, которые оказываются слишком близко друг к другу. Проверять нужно на реальном телефоне и в нескольких браузерах.
Из чего на самом деле складывается черновик
Путь от запроса до черновика выглядит коротким только со стороны. На деле в нем несколько этапов: сформулировать задачу и действие, которое должен сделать посетитель, собрать структуру, дать факты — услуги, цены, адрес, отличия, — получить тексты по блокам, затем код и посмотреть результат. На каждом этапе нужно решение человека: какие блоки лишние, какие факты нельзя отдавать на откуп модели, что именно поправить, когда страница «не нравится».
Ошибаются обычно в одних и тех же местах. Не дают фактов — и нейросеть сочиняет цены и обещания. Просят «сделать красивее» вместо конкретной правки. Принимают предпросмотр за готовый сайт. Считают форму рабочей, хотя ни одна тестовая заявка еще не дошла. Поэтому в итоге получается черновик, а не сайт, и дальше решается, что с ним делать.
Где начинаются ограничения
| Что нужно | ChatGPT | Человек |
|---|---|---|
| Структура и тексты | Предлагает варианты быстро | Дает факты, проверяет и выбирает |
| Код страницы | Пишет HTML, CSS, JavaScript | Проверяет, правит, следит за изменениями |
| Предпросмотр | Показывает в чате, если доступен | Проверяет на реальных устройствах |
| Хостинг и домен | Объясняет порядок | Покупает, настраивает, размещает |
| Формы и заявки | Пишет код формы | Подключает обработчик и проверяет доставку |
| Персональные данные | Может набросать текст согласия | Отвечает за оформление и хранение |
| Изменения потом | Перепишет код по запросу | Следит, чтобы правка не сломала остальное |
Главное ограничение не в коде, а в том, что сайт — это не один файл. Это хостинг, домен, формы, аналитика, обновления, резервные копии. ChatGPT помогает в каждой части, но связывает их вместе и отвечает за результат человек.
Есть и то, о чем ChatGPT не вспомнит, если не спросить: Title и Description страницы для поиска, подключение аналитики, политика конфиденциальности, понятная страница ошибки, если адрес набран неверно. По отдельности это мелочи, но без них страница остается черновиком, даже если выглядит законченной.
Второе ограничение — изменения. Первая версия страницы собирается быстро. Через месяц нужно поменять цены, добавить блок, поправить форму. Если код целиком написан нейросетью, а вы в нем не разбираетесь, каждая правка превращается в новый запрос и новый риск что-то сломать. Чем больше правок, тем сложнее держать код в порядке.
Когда черновик перенести на Tilda или в разработку
Черновик из ChatGPT ценен даже если код в итоге не пригодится: структура и тексты — это половина работы над сайтом.
Оставить страницу на коде из ChatGPT тоже можно. Это разумно, если это временная страница под одно событие, если вы сами готовы разбираться в коде и хостинге или если страница не собирает заявки и не обновляется. Во всех остальных случаях стоит заранее подумать, кто и как будет ее менять через полгода, когда цены поменяются, а автор кода уже не вспомнит, что где.
Перенести на Tilda стоит, если сайт простой, его нужно будет регулярно обновлять самостоятельно, а важны формы и заявки. На Tilda я собираю страницы из штатных блоков и Zero Block, а черновик из ChatGPT, если он есть, помогает понять, что важно заказчику. Структуру и тексты я все равно выстраиваю под задачу сама. Готовый HTML-код от нейросети на Tilda не переношу: так страницу потом сложно поддерживать.
У такого подхода есть практичный плюс: страницу на Tilda можно менять без кода. Цены, тексты, фотографии, порядок блоков правятся в редакторе, а формы подключаются к почте, Telegram или CRM штатными настройками.
В разработку стоит передавать, если нужна нестандартная логика: калькулятор, личный кабинет, интеграции, нестандартные формы. Тогда черновик из ChatGPT становится наглядным заданием, и разработчику проще понять, что вы хотите. Для такой задачи подойдет нестандартная разработка, а если нужна одна продающая страница — лендинг.
Если хотите обсудить, что делать с вашим черновиком, пройдите квиз на mara-craft.com. Я посмотрю и подскажу, какой путь подойдет.