Как создать сайт с помощью ИИ: от первого промпта до запуска
Да, создать сайт с помощью ИИ можно — даже без программирования. Нейросеть по описанию быстро предложит структуру, тексты и оформление. Но первый результат — черновик. Чтобы сайт приводил клиентов, нужны проверенные факты, удобная мобильная версия, рабочие ссылки и формы, домен и аналитика.
Коротко:
Три способа создать сайт с ИИ
| Способ | Подходит, если | Что остаётся на вас |
|---|---|---|
| нужна простая страница или лендинг, бюджет минимальный | тексты и факты, фото, проверка на телефоне, домен, приём заявок, юридические тексты, аналитика | |
| нужна свобода оформления, есть навыки или время учиться | всё то же, плюс запуск, хостинг, исправление ошибок и обновления | |
| сайт должен приносить заявки, а времени разбираться нет | рассказать о бизнесе, передать материалы, выбрать вариант, согласовать тексты |
ИИ-конструктор собирает сайт из своих блоков, дальше вы правите его в визуальном редакторе. До начала узнайте, можно ли подключить свой домен, куда приходят заявки и можно ли передать сайт другому подрядчику. Генерация кода даёт полную свободу, но модель не видит результат на вашем телефоне. По нашему опыту, ломается то, что никто не проверил: страница сдвигается вбок, текст налезает на соседний блок, кнопки никуда не ведут. Команда, которая работает с ИИ, берёт создание, проверку и доводку на себя — это дороже бесплатного тарифа, зато экономит ваше время.
Не нужно утверждать макеты: выбирайте из готовых вариантов
Классический путь с дизайнером — бриф, референсы, прототип, макет главной, правки, макеты внутренних страниц и снова правки. В опытных руках это сильный процесс: хороший дизайнер слышит бизнес и ведёт заказчика по шагам. Но от заказчика он требует времени и умения оценивать промежуточные результаты. Многим трудно объяснить словами «хочу современнее», понять по статичной картинке, как страница поведёт себя на телефоне, и каждую неделю утверждать следующий макет.
Мы устроили работу иначе. Эскизы направлений, внутренние согласования и доводка остаются на нашей стороне. Вы получаете ссылку и видите три готовых варианта — живые страницы, которые открываются на телефоне и компьютере. По ним можно ходить, открывать меню, сравнивать и выбирать. Если в одном варианте нравится структура, а в другом цвета, скажите — обсудим, как их совместить.
Сверху: вариант 1 из 3
Две оговорки:
- Сведения о бизнесе всё равно нужны. Без услуг, цен, фото и контактов честный сайт не сделает ни дизайнер, ни ИИ. Зато продумывать дизайн и руководить созданием макетов вам не придётся.
- Выбор варианта — ещё не публикация. После него мы уточняем тексты и спорные места, подключаем домен, приём заявок и аналитику, вместе проверяем сайт и только потом запускаем.
Что подготовить до первого промпта
Хороший сайт начинается с фактов, а не с картинки. Соберите в один документ:
Отмечено: 0 из 9
Если у вас есть сообщество ВКонтакте, многое уже собрано: посты, фото, прайс, отзывы, контакты. Остаётся проверить, что цены и график не устарели.
Пошаговый план: от данных до запуска
Соберите факты по списку выше и составьте карту страниц: что будет на каждой.
Попросите ИИ сначала структуру и тексты, оформление — потом. Промпт для старта — ниже.
Сверьте каждый факт: цены, адреса, телефоны, имена, сроки. Генеративные модели не извлекают факты, а предсказывают правдоподобный текст. Google прямо советует вручную проверять всё сгенерированное перед публикацией, включая заголовки, описания и подписи к картинкам.
Проверьте сайт на разных ширинах. В браузере на компьютере нажмите F12 и включите режим устройства, чтобы задать любую ширину. Смотрите телефон (375–390 px), монитор (1440 px) и то, что между ними, например 768 и 1024 px: там живут ошибки, невидимые на крайних ширинах. Признаки беды: страница сдвигается вбок, текст обрезан или налезает, кнопка выступает из карточки, меню не закрывается.
Пройдите по всем ссылкам и кнопкам. Телефон набирается, мессенджер открывается, каждая кнопка что-то делает. Если есть форма, отправьте тестовую заявку и убедитесь, что она пришла: форма, которая пишет «Отправлено» и никуда не отправляет, хуже, чем никакой.
Закройте юридические и технические вопросы. Форма собирает персональные данные: закон требует опубликовать на сайте политику их обработки (ст. 18.1 152-ФЗ), а согласие на обработку, если оно нужно, оформлять отдельно от других документов (ст. 9). Тексты готовьте с юристом. Здесь же — домен, хостинг, HTTPS, свой заголовок и описание у каждой страницы.
Запустите сайт и подключите учёт. Добавьте сайт в Яндекс Вебмастер и Google Search Console, настройте в аналитике цели: звонки, переходы в мессенджеры, заявки. Отдельная «разметка для ИИ» не нужна: Google пишет, что для его ИИ-ответов хватает обычных требований поиска, а Яндекс — что для ответов Алисы AI принципиально новых требований не возникает.
Промпт для старта
Скопируйте и заполните квадратные скобки. Промпт не делает модель безошибочной, но сужает простор для выдумки и показывает, каких сведений не хватает.
Ты — опытный веб-дизайнер и редактор. Помоги подготовить сайт для моего бизнеса.
О бизнесе — используй только эти факты:
- Чем занимаемся: [услуги или товары]
- Где работаем: [город, район, выезд]
- Цены: [список или «от …»]
- Адрес, график, контакты: […]
- Чем отличаемся (только то, что можно подтвердить): […]
- Отзывы (дословно, с источником): […] или «отзывов нет»
Клиенты: [кто они, с какой задачей приходят, что их останавливает]
Главное действие на сайте: [позвонить / написать в мессенджер / записаться]
Страницы: главная, [услуги], [цены], [работы], [о нас], контакты
Правила:
1. Не придумывай факты, цифры, отзывы, сертификаты, сроки и гарантии. Где данных не хватает, ставь пометку [НУЖНЫ ДАННЫЕ: …] и в конце перечисли вопросы ко мне.
2. Сначала предложи структуру каждой страницы: блоки, заголовки, тексты. Код — только после моего подтверждения.
3. Делай вёрстку сначала для телефона: без прокрутки вбок на ширине 375 px, без наложения текста, с крупными кнопками; телефон и мессенджеры нажимаются.
4. Все ссылки и кнопки ведут на существующие страницы или в настоящие каналы связи. Форму заявки не делай, пока я не скажу, куда должны приходить заявки.
5. Отдельным списком перечисли, что нужно подключить вне кода: домен, хостинг, приём заявок, аналитику, политику обработки персональных данных, карты, онлайн-запись или оплату.Перед публикацией в тексте не должно остаться ни одной пометки «НУЖНЫ ДАННЫЕ».
Как мы создаём сайты с ИИ
Мы тоже работаем с ИИ, но не одним запросом. Сайт делают несколько моделей с разными ролями, и ни одна не принимает собственную работу.
Нажмите на персонажа — он расскажет о своей части работы.
Факты с источником. Собираем материалы бизнеса: сайт, сообщество ВКонтакте, визитку, прайс, фото. У каждого факта записано, откуда он взят; чего нет в источнике, того нет на сайте. Недостающее уточняем коротким списком вопросов, а без ответа блок не появляется — заглушек не будет. Отзывы можем только сократить, не меняя слов. Сгенерированные иллюстрации не выдаются за ваших сотрудников, клиентов или товары.
Три разных направления. Отдельный ИИ-автор предлагает три направления, у каждого своя композиция, типографика, род графики и характер движения. Прошлые проекты ему закрыты, чтобы приёмы не кочевали с сайта на сайт по инерции. Направления мы смотрим и утверждаем сами, до начала доводки.
Доводка с независимой критикой. Каждый вариант ведёт свой ИИ-исполнитель по кругу: правка → сборка → автоматические проверки → снимки всех страниц → оценка двух критиков → исправления → новые снимки. Автоматика ищет прокрутку вбок на девяти ширинах от 375 до 2560 px, обрезанный и перекрытый текст, пустые кнопки. Критики смотрят телефон, монитор, промежуточные ширины, открытое меню, окна, наведение и движение. Это модели двух разных разработчиков — сейчас Claude от Anthropic и Codex от OpenAI. Критики не правят код, а исполнитель не оценивает сам себя.
Готовность — по полной матрице. Вариант закрыт, когда у обоих критиков нет блокирующих замечаний, а все оценки — не ниже 4 из 5, причём по последней версии каждого кадра: все страницы, обе ширины, состояния, движение. Если одна из моделей временно недоступна, недостающие оценки собираются позже, до показа.
Сверка и приёмка. Перекрёстный просмотр подтверждает, что варианты действительно разные, а каждая отметка приёмки ссылается на свидетельство — кадр, отчёт или журнал. Последнее слово — за человеком: готовый сайт он смотрит сам, на телефоне и на мониторе.
Уроки — в правила. Найденное в каждом проекте переносится в общие правила, шаблоны или автоматические проверки.
| Что сравниваем | Один промпт | Процесс obnovi.site |
|---|---|---|
| Кто оценивает | та же модель или вы сами | два независимых критика; исполнитель себя не оценивает |
| Факты | модель может дописать правдоподобное | каждый факт — из источника; нет источника — нет блока |
| Варианты | один макет или его перекраска | три направления с разной композицией, графикой и движением |
| Телефон и планшет | проверяете сами, если вспомните | все страницы на разных ширинах, меню, окна, наведение |
| Ссылки и формы | могут вести в никуда | каждая ссылка открывается, кнопка что-то делает; форма — только с рабочим приёмом заявок |
| Исправления | когда заметили | «исправили → пересняли → оценили заново» до полной матрицы |
| Прошлый опыт | каждый раз с нуля | найденные ошибки становятся правилами и проверками |
Число моделей само по себе ничего не гарантирует. Работает цепочка «создали → проверили → нашли → исправили → перепроверили». Вот как она выглядела на практике.
Ошибки, которые мы уже прошли за вас
Многое в этом процессе появилось из ошибок. ИИ ошибался, вёрстка ломалась на телефонах и промежуточных ширинах, наши проверки поначалу тоже пропускали дефекты. Не все ошибки — от ИИ: часть пришла из материалов исходного сайта, часть — из наших инструментов. Ниже — случаи из внутренней приёмки по схеме «что сломалось → что увидел бы посетитель → исправление → правило».
1. Цены не помещались на планшете
Таблице цен нужно было около 851 px, а на карточки она переключалась только на экранах уже 768 px. Ровно на 768 px — одной из типичных ширин планшета в портретной ориентации — колонка цен уходила за край экрана на 107 px: посетитель увидел бы прайс без части цен. Исправление: карточный режим включили на всех экранах до 899 px. Правило: вариант проверяется не только на 375 и 1440 px — автоматика ищет прокрутку вбок на промежуточных ширинах, критики смотрят снимки на 420 и 768 px.
2. Документ, который обрезался молча
Договор-оферта на старом сайте был встроен окном фиксированной ширины 700 px — так он был размечен ещё до нас, но за показ в новом дизайне отвечаем мы. На телефоне два варианта из шести раздвигали страницу шире экрана на 341–349 px. Ещё два молча срезали правую половину документа: прокрутки нет, проверка молчит, и посетитель даже не узнал бы, что видит не всё. Исправление и правило: в общем каркасе, из которого собираются страницы при обновлении сайтов, встроенные документы, видео и объекты теперь не шире своего блока. Тихая ошибка опаснее шумной: шумную чинят, тихую не замечают.
3. Подпись в расписании наезжала на соседний ряд
В сетке недели ряды были фиксированной высоты — 128 px. Метка «Запись обязательна» у субботнего занятия в ряд не помещалась: выступала на 26 px при ширине 1440 px и на 234 px при 1024 px, залезая в ряды ниже, — легко ошибиться, к какому времени она относится. Автоматика ищет обрезанный текст и выход за край по горизонтали, а здесь текст опускался вниз. Ошибку нашёл критик на снимке первого экрана; он же заметил, что исправление уже значилось в истории изменений, но на снимке его не было. Исправление: ряды стали общей сеткой с высотой по самому высокому занятию, повторный замер — 0 px на обеих ширинах. Правило: замечание закрывает не запись «исправлено», а новая оценка по переснятому кадру.
4. Анимация спрятала страницу каталога
Блоки появлялись при прокрутке, когда в окно попадало 15% их площади. На странице каталога так разметили обёртку высотой 6748 px — в окне высотой 900 px её видно не больше 13%, и посетитель увидел бы пустую страницу. Ошибка сидела в нашем общем каркасе и инструменте разметки, а проверки её пропустили: ради стабильных снимков они открывали страницы с выключенной анимацией. Нашёл сквозной тест, который загружает страницу как обычный посетитель. Исправление и правило: блок появляется, как только его верхний край входит в экран; в автоматическую проверку добавлен «живой» проход с анимацией до конца страницы.
5. ИИ додумал подпись
Сайт собирали по постам сообщества ВКонтакте, и ИИ вывел поводы для фотографий работ из дат публикации, а не из текста. Проверка, которая требует для каждого блока цитату из источника, остановила четыре такие подписи до вёрстки. Но подпись «без повода» у шестнадцати работ проскочила во все три варианта: автоматическая сверка ловит числа, а не слова. Её нашёл перекрёстный просмотр. Правило: числа, цены, телефоны и имена сверяются с источником автоматически. Для словесных уточнений правило ещё дорабатываем, поэтому формулировки согласуем с вами перед запуском.
Где без человека не обойтись
ИИ-критики смотрят на снимки страниц. А посетитель пользуется живой страницей: наводит курсор, открывает меню, листает фотографии. Многие ошибки видны только там.
Поэтому каждый сайт обязательно смотрит человек — и находит то, что пропустили модели. Двойная рамка у активного пункта меню. Одно меню, раскрывшееся поверх другого. Вёрстка, которая разъезжается, стоит навести курсор. Люди на фотографиях с обрезанными головами: модель аккуратно вписала снимки в блок сайта и не замечала, что человек не помещается в кадр полностью. Исправить такое ИИ может и сам, но сначала кто-то должен это увидеть.
Человек замечает и то, что на ошибку не похоже. Модели ленятся: однажды удачная анимация начинала кочевать по сайтам совершенно разных бизнесов, от фитнес-клуба до типографии. Мы разобрали, откуда берётся эта инерция, и перестроили процесс: автор направлений теперь не видит прошлых проектов, а оформление каждый раз подбирается под конкретный сайт.
Есть и то, чего глазами не видно вовсе. Фотографии теперь пережимаются в современные форматы, а картинки ниже экрана подгружаются по мере прокрутки, поэтому страница быстро открывается даже на мобильном интернете. Статьи блога раньше собирались одним огромным файлом со встроенными стилями. Теперь их собирает сборщик, и беспорядок в код он просто не пропускает.
Даже эту статью два ИИ-критика признали готовой. Но окончательный вид она получила, когда её прочитал человек: убрал лишнее, расставил акценты, поправил подачу. ИИ сильно ускоряет работу, но решает, хорош ли сайт, всё равно человек.
Проверки тоже учились
- Вариант однажды признали готовым по шести кадрам — трём страницам из восьми, а потом нашлось девять блокирующих дефектов. Теперь готовность считается по полной матрице кадров.
- Критики разошлись в оценке доверия: 4 против 2 — «вместо двенадцати фотографий серые прямоугольники». Инструмент снимал страницу, не дождавшись загрузки фото. Теперь расхождение критиков — сигнал, и разбор начинают с инструмента.
- Уроки оседали в журналах: один разбор нашёл 25 таких пунктов. Теперь у каждого вывода должен быть адрес — правило, шаблон или проверка.
Мы не обещаем, что ошибок больше не будет: новые сайты приносят новые случаи. Но найденная ошибка у нас превращается в правило или проверку для следующего сайта. Проходить этот путь самому, становясь промпт-инженером и тестировщиком, вам не нужно.
Что получает следующий заказчик
Сайт, проверенный на разных экранах и в разных состояниях: телефон, планшет, монитор, открытое меню, окна, наведение.
Ничего «для вида»: ни кнопок-пустышек, ни форм, которые не отправляют заявки, ни заглушек «текст скоро будет».
Факты из ваших материалов: цены, адреса, имена и подписи прослеживаются до источника.
Три действительно разных варианта, а не перекраска одного макета. Они отличаются друг от друга — но мы не обещаем, что нигде в интернете нет ничего похожего.
Опыт прошлых проектов: правила, выросшие из ошибок выше, работают с первого круга, а не после того, как ошибку заметите вы.
Когда делать самому, а когда заказать
Сделайте сами, если нужна одна простая страница, вы готовы потратить время на проверку и ошибка не будет стоить вам клиентов. Начните с промпта выше и пройдите шаги 3–7.
Закажите разработку, если сайт должен приносить заявки с первого дня; если страниц много или есть каталог, цены, расписание; если нужны приём заявок, онлайн-запись или оплата; если нет времени быть дизайнером, тестировщиком и промпт-инженером одновременно.
Из чего складывается стоимость — цифры зависят от проекта:
Учитывайте и регулярные расходы, которые не зависят от подрядчика: домен, хостинг, платные сервисы.
Частые вопросы
Можно ли создать сайт с помощью нейросети без программирования?
Да. ИИ-конструктор собирает сайт по описанию, а правки делаются в визуальном редакторе. Код писать не придётся, но разбираться в тарифах, домене, приёме заявок и мобильной версии — всё равно придётся. Код из чата тоже можно получить без навыков программирования, но запустить и починить его без них трудно.
Можно ли сделать сайт с ИИ бесплатно?
Попробовать — часто да. Рабочему сайту обычно нужны свой домен и хостинг или платный тариф конструктора; условия бесплатных тарифов у сервисов разные. Главный расход бесплатного варианта — ваше время на проверку и исправления.
Хватит ли одного промпта?
Для черновика — да. Сайт, через который вам будут звонить и платить, по одному промпту не сделать: модель может уверенно дописать неверный факт, а вёрстку на вашем телефоне она не видит. Нужны круги «проверить → исправить → проверить снова».
Можно ли сделать сайт из группы ВКонтакте?
Да, сообщество — хороший источник: услуги, цены, фото работ, отзывы, контакты. Перенесите только актуальное. Сайт из материалов сообщества мы собираем так же, как из любых источников: каждый факт — со ссылкой на пост, фото — ваши, а не сгенерированные «похожие».
Какие проверки нужны перед запуском?
Сайт на телефоне, планшете и компьютере без прокрутки вбок и наложений; все ссылки, кнопки и телефоны; тестовая заявка; цены, адреса и имена по источнику; политика обработки персональных данных, если собираете контакты; заголовок и описание у каждой страницы; аналитика с целями; сайт добавлен в Яндекс Вебмастер и Google Search Console.
Можно ли передать сгенерированный сайт специалистам?
Да, если у вас есть файлы сайта или доступ к редактору, а также доступы к домену и хостингу. Приложите тексты, фото и список того, что не работает. Если сайт сделан в конструкторе, заранее узнайте, можно ли его выгрузить. А если сайт уже опубликован, пришлите нам адрес — покажем три варианта нового дизайна.
Обсудим ваш сайт
Сайта ещё нет — это нормально. Напишите, чем вы занимаетесь и какие страницы нужны, приложите ссылку на сообщество ВКонтакте, другие соцсети, визитку или прайс. Если сайт уже есть, пришлите адрес. Обсудим задачу, материалы и то, как будет устроена работа.
- Почта: prosto@obnovi.site
- Telegram: @obnovi_site
- ВКонтакте: vk.ru/obnovi.site
- Телефон: +7 960 614-51-50