Промпты для вайбкодинга: как ставить задачи AI-агенту
Готовые примеры промптов для сайта, мобильной версии и формы. Как объяснить AI задачу, сохранить работающие функции и проверить результат.
Содержание статьи
В запросе к AI укажи, что должен сделать пользователь, какой экран нужно изменить, что сохранить и как проверить результат. Например: «На странице курса сделай цену и состав доступа видимыми до покупки. Сохрани текущую оплату. Проверь страницу на телефоне». Ниже — три запроса, которые можно адаптировать к своему проекту.
Из чего состоит рабочий промпт
Запрос «сделай красиво» оставляет агенту слишком много решений. Он сам выбирает, какой экран менять, какие зависимости добавить и что считать готовым. В результате можно получить заметную переделку, которая не решает исходную задачу.
Рабочий промпт начинается с результата. После него указывается нужная часть проекта, ограничения и проверка. Необязательно писать много: точная задача на десять строк обычно полезнее общего описания на несколько страниц.
- Что должно измениться для пользователя.
- В какой странице, компоненте или сервисе работать.
- Какие существующие решения нужно сохранить.
- Чего агент не должен добавлять или переделывать.
- Какими командами и сценариями проверить готовность.
Универсальный шаблон задачи
Начни с формулировки действия: подключить форму к API, исправить мобильную навигацию, добавить сохранение результата или найти причину ошибки. Затем обозначь границы и попроси не менять несвязанные файлы.
Если проект незнаком агенту, раздели работу на два сообщения. В первом он только изучает структуру и предлагает план. Во втором реализует согласованный шаг. Так проще заметить неверное предположение до того, как изменится код.
- Изучи текущую реализацию и пока ничего не меняй.
- Опиши причину проблемы и перечисли файлы, которые понадобятся.
- Предложи минимальный план без смены стека.
- После подтверждения реализуй только согласованный этап.
- Запусти проверки и перечисли фактические изменения.
Как продолжать после первого ответа
Не повторяй весь исходный промпт при каждой правке. Ссылайся на конкретный результат: какой блок всё ещё не работает, на какой ширине ломается вёрстка или какой ответ API отличается от ожидаемого.
Если агент несколько раз исправляет последствия собственных изменений, остановись. Верни рабочую версию, уточни исходную причину и начни новый ограниченный шаг. Это быстрее, чем бесконечно дополнять неудачную ветку.
Промпт для понятного лендинга
Замени поля в квадратных скобках на описание своего продукта. Если сайт уже работает, дай агенту доступ к его файлам. Прикрепи свои изображения и тексты, которые нужно сохранить.
Переделай главную страницу [название продукта]. Её читает [кто этот человек]. Он должен понять, что получает за [цена], и перейти к [целевое действие].
На первом экране: короткий заголовок, одно пояснение, реальный пример продукта и основная кнопка. Далее: что входит, как это работает, стоимость и ответы на вопросы.
Сохрани существующие адреса страниц, вход и оплату. Не добавляй вымышленные отзывы, цифры продаж и обещания дохода. Используй текущие шрифты и цвета.
Проверь страницу на ширине 390 и 1280 пикселей: текст не обрезан, кнопки читаются, нет горизонтальной прокрутки. Сначала покажи план изменений.Промпт для сломанной мобильной версии
Приложи скриншот проблемы и укажи страницу. Слова «всё поехало» лучше заменить конкретным наблюдением: кнопка закрывает текст, карточка шире экрана или меню не закрывается.
На странице [адрес] при ширине экрана 390 пикселей [опиши проблему]. Прикладываю скриншот.
Найди причину и исправь её, сохранив внешний вид на компьютере. Не скрывай проблему обрезанием всей страницы и не уменьшай весь интерфейс.
Проверь ширины 320, 390, 768 и 1280 пикселей. Пройди меню и основные кнопки. Покажи, что изменил и что удалось проверить.Промпт для формы, которая действительно работает
Укажи, куда должны попадать данные: в уже существующий кабинет, базу или выбранный сервис. До проверки используй тестовые данные без чужих телефонов и почтовых адресов.
На странице [адрес] есть форма [название]. После отправки данные должны попадать в [куда], а пользователь должен видеть подтверждение только после успешного сохранения.
Используй существующий способ хранения данных. Добавь проверку обязательных полей, состояние отправки и понятную ошибку при сбое. Повторное нажатие не должно создавать дубликаты.
Не показывай ключи сервисов в браузере. Проверь пустую форму, правильные данные, сбой соединения и повторную отправку. Для проверок используй тестовые записи и перечисли их в отчёте.Какие задачи требуют дополнительной проверки
Авторизация, роли, платежи, загрузка файлов и работа с персональными данными нельзя принимать только по сообщению «готово». Попроси агента перечислить модель угроз, проверки доступа и места хранения секретов, а затем проверь сценарии для разных ролей.
API-ключи не вставляют в промпт и не сохраняют в репозитории. Агенту достаточно названия переменной окружения и описания того, где она будет задана при деплое.
Нужны ли специальные магические промпты?
Нет. Качество больше зависит от контекста, границ задачи и понятной проверки, чем от особых формулировок.
Можно попросить агента сделать весь продукт одним запросом?
Можно получить прототип, но его будет сложно проверить и развивать. Для рабочего продукта надёжнее двигаться этапами: интерфейс, данные, API, доступы и деплой.
Связанные материалы
Следующие материалы помогут выбрать первый проект, показать результат и найти заказчика.
Начни с бесплатного практического маршрута
В личном кабинете можно начать бесплатно, увидеть структуру программы и перейти от чтения к собственному работающему проекту.