FreeTeams
Процесс работы17.09.202616 мин чтенияАвтор: Редакция FreeTeams

Как сделать сайт с помощью ИИ: промпты, которые работают

Человек создаёт сайт с помощью ИИ на ноутбуке

«Сделай лендинг для моей студии» — и на экране появляется страница: заголовок про качество, три преимущества без единой цифры, форма «оставьте заявку». Технически это сайт. Продавать он не будет.

Дело редко в модели. Нейросеть не знает вашего бизнеса — она знает, как обычно выглядят сайты. Всё, что отличает ваш продукт от тысячи похожих, попадает в результат только одним путём: через промпт.

Ниже — как формулировать запросы по каждому этапу: структура, тексты, дизайн, вёрстка. С примерами промптов, которые можно скопировать и подставить свои данные.

Что ИИ действительно делает при создании сайта

Чтобы промпты работали, полезно понимать границу. Языковая модель сильна там, где задача — собрать понятную форму из известного материала, и слаба там, где нужен факт, которого ей никто не дал.

  • Структура страницы. Порядок блоков под нишу и цель — одна из самых сильных сторон. Модель видела десятки тысяч посадочных и хорошо воспроизводит рабочие каркасы.
  • Черновики текстов. Заголовки, подзаголовки, описания блоков, варианты кнопок. Десять вариантов первого экрана за минуту — то, на что копирайтер потратит час.
  • Вёрстка типовых блоков. HTML и CSS адаптивной страницы с формой — задача, которую модели решают уверенно.
  • Переупаковка ваших материалов. Превратить голосовое, прайс-лист и старый сайт в связный текст — сильная сторона.
  • Чего не умеет. Знать ваши цены, сроки, лицензии и реальные отзывы. Всё это либо даёте вы, либо модель придумает правдоподобное — и это худший исход.

Из чего состоит рабочий промпт

Хороший промпт по составу совпадает с хорошим брифом, только короче. Пять частей, и каждая отвечает за свой тип ошибки.

Структура рабочего промпта для создания сайта
Структура рабочего промпта для создания сайта

Самая недооценённая часть — ограничения. Именно они убирают воду: «без слов „инновационный“, „качественный“, „индивидуальный подход“», «не выдумывай цифры, которых нет в контексте», «не больше 9 слов в заголовке».

Если из промпта убрать всё, кроме фактов о вашем бизнесе, результат станет хуже процентов на десять. Если убрать факты и оставить всё остальное — станет бесполезным.

Промпт на структуру страницы

Начинать всегда стоит со структуры: она определяет, какие тексты вообще понадобятся. Если сделать наоборот, вы напишете отличный текст для блока, которого не должно быть.

Рабочая формулировка выглядит примерно так: «Ты маркетолог, который проектирует посадочные страницы. Продукт: студия керамики в Москве, мастер-классы для взрослых, 3500 ₽ за занятие, абонемент на 4 занятия 12 000 ₽. Аудитория: женщины 25–45, ищут занятие для себя или подарок впечатлением. Цель страницы — запись на мастер-класс. Предложи структуру из 8–10 блоков в порядке сверху вниз. Для каждого блока укажи: название, задачу блока и что в нём должно быть. Без блоков, для которых у меня нет материала».

Последнее предложение экономит больше всего времени. Без него модель обязательно поставит блок «Наша команда» с четырьмя фотографиями и блок «Кейсы клиентов», которых у вас нет. Что должно быть в каркасе посадочной и почему порядок блоков важнее их количества — подробно в разборе структуры продающего лендинга.

Диалог с ИИ на экране компьютера при создании сайта
Диалог с ИИ на экране компьютера при создании сайта

Полученную структуру не принимайте как данность. Попросите второй вариант с другой логикой: «предложи альтернативную структуру, где сначала снимаются возражения, а оффер повторяется дважды». Сравнение двух каркасов почти всегда даёт третий, лучший.

Промпт на тексты

