Вайбкодинг — разработка с AI через текстовые запросы (промты). Секрет не в магии, а в качестве запроса: чем конкретнее вы формулируете задачу, тем меньше итераций и багов. Здесь — 25 проверенных шаблонов, с которых удобно начинать.

Базовые правила промтов

  • Указывайте роль: «Ты — опытный frontend-разработчик…» — AI лучше придерживается стиля.
  • Давайте контекст: стек, версии, существующий код, что уже работает.
  • Формулируйте один запрос — одну задачу; большое дробите на шаги.
  • Просите объяснение кода — так легче заметить ошибку до запуска.
  • Не вставляйте реальные секреты, пароли и персональные данные в промпт.

Промты для старта проекта

  • «Ты — senior full-stack разработчик. Спроектируй структуру проекта [описание]: какие папки, файлы и зависимости понадобятся. Дай дерево каталогов и объясни зачем каждый уровень.»
  • «Создай каркас приложения [описание] на [стек]. Начни с минимальной работающей версии: главная страница и одна интерактивная функция. Не добавляй то, о чём не просили.»
  • «Составь дорожную карту MVP для [идея]: что сделать в первую неделю, что отложить на потом. Учитывай, что команда — один человек.»
  • «Задай мне 10 уточняющих вопросов перед тем, как писать код [описание приложения]. Сначала вопросы, код потом.»
  • «Объясни простыми словами, как устроена эта часть кода [вставить код]. Что будет, если я удалю строку [X]?»

Промты для интерфейса

  • «Сверстай адаптивный компонент [название] по описанию: [детали]. Используй семантический HTML, CSS без inline-стилей. Учти состояние с пустыми данными.»
  • «Сделай эту страницу удобнее: [вставить разметку]. Добавь состояния загрузки, ошибок и пустого списка. Не меняй структуру данных.»
  • «Проверь мой CSS на типичные ошибки доступности: контраст, фокус, читаемость на мобильном. Дай список исправлений с объяснением.»
  • «Добавь тёмную тему к этому коду, используя CSS-переменные. Проверь, что цвета не ломают контраст текста и кнопок.»
  • «Напиши стили по BEM для карточки товара: изображение, название, цена, кнопка. Дизайн минималистичный, с плавным hover-эффектом.»

Промты для логики и данных

  • «Напиши функцию [что делает] на [язык]. Требования: [условия]. Обработай крайние случаи: пустой ввод, null, граничные значения. Добавь комментарии.»
  • «Создай схему данных для [сущность]: какие поля, типы, ограничения. Дай пример данных и валидацию.»
  • «Напиши fetch-запрос к API [описание] с обработкой ошибок сети, таймаутом и повторной попыткой. Покажи пример использования.»
  • «Оптимизируй эту функцию: [вставить код]. Сейчас она тормозит на 10 000 записей. Предложи 2 варианта: простой и быстрый.»
  • «Напиши unit-тесты для этой функции: [вставить код]. Покрой основной сценарий, крайние значения и ошибки.»

Промты для исправления ошибок

  • «Объясни пошагово, что делает этот код, и найди в нём ошибку: [вставить код]. Ошибка: [описание]. Не переписывай код целиком, покажи конкретную строку.»
  • «Вот сообщение об ошибке [вставить текст]. Вот код: [вставить]. Объясни причину и предложи решение. Если вероятных причин несколько — перечисли по вероятности.»
  • «Код работает, но иногда выдаёт [ненормальное поведение]. Подумай как детектив: что может пойти не так? Составь чек-лист проверки.»
  • «Сделай код более устойчивым: [вставить]. Добавь обработку ошибок и логи, чтобы потом было проще отладить.»
  • «Сравни две версии функции и объясни, что изменилось и почему вторая версия лучше (или хуже): [код 1] [код 2].»

Промты для документации и передачи

  • «Напиши README для этого проекта: описание, запуск за 3 шага, структура, как вносить изменения. Для человека, который видит проект первый раз.»
  • «Составь комментарии к этому файлу: что делает каждая секция, зачем нужны неочевидные решения. Формат: JSDoc/docstring.»
  • «Опиши этот код блок-схемой в текстовом виде: вход → обработка → выход, с развилками условий. Для понимания логики без чтения кода.»
  • «Напиши инструкцию: как человеку без технического образования запустить этот проект локально. Без профессионального жаргона.»
  • «Сформулирую релиз-ноты для версии 1.1: что нового, что исправлено, известные ограничения. Для пользователей, не для разработчиков.»

Советы для начинающих

Не бойтесь просить «объясни как новичку» — AI отлично адаптирует уровень. Сначала понять, потом получить код: порядок важнее скорости.

Пробуйте одинаковый промпт в разных инструментах (ChatGPT, Claude, Copilot, ЯндексGPT). У каждого свой стиль; со временем вы поймёте, кому что поручать.

Сохраняйте удачные промты в личную библиотеку — со временем она станет вашим главным рабочим инструментом вайбкодера.