Промпты для вайбкодинга: девять формулировок, которые экономят часы

Вы просите «сделай калькулятор ипотеки» и получаете простыню кода, где ставка вшита сразу в нескольких местах, а шрифт подтягивается с внешнего CDN — и потому не грузится вообще. Вы просите поправить одну кнопку — и модель переписывает файл целиком, попутно унося вчерашние правки, которые вам нравились.

Дело почти всегда не в модели. Одна и та же нейросеть по одному запросу выдаёт кашу, а по другому — рабочую страницу с первого раза. Ниже девять формулировок, которые в вайбкодинге экономят больше всего времени, и разбор, почему каждая работает. Если само занятие в новинку — начните с материала что такое вайбкодинг, здесь сразу практика.

Вайбкодинг устроен просто: вы описываете результат словами, а нейросеть пишет код. Проблема в том, что каждую неназванную деталь модель достраивает по своему представлению о среднем таком приложении, и оно не обязано совпадать с вашим. Большая часть «плохих ответов» — это точные ответы на неточный вопрос.

Второе, что чаще всего ломает результат, — среда. Песочница артефакта блокирует любые сетевые запросы: ни CDN, ни fetch к чужому API, ни картинка по ссылке. Всё живёт внутри одного файла, а библиотеки берутся из локального набора платформы. В проектах наоборот — настоящий сервер, интернет и зависимости из npm. От того, куда вы просите собрать, формулировка меняется целиком.

Ещё одна деталь, которая экономит нервы: проекты работают только в режиме «Задачи» — в обычном чате их просто нет (чем отличаются режимы). Там же в выборе модели живут сценарии: «Код и разработка», «Сложные проекты», «Экономный агент» и другие. И запускает песочницу всегда человек: модель умеет создавать и править файлы проекта, читать их и смотреть логи, но нажать «Запустить» за вас не может.

Собери HTML-артефакт: <что это, одной фразой>.
Кто и в какой момент этим пользуется: <опишите>.
Что на экране: <перечислите блоки — поля ввода, кнопка, таблица результата>.
Данные для демо вшивай прямо в код заглушкой: сеть в артефакте заблокирована,
никаких CDN, fetch и картинок по ссылке.
Всё в одном файле — разметка, стили, скрипты.
Сначала работающая версия без оформления, красоту сделаем вторым шагом.

Что подставить: суть, пользователя и список того, что видно на экране. Тип артефакта называйте явно — html это выбор по умолчанию и подходит почти всегда, а React-артефакт берите, только если нужен интерфейс с состоянием, и помните, что импорты в нём разрешены лишь из react, react-dom, recharts и lucide-react; любой другой пакет уронит сборку. Типичная ошибка — «сделай красивый лендинг для моего бизнеса»: модель придумает и бизнес, и тексты, и подтянет шрифт с внешнего адреса, который в песочнице не откроется. Если задача именно про лендинг, соберите бриф по фреймворку промптов на ТЗ.

Пока ничего не собирай. Опиши текстом:
1) какие экраны и блоки будут,
2) какие данные хранятся и в каком виде,
3) что происходит по каждому действию пользователя,
4) какие библиотеки понадобятся и зачем.
Отдельно отметь места, где ты что-то додумал за меня.
Жди моего «ок», потом собирай.

Разбор плана в несколько строк стоит одного дешёвого ответа, разбор уже собранного файла — целого запроса и вашего времени. Здесь же всплывают расхождения: вы думали про одну таблицу, модель — про три вкладки. Типичная ошибка — забыть последнюю строку: без явного «жди моего ок» модель всё равно соберёт версию, и обсуждать вы будете уже готовое.

Вынеси все данные и настройки в один блок в самом начале файла:
<тексты, цены, список позиций, цвета, лимиты>.
Назови его CONFIG, к каждому полю дай короткий комментарий на русском.
Ниже по коду эти значения не дублируй — только ссылайся на CONFIG.
Логику не меняй.

После этого свои цены и тексты вы правите руками прямо в файле, не тратя ни одного запроса к модели. Просите об этом рано, вторым-третьим сообщением: когда в артефакте уже десяток правок, перенос данных наверх превращается в отдельную стройку. Если считаете деньги, добавьте «суммы считай через decimal.js» — библиотека лежит на платформе локально, а во float деньги считать нельзя.

Правь только <что именно: блок с итоговой суммой / функцию calcTotal>.
Остальной файл верни без изменений: разметку, стили и другие функции не трогай.
Сейчас: <как ведёт себя сегодня>.
Нужно: <как должно быть>.
Если правка неизбежно затрагивает что-то ещё — сначала скажи что и почему, потом делай.

Без явных границ модель переписывает файл целиком и вместе с новой правкой уносит две прошлые. Называйте место максимально точно: имя функции, заголовок блока, надпись на кнопке. Типичная ошибка — «поправь расчёт, а заодно сделай посимпатичнее»: это два разных запроса, и во втором модель имеет полное право перетряхнуть всю вёрстку.