Тексты пишутся по блокам, а не одним запросом на всю страницу. Целиковая генерация даёт ровный, гладкий и одинаково пустой текст: у модели нет причин вкладываться в каждый блок.

  1. Дайте факты списком. Цены, сроки, состав услуги, опыт, гарантии, город, ограничения. Двадцать строк фактуры важнее любых формулировок в промпте.
  2. Просите варианты, а не текст. «Дай 8 вариантов заголовка первого экрана: 3 через выгоду, 3 через боль, 2 через конкретную цифру». Выбирать проще, чем переписывать.
  3. Задайте длину. «Заголовок до 9 слов, подзаголовок до 20». Без ограничения модель пишет длиннее, чем помещается на экран телефона.
  4. Запретите штампы. Перечислите слова, которых не хотите видеть. Это работает лучше, чем «пиши живо».
  5. Попросите обоснование. «К каждому варианту — одна строка, почему он должен сработать для этой аудитории». Обоснование заодно вскрывает, где модель придумала факт.

Отдельный приём для первого экрана: попросите модель сначала сформулировать оффер в одном предложении по схеме «что, кому, с какой выгодой, почему нам», и только потом превращать его в заголовок. Почему первый экран решает судьбу страницы, разобрано в материале про первый экран лендинга, а приёмы для остального текста — в статье про копирайтинг для лендинга.

ЭтапСлабый промптСильный промпт
СтруктураСделай лендинг8–10 блоков под цель «запись»
ТекстыНапиши преимущества5 выгод из фактов ниже
ЗаголовокПридумай заголовок8 вариантов, до 9 слов
ДизайнСделай красивоПалитра, шрифты, отступы
ВёрсткаСвёрстай страницуHTML+CSS, адаптив 360px
Слабый и сильный промпт

Как заставить ИИ писать конкретно, а не общо

Приём, который меняет результат сильнее прочих: запретить прилагательные без доказательства. Добавьте в промпт строку «каждое утверждение должно опираться на факт из контекста; если факта нет — не пиши это утверждение».

После такого ограничения «высокое качество обучения» превращается в «группы до 6 человек» — не потому, что модель стала умнее, а потому что ей больше некуда деться. Второй похожий приём: «замени все оценочные слова на числа, где это возможно».

Третий приём — писать от возражения. Дайте список из пяти реальных сомнений клиента («дорого», «у меня не получится», «далеко ехать») и попросите на каждое по одному блоку текста. Такой текст читается как ответ на мысли человека, а не как реклама.

Какая модель под какую задачу

Модели различаются не «умом вообще», а сильными сторонами. Универсального выбора нет, зато есть понятное распределение по этапам сайта.

  • Тексты и тон. Для продающих текстов на русском важнее всего живость формулировок и чувство контекста. Здесь имеет смысл брать модель подороже: разница между «гладко» и «цепляет» видна сразу.
  • Структура и логика. Для каркаса страницы и последовательности блоков хватает и более простой модели — задача формальная, ошибки заметны глазом.
  • Вёрстка. Здесь ценится аккуратность и предсказуемость: модель должна выдать рабочий HTML без сюрпризов, а не красивую прозу.
  • Маркетинг и аналитика. План продвижения, гипотезы, разбор конкурентов — задача на рассуждение, и она заметно выигрывает от сильной модели.
Матрица выбора модели ИИ под задачи создания сайта
Матрица выбора модели ИИ под задачи создания сайта

Практический вывод: не платите за топовую модель там, где задача формальная, и не экономьте там, где текст читает ваш клиент. Именно поэтому в готовых конвейерах роли разводят по разным моделям, а не гоняют всё через одну.

Промпт на дизайн и стиль

С дизайном языковая модель работает словами: она не рисует макет, а описывает систему — палитру, шрифтовые пары, размеры, отступы, поведение элементов. Это ровно то, что нужно верстальщику или следующей модели.

Опишите настроение через ограничения, а не через прилагательные. «Тёплая палитра: терракота, песочный, глубокий оливковый; крупные фотографии изделий; округлые формы; много воздуха; без неона и градиентов» — это задание. «Сделай современно и стильно» — это ничего.

  • Просите токены, а не описание. «Верни палитру в HEX, две шрифтовые пары, шкалу размеров заголовков и отступов» — такой ответ можно сразу передавать в вёрстку.
  • Задавайте антипримеры. «Не как у маркетплейсов, без карточек с тенями по всему экрану» — модели легче двигаться от отрицания.
  • Отдельно проговорите мобильную версию. «Опиши, как каждый блок перестраивается на ширине 360 пикселей»: без этого получите десктоп, ужатый в телефон.

