Промпт для создания сайта: готовый бриф и проверка результата
Как написать промпт для сайта в Lovable: аудитория, сценарий, реальные тексты, состояния формы и критерии приёмки на примере лендинга интервью.
Промпт для создания сайта — это короткий бриф, по которому ИИ понимает не только внешний вид страницы, но и поведение посетителя. Запрос «сделай современный лендинг» оставляет модели слишком много решений: кому он нужен, что обещает, куда ведёт кнопка и действительно ли отправляется заявка.
Соберём учебный лендинг для приглашения на продуктовые интервью. В примере используем Lovable, но структура брифа пригодится и при работе с другим ИИ-конструктором. Установка и публикация уже разобраны в руководстве по Lovable; здесь задача — научиться ставить требование и принимать результат.
Мой подход. Я бы начинал с одного действия посетителя. Если в первой версии одновременно есть покупка, подписка, запись на звонок и скачивание файла, трудно понять, помогает ли сайт решить исходную задачу.
1. Опиши задачу страницы
Для упражнения возьми вымышленный проект «После встречи». Он исследует, как аккаунт-менеджеры фиксируют договорённости с клиентами. Лендинг приглашает на разговор, но пока не продаёт продукт и не обещает экономию времени.
| Поле брифа | Значение в учебном примере |
|---|---|
| Аудитория | Аккаунт-менеджеры digital-агентств |
| Цель страницы | Объяснить исследование и показать запись на интервью |
| Главное действие | Оставить контакт для согласования времени |
| Обещание | Разговор о текущем процессе, без продажи продукта |
| Ограничение | Учебный прототип, реальные данные не отправляются |
| Успех прототипа | Пользователь понимает приглашение и проходит форму |
В рекомендациях Lovable по промптам предлагается заранее определить цель, использовать содержательные тексты и уточнять отдельные части интерфейса. Ниже — наш прикладной бриф, а не скопированный шаблон сервиса.
2. Передай готовый промпт
Открой новый проект Lovable. Начни с Plan mode, чтобы согласовать структуру до реализации. По документации Lovable этот режим помогает обсуждать решения и не меняет код. После проверки плана переходи к сборке.
Создай план одностраничного учебного сайта «После встречи».
Аудитория: аккаунт-менеджеры digital-агентств.
Цель: приглашение на исследовательское интервью о договорённостях
после клиентских встреч. Мы не продаём готовый продукт.
Структура и точные тексты:
1. Первый экран.
Заголовок: «Как вы сохраняете договорённости после встречи?»
Подзаголовок: «Ищем аккаунт-менеджеров агентств для 30-минутного
разговора о заметках, задачах и потерянных решениях».
Кнопка: «Посмотреть условия». Она прокручивает к разделу участия.
2. Условия.
«Поговорим о вашем текущем процессе. Ничего покупать не нужно.
Время встречи согласуем отдельно. Запись разговора — только
после отдельного согласия участника».
3. Форма: имя, рабочий email, необязательный комментарий.
Кнопка: «Проверить форму».
4. Видимая подпись возле формы:
«Учебный прототип. Данные не отправляются и не сохраняются».
Поведение формы:
пустое имя и неверный email показывают понятную ошибку рядом с полем;
введённый текст не исчезает при ошибке;
при валидных данных показывается «Форма заполнена верно.
В этом прототипе заявка не отправлена».
Дизайн: светлый фон, тёмный текст, один зелёный акцент,
читаемый размер текста, одна колонка на телефоне.
Без выдуманных отзывов, логотипов клиентов, статистики и таймера.
Не подключай базу, оплату, рассылку или внешнюю форму.
Сначала покажи план и вопросы, которые мешают его выполнить.Этот промпт содержит полноценный учебный сценарий. Пометка о прототипе нужна, потому что форма действительно ничего не отправляет. Когда будешь создавать настоящий лендинг, замени учебный режим на конкретный разрешённый способ приёма заявок и проверь доставку. Нельзя просто убрать подпись и оставить прежнюю имитацию отправки.
3. Собери и проверь сценарий
Прочитай план. Убедись, что Lovable не добавил регистрацию пользователей, оплату или CRM без необходимости. Затем попроси реализовать согласованный вариант и открой предпросмотр.
Проверяй сайт как посетитель, а не как автор запроса:
- Прочитай первый экран. Понятно ли, кого приглашают, о чём разговор и сколько он длится?
- Нажми «Посмотреть условия». Попал ли ты к нужному разделу?
- Оставь имя пустым, а в email введи
test. Должны появиться две понятные ошибки. - Введи учебное имя «Анна» и
anna@example.com. Должно появиться сообщение о проверке формы без утверждения, что заявка отправлена. - Открой узкий экран. Проверь переносы заголовка, доступность кнопки и отсутствие горизонтального скролла.
- Пройди форму клавишей Tab. У каждого поля должна быть видимая подпись, у фокуса — заметное положение.
Это план ручной приёмки. Реальный проект Lovable в рамках подготовки статьи не создавался, результаты прохождения не заявляются.
4. Исправляй конкретный блок
Вместо «сделай удобнее» опиши наблюдаемую проблему и ожидаемое поведение:
В мобильном предпросмотре сообщение об ошибке email появляется
далеко от поля. Перенеси его непосредственно под email.
При повторной проверке сохраняй имя и комментарий.
Не меняй тексты первого экрана, порядок блоков и учебный режим формы.
После правки перечисли, что проверить вручную.Повтори проверку неверного и верного email. Затем нажми основную кнопку ещё раз: локальная правка могла повлиять на соседний участок. Если дизайн нравится, но форма не работает по заданному сценарию, прототип ещё не принят.
Для боевой версии отдельно определи место хранения заявок, доступ команды, текст согласия на обработку данных и сообщение после реальной доставки. Сделай тестовую заявку и найди её на стороне получателя. Только после этого оценивай конверсию страницы: нажатие кнопки и полученный контакт — разные события.
Сохрани бриф вместе с критериями проверки. Он пригодится и для следующей итерации, и для передачи задачи коллеге. Если запрос постоянно разрастается, используй сценарий улучшения промпта. На курсе по ИИ-инструментам и вайбкодингу такой путь можно продолжить до работающего продукта.
Преврати ИИ-инструменты в рабочую систему
«Быстрый старт в AI»: практические воркшопы по AI-инструментам, прототипам и автоматизации. Собираем результат, который можно применить в работе.
21 практических воркшопов · записи · вопросы автору в чате
Посмотреть программу курса ↗