Эта версия рабочая, дальше идём от неё.
Перечисли, что в ней уже сделано и считается неприкосновенным:
<расчёт, вёрстка шапки, палитра, тексты>.
Следующая правка ровно одна: <что>.
Всё, что не входит в эту правку, должно остаться байт в байт.

Слово «зафиксируй» само по себе для модели пустое — работает список того, что менять нельзя. Страховка есть и на уровне платформы: у артефакта линейная история версий, к прежней можно вернуться, и возврат создаёт новую версию с прежним содержимым, ничего не стирая. Но откат — это заново потраченное время, а список неприкосновенного — одна строка в промпте.

Меняю демо-данные на свои. Вот образец: <небольшой кусок ваших данных как есть>.
Подгони код под мой формат, а не мой формат под код.
Если каких-то полей не хватает — скажи каких, значения не выдумывай.
Проверь, что ничего не ломается при <пустом списке, отсутствующей цене,
очень длинном названии>.

Дайте образец, а не всю выгрузку: на версию артефакта отведён 1 МБ, и целиком вываленная таблица не нужна ни файлу, ни контексту. Для регулярных данных попросите разбирать CSV через PapaParse, а Excel — через SheetJS, обе библиотеки доступны локально. Типичная ошибка — молча ждать, что модель угадает содержимое пустых ячеек: без прямого запрета она подставит правдоподобные числа, и вы примете их за свои.

Артефакт открывается, но <что видно: пустой экран / кнопка не считает /
таблица без строк>.
В консоли браузера: <вставьте текст ошибки целиком, вместе с номером строки>.
Ломается после: <шаги, которые к этому приводят>.
Найди причину, объясни её одной фразой и почини минимальной правкой.
Если причин может быть несколько — перечисли их, не угадывай.

Дословный текст ошибки стоит десятка попыток «не работает, почини»: без него модель перебирает гипотезы и переписывает наугад, а платите вы за каждый заход. Пересказ своими словами не годится, нужна именно строка из консоли. И учитывайте разницу сред: в проекте у модели есть отдельный инструмент для чтения логов песочницы, а у артефакта источник правды один — консоль браузера, которую открываете вы.

Для <графика по месяцам / таблицы с сортировкой / схемы связей>
используй <Chart.js / Tabulator / Mermaid> — эта библиотека есть на платформе локально.
Подключай локальную версию, ссылку на CDN не ставь: сеть в артефакте закрыта.
Если нужной библиотеки в доступных нет — скажи об этом и предложи замену
из доступных, не подставляй произвольный пакет.

Не названная по имени библиотека — лотерея: модель возьмёт привычную ей и повесит на неё внешнюю ссылку, после чего артефакт откроется пустым. Выбирать есть из чего: графики — Chart.js, ApexCharts, ECharts, D3; таблицы и календари — Tabulator, AG Grid Community, FullCalendar; документы — marked, Mermaid, Quill, jsPDF с jsPDF-AutoTable, html2canvas, qrcode; числа и данные — math.js, decimal.js, lodash, dayjs, PapaParse, SheetJS; интерфейс и анимация — Lucide, Font Awesome 6, Tailwind, Alpine.js, SortableJS для drag-and-drop, anime.js, Motion One; 3D и физика — three.js, CANNON.js, Matter.js, p5.js. В React-артефакте набор другой и совсем короткий: react, react-dom, recharts, lucide-react.

Вот файл: <вставьте код>.
Объясни: 1) что он делает в целом, 2) из каких частей состоит и что кого вызывает,
3) где лежат значения, которые я захочу поменять,
4) где он сломается, если <список вырастет вдесятеро / придёт пустое значение>.
Ничего не переписывай, только разбор.
Схему связей нарисуй артефактом mermaid.

То же самое годится для собственного кода через месяц — «чужим» он становится быстрее, чем кажется. Отдельная просьба про mermaid-артефакт даёт схему, которую можно смотреть, а не вычитывать. И держите запрет на переписывание: без него модель начнёт «заодно улучшать», и вы получите новый файл вместо понимания старого.

Формулировка — это не только качество результата, но и счёт. Пять привычек, которые заметно сокращают расход (подробнее про экономию).

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

Проверить всё это дешевле, чем про это читать: артефакты работают на бесплатном тарифе полностью, при регистрации дают 100 нейронов — один раз, а не ежемесячно — и 52 модели из 95. Ограничения бесплатного — 15 сообщений к платным моделям каждые 4 часа, нет поиска в интернете и нет проектов. Следующая ступень, «Старт» за 890 ₽, — это 300 нейронов, 81 модель, поиск в интернете и 30 минут проектов в сутки; чем отличаются старшие тарифы, разобрано отдельно (какой тариф выбрать). Возьмите первый промпт отсюда, подставьте свою задачу и посмотрите, что придёт в ответ, а если начинаете совсем с нуля — держите рядом разбор вайбкодинг с нуля.