Промпт на вёрстку

Вёрстка — этап, где важнее всего задать техническую рамку, иначе модель соберёт страницу на случайном стеке и подключит библиотеки, которые вам не нужны.

Минимальная рамка: «Собери одностраничный сайт: один HTML-файл, CSS внутри файла, без внешних библиотек и без jQuery. Адаптив от 360 пикселей. Форма заявки с полями имя и телефон, отправка методом POST на /api/leads, обязательный чекбокс согласия на обработку данных. Семантические теги, alt у всех изображений, один тег h1».

  • Один файл или структура. Для лендинга проще один самодостаточный HTML: его легко выложить куда угодно.
  • Куда уходит заявка. Назовите конкретный адрес обработчика. Иначе получите форму-пустышку, которая ничего не отправляет.
  • Доступность и семантика. Явно требуйте alt, label у полей и один h1 — модель это умеет, но по умолчанию экономит.
  • Скорость. «Без анимационных библиотек, изображения с lazy-загрузкой» — простая строка, которая заметно влияет на скорость загрузки лендинга.
Дизайнер дорабатывает сгенерированный ИИ макет сайта
Дизайнер дорабатывает сгенерированный ИИ макет сайта

Откуда брать картинки для сгенерированного сайта

Вопрос, о котором вспоминают последним, а он решает половину впечатления от страницы. Текстовая модель картинок не даёт, и в сгенерированной вёрстке вместо фотографий стоят серые прямоугольники.

  • Свои фотографии. Лучший вариант почти всегда. Даже снятые на телефон реальные работы, интерьер и люди убеждают сильнее безупречного стока.
  • Бесплатные фотостоки. Подходят для фона и абстрактных блоков. Риск — узнаваемость: одно и то же лицо может стоять на сайтах ваших конкурентов.
  • Генерация изображений. Годится для иллюстраций и абстракций, плохо — для людей и предметов, которые клиент будет искать глазами вживую.
  • Иконки и схемы. Здесь ИИ полезен: попросите описать набор иконок одним стилем, а дальше подберите готовый комплект.

И сразу попросите модель прописать в вёрстке размеры изображений и атрибут отложенной загрузки — иначе страница будет прыгать при прокрутке, а это заметно бьёт по поведенческим метрикам.

Как править результат

Первый ответ модели — это черновик, и относиться к нему нужно так же, как к черновику фрилансера: сказать, что не так, а не переделывать самому.

Ключевое правило итераций: правьте по одному измерению за раз. Запрос «сделай текст живее, короче, добавь цифры и поменяй структуру» даёт результат, в котором непонятно, что улучшилось, а что сломалось.

Дерево решений: править промпт или править результат руками
Дерево решений: править промпт или править результат руками

Вторая частая ошибка — молча принимать «улучшения», о которых вы не просили. Если вы просите поправить заголовок, добавляйте в запрос фразу «остальной текст верни без изменений». Иначе модель перепишет соседние блоки, и вы потеряете варианты, которые уже согласовали.

Сколько итераций нормально?

Для структуры обычно хватает двух заходов, для текстов — трёх-четырёх по каждому ключевому блоку, для вёрстки — двух. Если вы делаете седьмую итерацию и результат не улучшается, дело почти никогда не в модели.

  • Не хватает фактуры. Модель ходит по кругу, потому что ей нечем наполнить текст. Вернитесь к списку фактов и допишите его.
  • Задача сформулирована через вкус. «Мне не нравится» — не задача. Сформулируйте, что именно не так: длинно, общо, не та интонация, не тот акцент.
  • Контекст переполнен. В длинном диалоге модель начинает путать ранние и поздние требования. Соберите итоговый промпт заново и начните чистую сессию.

