Промпт для создания лендинга: от оффера до mobile-приёмки

1. Зафиксируйте предложение

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

Не смешивайте три продукта на первом экране. Дополнительные предложения могут появиться ниже или в отдельном каталоге.

2. Перечислите настоящие доказательства

Дайте реальные экраны, воспроизводимое демо, состав коробки, условия и источники. Учебный сценарий называйте учебным.

Если отзывов или клиентской статистики нет, запретите их создавать. Честное объяснение механики сильнее фальшивого логотипа.

3. Опишите смысловую структуру

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

Каждый раздел закрывает возражение. Не требуйте фиксированное число блоков, если смысл помещается короче.

• надзаголовок с категорией;
• benefit-first H1;
• подзаголовок с механизмом;
• два различимых CTA;
• четыре шага от входа до результата.

4. Дайте визуальное направление

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

Фраза «современно и премиально» приводит к generic gradient-карточкам. Конкретнее: светлый тёплый фон, editorial grid, тёмно-зелёный текст, один оранжевый акцент, реальные экраны продукта.

5. Определите техническую основу

Укажите стек, существующие компоненты, необходимость пререндера, canonical, JSON-LD, sitemap и аналитику. Не разрешайте новый фреймворк без причины.

CTA должны вести в реальные маршруты и иметь события аналитики. Телефонная заглушка не считается готовым потоком.

6. Добавьте browser-приёмку

Проверьте desktop и 390 px mobile, меню, якоря, CTA, keyboard, ошибки консоли, горизонтальный скролл и исходный HTML. Сравните production build, а не только dev-server.

Изображения имеют явные размеры, правильный aspect ratio и разумный вес. Реальный экран нельзя растягивать ради макета.

Каркас задачи для ИИ

«Создай лендинг [продукт] для [аудитория]. Первый экран сообщает [оффер] и ведёт к [CTA]. Используй только доказательства [список], не выдумывай кейсы и интеграции. Визуальное направление [характер], референсы используются по принципам, не копируются. Переиспользуй [стек]. Приёмка: build, статический HTML, desktop/mobile, CTA, console 0 и diff-check».

Effort помогает заполнить структуру, но выбор оффера и доказательств остаётся владельцу продукта.