Главная проблема новичков в вайбкодинге — садиться за Cursor или Replit без чёткого плана. ИИ начинает додумывать, путаться и выдавать хаос
Этот промт собирает полное техзадание за один диалог. Нужно только заполнить пустые поля ✅
Роль: опытный продуктовый менеджер и веб-разработчик.
Задача: составить полное техническое задание для простого веб-проекта на основе данных ниже. Результат должен быть готов для передачи в AI-кодер (Cursor, Replit, Bolt, Lovable).
--- ЗАПОЛНИТЬ ---
1. ИДЕЯ В ОДНОМ ПРЕДЛОЖЕНИИ:
[Например: сайт-визитка для барбершопа / трекер привычек / лендинг для продажи курса / портфолио фотографа]
2. ДЛЯ КОГО ЭТОТ ПРОЕКТ:
[Например: клиенты барбершопа, подписчики в соцсетях, покупатели на маркетплейсе]
3. ГЛАВНОЕ ДЕЙСТВИЕ ПОСЕТИТЕЛЯ:
[Что человек должен сделать на сайте? Например: оставить заявку / купить товар / записаться / посмотреть портфолио]
4. СКОЛЬКО СТРАНИЦ (примерно):
[1 — лендинг, 3-5 — небольшой сайт, 5+ — полноценный проект]
5. ОБЯЗАТЕЛЬНЫЕ БЛОКИ (отметить нужное):
- [ ] Шапка с логотипом и меню
- [ ] Главный экран с заголовком и кнопкой
- [ ] Блок "О нас" / "Обо мне"
- [ ] Каталог товаров или услуг
- [ ] Галерея / портфолио
- [ ] Отзывы
- [ ] Форма обратной связи
- [ ] Контакты и карта
- [ ] Подвал сайта
- [ ] Другое: [вписать]
6. СТИЛЬ И НАСТРОЕНИЕ:
[Например: минимализм, тёмная тема, яркий и молодёжный, строгий деловой, уютный и тёплый]
7. ЦВЕТА (если есть предпочтения):
[Например: чёрный + золотой, пастельные тона, синий + белый, или "на усмотрение"]
8. РЕФЕРЕНСЫ (если есть):
[Ссылки на сайты, которые нравятся, или описание словами]
9. НУЖНА ЛИ МОБИЛЬНАЯ ВЕРСИЯ: да / нет
10. ДОПОЛНИТЕЛЬНЫЕ ФУНКЦИИ:
- [ ] Анимации при прокрутке
- [ ] Кнопка WhatsApp / Telegram
- [ ] Интеграция с платёжной системой
- [ ] Личный кабинет
- [ ] Мультиязычность
- [ ] Другое: [вписать]
--- КОНЕЦ ЗАПОЛНЕНИЯ ---
На основе этих данных:
ЧАСТЬ 1 — ТЕХЗАДАНИЕ
- Описать структуру проекта: список страниц, порядок блоков на каждой
- Прописать текст для каждого блока (заголовки, подзаголовки, кнопки, заглушки для контента)
- Указать рекомендуемый стек: HTML/CSS/JS, React, или конструктор — с объяснением выбора
- Описать визуальный стиль: шрифты, цветовую палитру (HEX-коды), скругления, отступы, размеры
- Перечислить все интерактивные элементы: формы, кнопки, попапы, анимации
ЧАСТЬ 2 — ПРОМТ ДЛЯ AI-КОДЕРА
- Сгенерировать готовый промт, который можно вставить в Cursor / Replit / Bolt для создания этого проекта целиком
- Промт должен содержать всю информацию из техзадания в структурированном виде
ЧАСТЬ 3 — ПУБЛИКАЦИЯ
- Пошагово описать размещение на бесплатном хостинге (Vercel, Netlify или GitHub Pages)
- Объяснить подключение домена (если нужно)
- Указать как проверить работоспособность на телефоне и компьютере
Формат ответа: структурированный документ с заголовками и нумерованными списками. Без воды и общих фраз — только конкретика.
Как работает схема?
→ Заполнить поля обычными словами
→ Нейросеть выдаст полное ТЗ = готовый промт для вайбкодинга
→ Скопировать промт и вставить в Cursor (или другой сервис)
→ Получить рабочий проект
Весь путь от идеи до сайта в интернете — без единой строчки кода вручную
👍 — уже пошел учиться
🤡 — уже умею выстраивать цепочки из нейросеетей
🪐 Вездесущий ИИ | Чат с админом | Навигация канал