Пять ошибок в промптах

  1. Промпт без фактов. Нет цен, сроков и особенностей — получите текст, подходящий любому конкуренту.
  2. Слишком большая задача. «Сделай сайт целиком» вместо шести последовательных шагов. Качество падает на каждом уровне вложенности.
  3. Отсутствие формата ответа. Не сказали «верни таблицей» — получите три абзаца прозы, из которых придётся выковыривать данные.
  4. Вежливость вместо конкретики. «Пожалуйста, постарайся сделать хорошо» не заменяет ограничение «до 9 слов».
  5. Доверие к цифрам. Модель уверенно напишет «более 1500 довольных клиентов», если вы не запретили придумывать. Это прямой риск для репутации и для закона о рекламе.

Что проверить перед публикацией

Проверка занимает минут двадцать и отделяет «сайт, сделанный нейросетью» от «сайта, который работает».

Чек-лист проверки сгенерированного ИИ сайта перед публикацией
Чек-лист проверки сгенерированного ИИ сайта перед публикацией

Отдельно проверьте форму: сгенерированная страница часто содержит красивую форму без обработчика. Отправьте тестовую заявку и убедитесь, что она дошла — куда именно, зависит от того, как настроены интеграции с CRM и аналитикой.

Второе место по частоте — мобильная версия. Модели пишут адаптив по памяти, и на узком экране обычно ломается то, что на десктопе выглядело нарядно: таблицы, многоколоночные блоки, крупные заголовки в две строки, плавающие элементы поверх текста. Откройте страницу на телефоне до публикации, а не после первой рекламы.

И последнее: прочитайте текст вслух. Сгенерированный текст почти всегда проходит проверку глазами и почти всегда спотыкается на слух — там, где стоит лишнее вводное слово или два одинаковых оборота подряд. Это самый дешёвый редакторский приём из существующих.

Когда промпты вообще не нужны

Всё описанное выше — ручная работа: вы сами держите последовательность шагов, сами следите, чтобы факты не потерялись между этапами, сами проверяете результат. Это нормально, если вам интересен процесс или задача разовая.

Если же нужен результат, а не упражнение, тот же конвейер существует в собранном виде: вы один раз заполняете бриф, а дальше структуру, тексты, макеты, вёрстку и маркетинговый план делают специализированные AI-агенты, каждый со своим промптом и своей ролью. Как устроена такая сборка от брифа до опубликованной страницы, описано в разборе генерации лендинга через ИИ.

Порядок работы с ИИ при создании сайта по этапам
Порядок работы с ИИ при создании сайта по этапам

Разница между двумя подходами не в качестве моделей, а в том, кто держит процесс. Промпты дают вам контроль над каждым шагом и требуют вашего времени; готовый конвейер экономит время и оставляет вам приёмку. Что выбрать, зависит от того, чего у вас меньше — часов или денег; сравнение с классической разработкой есть в материале про конструктор или разработку лендинга.

Хотите пройти весь путь без ручного управления промптами — опишите проект в FreeTeams и получите готовую страницу с приёмкой каждого этапа.

Частые вопросы

Какой промпт написать, чтобы ИИ сделал сайт?

Рабочий промпт состоит из пяти частей: роль модели, контекст о продукте и аудитории, конкретная задача, формат ответа и ограничения. Одной фразы «сделай лендинг» недостаточно — без фактов о вашем бизнесе результат подойдёт любому конкуренту.

Можно ли одним запросом получить готовый сайт?

Технически да, качественно — нет. Лучше идти шагами: структура, затем тексты по блокам, затем стиль, затем вёрстка. На каждом шаге вы правите результат, пока он не устроит.

Почему ИИ пишет общие тексты без конкретики?

Потому что конкретика есть только у вас. Модель не знает ваших цен, сроков и особенностей услуги: если не дать их в промпте, она заполнит пустоту штампами вроде «индивидуального подхода».

Что обязательно проверять за нейросетью?

Все цифры, цены, гарантии и отзывы, работоспособность формы заявки, наличие согласия на обработку данных и вид страницы на экране шириной 360 пикселей.

Нужен ли дизайнер, если сайт сделала нейросеть?

Для типовой страницы обычно нет. Дизайнер нужен, когда важен узнаваемый фирменный стиль или нестандартная механика — тогда его зовут точечно, поверх готового каркаса.