Шпаргалка по промптам для вайбкодинга
Готовые шаблоны запросов к ИИ. Копируйте, подставляйте свои данные — и вперёд!
Как пользоваться
Нажмите «Копировать» на любом блоке, вставьте в Claude/ChatGPT/Cursor и замените [подсказки в скобках] на свои данные.
🚀 Создание сайта с нуля
Аналогия
Это ваш первый заказ в ресторане. Чем подробнее опишете — тем вкуснее будет блюдо.
Создай лендинг для [тип бизнеса], название — «[Название]».
Структура:
— Шапка: логотип и меню ([пункт 1], [пункт 2], [пункт 3])
— Главный баннер: заголовок, короткий текст, кнопка «[текст кнопки]»
— Секция услуг: [3-4] карточки с иконками и описанием
— Отзывы клиентов: [2-3] карточки с фото, именем, текстом
— Контакты: адрес, телефон, email, карта
Стиль: [минималистичный / яркий / корпоративный / уютный].
Основной цвет: [цвет]. Акцентный: [цвет]. Фон: [цвет].
Шрифт: современный, без засечек.
Сделай адаптивным для мобильных устройств.
🔧 Исправление ошибки
Аналогия
Как описать проблему врачу: где болит, когда началось, что делали перед этим.
У меня ошибка в проекте.
Текст ошибки:
[вставьте текст ошибки из терминала]
Что делал перед этим:
[опишите, что вы делали, когда возникла ошибка]
Вот файл с ошибкой:
[вставьте код файла]
Объясни простым языком, что не так, и исправь.
➕ Добавить новую секцию
Добавь на сайт новую секцию — «[название секции]».
Что в ней:
— [описание содержимого: карточки, текст, изображения]
— [количество элементов]
— [особенности: кнопка, ссылка, форма]
Расположи после секции «[название существующей секции]».
Стиль — в одном стиле с остальным сайтом.
📱 Сделать сайт адаптивным
Сделай этот сайт адаптивным для мобильных устройств.
Правила:
— На телефоне (до 768px): меню → бургер-меню,
карточки → одна колонка, текст → крупнее
— На планшете (768-1024px): карточки → 2 колонки
— На десктопе: как есть
Убедись, что:
— Кнопки удобно нажимать пальцем (минимум 44px)
— Текст читается без увеличения
— Изображения не выходят за экран
✨ Добавить анимации
Добавь плавные анимации на сайт:
1. Секции появляются снизу при прокрутке (fade-in + slide-up)
2. Карточки появляются с задержкой друг за другом (stagger)
3. Кнопки плавно меняют цвет при наведении
4. Заголовки плавно проявляются
Используй CSS-анимации или IntersectionObserver.
Анимации должны быть мягкими (ease, 0.3-0.6s).
Не делай слишком быстро или слишком медленно.
🎨 Изменить дизайн
Измени дизайн сайта:
Сейчас: [опишите, как выглядит сейчас]
Хочу: [опишите, как должно выглядеть]
Конкретно поменяй:
— Цвета: [старые] → [новые]
— Шрифт: [какой хочу]
— Скругление углов: [значение, например 16px]
— Тени: [мягкие / без теней / выраженные]
— Отступы: [больше воздуха / компактнее]
🗄 Добавить базу данных
Аналогия
База данных = Excel-таблица в облаке. Только она работает с вашим сайтом автоматически.
Добавь к сайту базу данных через Supabase.
Нужна таблица «[название]» с полями:
— [поле 1] (тип: текст / число / дата)
— [поле 2] (тип: текст / число / дата)
— [поле 3] (тип: текст / число / дата)
Сделай:
1. Форму для добавления записей
2. Список всех записей на отдельной странице
3. Кнопку удаления записи
Используй Supabase JS-клиент.
📤 Опубликовать сайт
Помоги опубликовать сайт на Vercel.
Мой проект — Next.js.
Репозиторий на GitHub: [ссылка или «ещё нет»].
Расскажи пошагово:
1. Как залить проект на GitHub
2. Как подключить Vercel
3. Как настроить домен (если есть)
Объясни простым языком, я новичок.
Готово
5 правил хорошего промпта: что нужно, структура, стиль, цвета, детали. Чем подробнее — тем точнее результат!