# Building Practical Vibe‑Coding Prompts: Templates & Examples - URL: https://vladimirnovozhilov.com/en/blog/building-practical-vibe-coding-prompts-templates-examples/ - Author: Владимир Новожилов - Published: 2026-09-30 - Category: AI & vibe coding > Vibe coding is a discipline, not a magic phrase: a clear task, defined environment boundaries, a required result format and explicit quality checks. This article provides a prompt structure, Cursor and Claude Code templates, examples for web apps and agents, a CONFIG block, an acceptance checklist for AI code, and a comparative table of platform limits. ## Введение — зачем это нужно и как устроен вайбкодинг Чтобы AI‑IDE вроде Cursor и Claude Code выдавали рабочий код и быстрый PR, им нужен понятный бриф: что именно сделать, в каких границах и в каком формате вернуть результат. Подход держится не на «магической формулировке», а на дисциплине: чёткая постановка задачи, описанные ограничения среды (артефакт или проект), ожидаемый формат и явные проверки качества. Такой промпт сокращает число итераций, экономит токены и даёт предсказуемый итог. ![Четыре шага вайбкодинга: бриф → генерация → проверка → релиз](./images/prompty-dlya-vaybkodinga-shablony-primery-funnel.png) В материале — структура рабочего промпта, примеры для Cursor и Claude Code, готовые заготовки под веб‑приложения, шаблоны под агентов, CONFIG‑блок и чеклист для приёмки кода от AI. В конце — сравнительная таблица инструментов и статическая форма‑генератор, чтобы [сразу копировать и запускать работу](/en/blog/fast-path-to-mvp-and-utilities-with-vibe-coding/). ## Почему из промпта выходит слабый код: 7 типичных ошибок Коротко: модель домысливает всё, чего вы не уточнили. Типовые промахи и что с ними делать: 1) Нет контекста домена и стека - Ошибка: «Сделай калькулятор цен» — без указания валюты ₽, точности, налогов. - Исправление: зафиксируйте стек (Next.js + PostgreSQL в Yandex Cloud), локаль ru‑RU, формат дат dd.mm.yyyy, требования по доступности (ARIA) и бизнес‑правила. 2) Путаете артефакт vs проект (песочница) - Ошибка: просите переписать 5 файлов в артефакте, где разрешён один self‑contained файл без IO/сети. - Исправление: явно задавайте режим. Для песочницы — single‑file, без сетевых вызовов; для проекта — перечислите директории, формат диффа и ограничения по файлам. 3) Не фиксируете версии и «границы мира" - Ошибка: «установи библиотеку X» в закрытой корпоративной сети. - Исправление: опишите версии Node/PNPM, доступные реестры, локальные зеркала, лимиты токенов/запросов, доступ к CDN. 4) Смешиваете несколько целей в одном запросе - Ошибка: «Сгенерируй архитектуру, напиши тесты и задеплой» в одной реплике. - Исправление: один промпт — один минимальный инкремент. Для больших задач попросите план, дальше выполняйте шаги последовательно. 5) Не задаёте формат вывода - Ошибка: длинная «болтовня» без пригодных к копированию блоков кода. - Исправление: требуйте строгое форматирование: только diff/patch, только JSON или список изменённых файлов. 6) Нет критериев приёмки - Ошибка: «сделай быстрее». Сколько — непонятно. - Исправление: зафиксируйте метрики: TTFB < 200 мс, размер бандла < 200 КБ, Lighthouse A11y ≥ 90, Postgres‑запрос ≤ 100 мс. 7) Игнорируете безопасность и приватность - Ошибка: секреты в коде, отсутствие валидации ввода. - Исправление: выносите секреты в переменные окружения, опишите политику PII, правила логирования и проверки на prompt injection. ## Базовая структура рабочего промпта (Контекст / Задача / Ограничения / Формат) Коротко: рабочий промпт = Контекст → Задача → Ограничения → Формат ответа → Проверки. Шаблон для copy&paste (универсальный для Cursor/Claude Code): ```json { "role": "Вы senior full‑stack engineer. Пишите кратко, без воды.", "context": { "stack": ["Next.js 14", "TypeScript", "PostgreSQL", "Yandex Cloud"], "domain": "B2B инструмент ценообразования для ₽, локаль ru-RU, дата dd.mm.yyyy", "repo_rules": { "mode": "project|artifact", "allowed_paths": ["app/", "lib/", "tests/"], "forbidden_paths": ["node_modules/", "dist/"] } }, "task": { "summary": "Минимальный инкремент: один экран с формой и валидацией, сохранение в БД", "input": "JSON payload формы", "output": "Pull Request или patch‑дифф" }, "constraints": { "network": "off в артефакте, в проекте — только корпоративные домены", "performance": {"ttfb_ms": 200, "bundle_kb": 200}, "security": ["sanitize input", "no secrets in code"], "a11y": ["ARIA", "контраст ≥ 4.5:1", "клавиатурная навигация"] }, "format": { "style": "ONLY_PATCH", "include": ["список изменённых файлов", "комментарий к каждому изменению"], "exclude": ["лишний текст", "скриншоты"] }, "checks": [ "юнит‑тесты на ключевые функции", "линтеры без ошибок", "миграция Postgres" ] } ``` Про CONFIG‑блок в коде. Добавляйте в начало артефакта или файла манифест с параметрами: ```ts /* CONFIG name: "pricing-form" mode: "artifact" // или "project" locale: "ru-RU" currency: "RUB" date_format: "dd.MM.yyyy" limits: { tokens_per_iter: 3000, files_editable: 1 } notes: ["decimal.js для расчётов", "без сетевых вызовов"] */ ``` Зачем: модель видит границы среды и правила, а вы экономите итерации и токены. ![CONFIG‑блок и строгий формат ответа экономят токены](./images/prompty-dlya-vaybkodinga-shablony-primery-economy.png) ## Промпты для вайбкодинга: быстрый старт и практика Дальше — рабочие примеры под реальные сценарии. Их можно вставлять в Cursor, Claude Code и другие AI‑IDE. В конце раздела — заготовки под веб‑приложения. ## Быстрый старт: 5 шаблонов промптов для начала проекта (copy&paste) ### Промпт: генерация архитектуры проекта ```text Вы — Principal Engineer. Цель: предложить архитектуру проекта Next.js 14 + TypeScript + PostgreSQL (Yandex Cloud), домен: B2B калькулятор цен в ₽, локаль ru‑RU, дата dd.mm.yyyy. Ограничения: - mode: project, менеджер: pnpm, формат ответа: только markdown‑codeblock с деревом директорий и файлами, затем список зависимостей с версиями. - Без внешних сетевых вызовов. БД — PostgreSQL. Миграции через SQL. - Без демо‑данных, сразу подготовить scaffolding для unit‑тестов. Выход: 1) Дерево директорий (app/, lib/, db/, tests/) 2) Список ключевых модулей и их ответственность 3) Минимальный pipeline: линтер, тесты, сборка 4) Риски и trade‑offs (кратко) ``` ### Промпт: первый файл / single‑file артефакт ```text mode: artifact. Стек: чистый JS + HTML. Задача: сделать виджет расчёта цены в ₽ с НДС, точность до копейки. Используйте decimal.js, не используйте сетевые вызовы. Локаль: ru‑RU, dd.mm.yyyy, доступность: ARIA. Формат ответа: один код‑блок с полным самодостаточным HTML+JS. Вверху поместите CONFIG‑блок с locale, currency, precision:2. Валидация ввода: только числа, запятая и точка. Покройте 3 кейса тестами в комментарии. ``` ## Промпты для доработки и рефакторинга (точечные правки) ### Промпт: рефакторинг функции ```text Контекст: TypeScript, функция calculateTotal в lib/pricing.ts, считает сумму в ₽. Проблема: плавающая точка даёт неточные копейки. Замените на decimal.js. Ограничения: формат ответа — patch (diff) только для lib/pricing.ts и tests/pricing.test.ts. Сохраните сигнатуру функции. Добавьте юнит‑тесты на 3 граничных кейса. Критерии: сумма и округление по банковскому правилу, 2 знака после запятой. ``` ### Промпт: поиск и исправление бага ```text Стек: Next.js + Postgres. Симптом: при сохранении формы /app/pricing падает 500. Задача: найдите корень валидации входа (пустая скидка), исправьте обработчик в app/api/pricing/route.ts. Ограничения: patch только для route.ts и tests/api/pricing.test.ts. Добавьте защиту от SQL‑инъекций, валидацию типов, и возврат 422 с сообщением RU. Выход: diff + краткое объяснение причины. ``` ## Промпты для агентов и мультифайловых изменений (Cursor, Claude Agent) Агенты (AI agents) полезны, когда задача распадается на шаги с чёткими границами изменений. Используйте промпты с планом и встроенными проверками. - Пример для Cursor Agent: ```text Режим: Cursor Agent. Цель: добавить страницу /reports с таблицей заказов и экспортом CSV. Стек: Next.js, Postgres. Планируй и выполняй по шагам: 1) Обзор текущей структуры app/ и db/ 2) Модуль выборки данных с пагинацией (db/reports.ts) 3) Страница app/reports/page.tsx с таблицей, фильтрами по дате (dd.mm.yyyy) 4) Экспорт CSV (серверный обработчик) 5) Юнит‑тесты и e2e‑тест smoke Ограничения: редактируй только app/reports/*, db/reports.ts, tests/*. Зафиксируй патч. По завершении — сводка изменений и рисков. ``` - Пример для Claude Code (agent‑like): ```text Проектный контекст: включи файлы app/, lib/, tests/. Цель: внедрить маскирование ПДн в логах (ФИО, телефон РФ). Сделай: - Утилиту maskPII в lib/security.ts с тестами - Обнови все вызовы логгера, чтобы использовать maskPII - Добавь правила в SECURITY.md (кратко в ответе) Формат: список файлов + patch‑дифф. Не меняй публичные API. Покрой кейсы RU‑форматов телефонов и ФИО. ``` Советы по работе с агентами: - Требуйте план с контрольными точками и возможностью отката. - Ограничивайте список разрешённых директорий. - Просите финальную сводку рисков и TODO на следующий спринт. ![Сравнение возможностей мультифайла и агентов в платформах](./images/prompty-dlya-vaybkodinga-shablony-primery-bars-tools.png) ## Чеклист проверки результата (функциональность, безопасность, тесты, доступность) Это чеклист для приёмки кода от AI. Добавляйте его в бриф — модель заранее учтёт часть проверок. Функциональность - Юнит‑тесты: ключевые функции покрыты, граничные случаи есть. - Интеграция: happy‑path работает, ошибки обрабатываются, idempotency для POST. - Локаль: числа/даты в RU, валюта ₽, формат dd.mm.yyyy. Безопасность - Валидация ввода, sanitization, строгая типизация. - Секреты: только .env/сейф, без утечек в код/логи. - SQL‑инъекции: параметризованные запросы. - Prompt injection: не исполнять пользовательский текст как инструкции. Доступность - ARIA‑атрибуты у интерактивов. - Контраст ≥ 4.5:1, фокус‑стили видимы, таб‑навигация работает. - Альтернативы для иконок/графиков, live‑region для ошибок форм. Производительность - TTFB < 200 мс на ключевых эндпойнтах. - Размер бандла < 200 КБ для первого экрана. - Кэш и компрессия, N+1 исключены, индексы в БД настроены. Инженерная гигиена - Линтер/тайпчек чисты. - Коммиты по правилу Conventional Commits. - Дифф минимален, в PR — только тема задачи. ## Сравнение инструментов и ограничений (таблица: Cursor / Claude / Replit / Windsurf) Ниже — обзор ключевых различий. Параметры зависят от тарифа/версий; фиксируйте их в вашем CONFIG. | Платформа | Контекст и файлы | Мультифайл/дифф | Агенты/автодействия | Сеть/песочница | Стоимость/кредиты | Под что подходит | |-------------|-------------------------------|---------------------------|---------------------------|------------------------------------|------------------------------|------------------| | Cursor | Проектный контекст, выбор файлов | Полноценный patch/PR | Agent, шаги/планирование | Проект: как в IDE; артефакт: без сети | Токены по модели, IDE‑фичи | Средние/крупные правки | | Claude Code | Сильный контекст, чтение многих файлов | Правки по списку файлов | Псевдо‑агент через цепочки | Ограничения сети по настройкам | Кредиты/токены по модели | Анализ и крупные изменения | | Replit | Онлайн среда/песочница | Ограниченный мультифайл | Базовые | Песочница, выход наружу по настройкам | Токены + compute | Быстрые прототипы | | Windsurf | Проектный фокус | Дифф и план изменений | Автодействия ограничены | Как локальный проект | Токены по модели | Средние задачи/рефакторинг | Практический вывод: крупные мультифайловые изменения в Cursor и Claude Code проходят стабильнее, если заранее задать разрешённые директории, формат диффа и чеклист. ## Шаблоны для скачивания (JSON/YAML/snippets) и статический генератор JSON‑шаблон брифа (универсальный) ```json { "role": "Senior engineer", "context": {"stack": ["Next.js", "TS", "Postgres"], "domain": "RU, ₽"}, "task": {"summary": "<что сделать>", "input": "<вход>", "output": "patch|file"}, "constraints": {"mode": "artifact|project", "network": "off|corp", "a11y": true}, "format": {"style": "ONLY_PATCH", "include": ["files", "why"]}, "checks": ["unit", "lint", "perf"], "notes": ["decimal.js for money"] } ``` YAML‑вариант (для .prompt) ```yaml role: Senior engineer context: stack: [Next.js, TS, Postgres] domain: [RU, RUB, dd.mm.yyyy] task: summary: "<инкремент>" input: "<входные данные>" output: patch constraints: mode: project network: corp-only a11y: true format: style: ONLY_PATCH include: [files, why] checks: [unit, lint, perf] notes: - decimal.js for money ``` VSCode snippet для «рефакторинг функции" ```json { "Refactor with tests": { "prefix": "refactor-ai", "body": [ "Контекст: $1 (файл: $2). Проблема: $3.", "Замените реализацию на безопасную/точную.", "Ограничения: формат ответа — patch только для $2 и tests/$4.test.ts.", "Критерии: $5.", "Добавьте 3 юнит‑теста (граничные кейсы)." ], "description": "Каркас промпта для точечного рефакторинга" } } ``` Статический генератор (форма‑шаблон для copy&paste) ```json { "PROJECT": {"mode": "artifact|project", "stack": "Next.js/TS/Postgres", "locale": "ru-RU"}, "TASK": {"summary": "<что сделать>", "input": "<вход>", "output": "patch|file"}, "LIMITS": {"files": ["app/..."], "network": "off|corp"}, "QUALITY": {"a11y": true, "perf": {"ttfb_ms": 200}}, "CHECKS": ["unit", "lint", "e2e"], "FORMAT": {"style": "ONLY_PATCH", "include": ["files", "why"]} } ``` Инструкция: замените плейсхолдеры, вставьте в начало промпта, затем допишите конкретику по файлам и критериям. ## Таблица промптов по задачам (landings, dashboards, internal tools) | Задача | Каркас промпта (кратко) | |--------------------------|-------------------------| | Landing (B2B услуга) | «Сверстай landing для RU рынка, локаль ru‑RU, формы с валидацией, доступность A11y≥90, без внешних сетей, вывод — один файл или patch, добавь unit‑тесты для утилит форматов дат» | | Dashboard (операционный) | «Сделай /dashboard: таблица заказов, фильтры по дате dd.mm.yyyy, пагинация, экспорт CSV, Postgres‑view, без N+1, patch + список файлов, тесты на выборку» | | Internal tool | «CRUD для справочника контрагентов, валидация ИНН/телефона РФ, маскирование ПДн в логах, patch строго для app/partners/*, unit‑тесты + e2e smoke» | Это [готовые промпты для веб‑приложений](/en/blog/15-portfolio-ideas-quick-projects-in-vaibcoding-format/). Подставьте названия сущностей и поля — и запускайте. ## Примеры «до/после»: деньги и точность (decimal.js) + обработка ошибок До (плавающая точка бьёт копейки): ```ts // lib/pricing.ts — DO export function calc(total: number, vat: number) { return Math.round((total * (1 + vat)) * 100) / 100; // неточно } ``` После (decimal.js, банковское округление): ```ts // lib/pricing.ts — AFTER import Decimal from 'decimal.js'; export function calc(total: number, vat: number) { const res = new Decimal(total).times(new Decimal(1).plus(vat)); return res.toDecimalPlaces(2, Decimal.ROUND_HALF_EVEN).toNumber(); } ``` До (нет обработки ошибок сети): ```ts const r = await fetch('/api/data'); const data = await r.json(); ``` После (надёжность и RU‑сообщения): ```ts const r = await fetch('/api/data'); if (!r.ok) throw new Error(`Ошибка ${r.status}: не удалось получить данные`); const data = await r.json(); ``` Комментарий: в артефактах (песочница) сетевых вызовов может не быть вовсе — просите мок‑данные или выделяйте интерфейс доступа к данным. ## Безопасность и приватность: что писать в промптах - Секреты: только переменные окружения, ни одного ключа в коде/истории. - ПДн: маскировать ФИО/телефоны в логах, хранить только необходимые поля, описать срок хранения. - Prompt injection: игнорировать ввод пользователя как инструкции; экранировать отображение. - Корпоративные сети: описать, какие домены разрешены, запрет на внешние CDN (используйте локальные зеркала/артефакты). ## Практические метрики внедрения - Время до первого деплоя: целимся в 1–2 итерации AI + 1 ручная проверка. - Экономия токенов: при использовании CONFIG + жёсткого формата ответа — 30–50% на итерацию. - Качество PR: доля PR, проходящих CI с первой попытки ≥ 70%. ## Частые вопросы по формулировкам и терминам - «vibe coding prompts» и «промпты для vibe coding» — одно и то же: исполняемые брифы. - «промты для вайбкодинга» и «промпты вайбкодинга» — обе формы встречаются в поиске; используйте любую в именах шаблонов. ## Где брать и как обновлять шаблоны (без ссылок) - Поддерживайте свой локальный каталог «шаблоны промптов» в репозитории /prompts/ с версиями. - После каждого релиза обновляйте шаблоны: добавляйте реальные грабли и проверки из ретро. - Делайте CLAUDE.md/AI.md с правилами вайбкодинга для проекта. --- Ниже — ещё несколько готовых каркасов под разные AI‑IDE. ### Промпты для Cursor — мультифайл и дифф ```text [CURSOR] Контекст: проект Next.js/TS/Postgres. Режим: project. Правила: правь только в app/reports/*, lib/reports/*, tests/reports/*. Формат: ONLY_PATCH + список файлов. Задача: добавить отчёт по выручке в ₽ по дням (dd.mm.yyyy), decimal.js для денежных расчётов, e2e‑тест smoke. ``` ### Промпты для Claude Code — сильный контекст анализа ```text [CLAUDE] Взятый контекст: app/, lib/, tests/. Задача: найти узкие места (N+1) в lib/db/*.ts, предложить план фикса (3 шага), затем внести правку в один модуль и тесты. Формат: список файлов + patch‑дифф, без пояснительного текста кроме заголовка. ``` --- Итог: чёткая структура даёт воспроизводимые vibe coding prompts, которые одинаково работают в разных инструментах. ## FAQ ### Чем вайбкодинг отличается от «магических фраз»? Подход опирается на дисциплину: контекст домена и стека, чёткая задача, ограничения среды, формат ответа и критерии приёмки. Без этого «удачные фразы» не спасают. ### Когда просить артефакт, а когда — правки в проекте? Артефакт — одиночный self‑contained файл без сети и IO. Проект — изменения в репозитории с диффом/PR. Явно указывайте режим и разрешённые пути. ### Как задать формат вывода, чтобы сразу применять результат? Требуйте строго: ONLY_PATCH/дифф, JSON или единый файл. Попросите список изменённых файлов и короткие комментарии к правкам — без лишнего текста. ### Что делать с зависимостями и сетевыми ограничениями? Фиксируйте версии Node/менеджера пакетов, доступные реестры/зеркала, режим сети (off|corp‑only), лимиты токенов и допустимые домены/CDN. ### Как принимать код от ИИ и не пропустить проблемы? Используйте чеклист: функциональность (тесты, локаль), безопасность (валидация, секреты, SQL‑инъекции), доступность, производительность и инженерная гигиена (линтер, минимальный дифф).