Промпт для создания сайта: какие исходные данные дать ИИ

Хороший промпт для создания сайта начинается до разговора с нейросетью. Выпишите, кому нужна страница, какое действие посетитель должен выполнить и откуда брать факты. Без этих сведений агент может красиво придумать услугу, цену и отзывы. Для действующего проекта добавьте перечень файлов, которые разрешено менять, и опишите сохранённое поведение. Тогда результат можно проверить по заранее понятным признакам.

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

Сначала описать посетителя и действие

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

Запишите вопрос, с которым посетитель пришёл из поиска или рекламы, его сомнение и следующую страницу. Эта тройка помогает выбрать порядок блоков. Не просите ИИ одновременно «придумать стратегию, тексты, дизайн и код» без проверки между этапами. Сначала утвердите смысл первого экрана, потом структуру, затем визуальный образец и работающие действия.

В моём проекте Deyvo задача первого экрана была показать реальные действия: голосовые задачи, привычки, дневник и помощник в одной системе. Там работает демонстрация интерфейса. Для магазина «Православная Трапеза» важнее быстро увидеть каталог, категории и корзину. Если дать обоим проектам одинаковый промпт «крупный заголовок и три преимущества», получится несоответствие покупательскому пути.

Где хранить факты, чтобы они не расходились

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

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

Проверьте карту по действиям:

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

rg -n 'price|booking|lead' app components lib
rg --files app components lib | head -80
git status --short

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

Как записать требования к дизайну без вкусовых загадок

Дайте один-два разрешённых референса и объясните, какую задачу каждый решает: плотность информации, иерархию, расположение кнопки. Не требуйте «как на картинке», если нет права брать изображения и тексты. В задании задайте доступные шрифты, цвета бренда и примеры своих компонентов. Для российской аудитории внешние шрифты и библиотеки в критическом пути загрузки создают проблемы на мобильных сетях, поэтому просите подключать необходимые файлы локально.

Проверьте ширину телефона до обсуждения анимации. Длинный заголовок, таблица и форма должны помещаться без горизонтальной прокрутки. Укажите, какие элементы обязательны на первом экране и где находится главный призыв к действию. Если нужна картинка, объясните её смысл: показать исходную проблему, результат, путь клиента или реальный экран работы. Декоративная иллюстрация не заменяет доказательство.

Пример рабочего задания

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

Цель: посетитель [кто] должен понять [предложение] и выполнить [действие].
Источник фактов: [путь к утверждённым данным]. Не придумывай цены и кейсы.
Существующее поведение: [какие страницы и формы уже работают].
Область правки: [конкретные файлы или компоненты].
Сначала сравни локальную копию с действующей версией и покажи план.
Сделай один экран. Уточни вопрос, если данных не хватает.
Проверка: [команда сборки], форма с тестовой заявкой, телефон и широкий экран.
В конце покажи diff и список того, что проверил.

Этот текст не избавляет от выбора и проверки. Его задача: не дать ИИ принять недостающие сведения за разрешение фантазировать. Если первый результат не совпал с целью, исправляйте исходное условие или конкретный блок. Добавление десятков прилагательных обычно не помогает. Лучше показать неверный экран и написать, какое действие стало непонятным.

Как принять результат по заданию

Сначала сравните готовую страницу с утверждёнными фактами. Затем проверьте форму, согласие на обработку данных, ошибки отправки, мобильный экран и содержимое <head>. Для работающего проекта выполните штатную сборку и посмотрите diff. Если задача затрагивала дату или цену, проверьте все места их отображения. Класс ошибки важнее одного исправленного блока.

git diff --stat
npm run build

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

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

Нужен ли длинный промпт для создания сайта?

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

Можно ли дать нейросети только ссылку на сайт конкурента?

Ссылка показывает внешний пример, но не ваши услуги, данные и ограничения. Объясните, какой приём берёте как ориентир и что в своём проекте нужно сохранить.

Как запретить выдуманные цены и отзывы?

Назовите единственный утверждённый источник и правило: если факта там нет, оставить вопрос владельцу. После генерации сверьте каждое число вручную.

Когда просить ИИ написать код?

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

Что делать, если ИИ сломал готовую форму?

Посмотрите diff, восстановите ожидаемый маршрут заявки и проверьте остальные формы. Для следующей задачи сузьте область правки.

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