// промпты · вайбкодинг
Промпты для вайбкодинга
Промпты для тех, кто делает сайты и приложения с ИИ — для себя или на заказ. От сайта голосом до брифа клиента и расчёта маржи.
# 1. Идея
Хочу создать [название]. Это сервис, который [что делает]. Целевая аудитория: [кто].
Проблема, которую решает: [проблема]. Примерный стек: [технологии — или «предложи сам»].
# 2. Техническое задание
Составь подробное ТЗ для проекта:
- функционал MVP (минимальный)
- стек технологий
- структура данных
- API endpoints
- критерии готовности
Сохрани в SPEC.md.
# 3. Сборка
Реализуй MVP по этому ТЗ. Начни с архитектуры проекта. Работаем пошагово.
Коммит в Git после каждого шага. После завершения — проверь все пункты SPEC.md.Из статьи «Что такое вайбкодинг простыми словами» · Андрей Плешков
Шаблоны из гайда Александра Юшкевича «Умный вайбкодинг» (NeyroSummit 15); отправляй по одному, следующее — после ответа на предыдущее
Я не программист и хочу собрать с тобой свой первый небольшой проект за один вечер.
Задача: [что должно получиться — например, страница-визитка для моих услуг / бот, который напоминает мне о делах / таблица, которая сама считает расходы за месяц].
Зачем: [какую мою проблему это решает].
Как я пойму, что готово: [что должно работать в конце вечера].
Как работаем:
1. Сначала задай мне уточняющие вопросы — по одному, пока задача не станет понятной.
2. Предложи план: самый простой вариант, который можно собрать за вечер, по шагам — и скажи, что в него не войдёт. Не пиши код, пока я не согласую план.
3. Собирай по шагам. После каждого шага объясни простыми словами, что ты сделал и как мне это проверить.
4. Если нужна установка программ или регистрация в сервисе — предупреди заранее и объясни, зачем.
5. В конце напиши короткую инструкцию: как запустить проект и что делать, если он перестал работать.Из статьи «Что такое вайбкодинг простыми словами» · Андрей Плешков
Claude Code · ChatGPT · Codex — Промпт редакции. Подставь свою задачу; работает в Claude Code, Codex и ChatGPT
Сделай скролл-анимацию для секции [название секции] на моём сайте.
Зачем: [что движение должно сделать для пользователя — открыть, рассказать, создать атмосферу, отреагировать].
Техника: [например, pin с горизонтальным треком внутри / zoom до полного экрана с поэтапным текстом].
Настроение и цвета: [настроение], [палитра].
1. Исходное состояние: [как выглядит экран до анимации].
2. Триггер: [что запускает — вход секции в экран, прогресс прокрутки, клик].
3. Действие: [что именно меняется и как; главный объект двигается сильнее, второстепенные спокойнее, фон почти неподвижен].
4. Финальное состояние: [к чему приходит].
5. После анимации: [возвращается в исходное / остаётся изменённым].
Требования: анимируй только transform и opacity; единый ритм с остальными секциями; спокойная версия для prefers-reduced-motion; на мобильном — облегчённый вариант.Из статьи «Анимация для сайта в Claude Code: Higgsfield MCP, скиллы и движение со смыслом» · Юлия Полетаева
Claude Code — Реконструкция по методологии спикера
Создай 3D-карусель с диагональным спуском. 14 карточек размером 340×432px со скруглением углов 18px. Они сидят на прямой дорожке с шагом 280px. Карточки не повёрнуты по оси Y (yaw); крен сцены компенсируется у каждой карточки с коэффициентом 1, так что дорожка идёт по диагонали, а карточки остаются прямыми. Масштаб убывает как 1/(1+0,43·n), где n — расстояние от карточки в фокусе; непрозрачность падает на 0,3 за шаг; размытие растёт на 2px за шаг, измеряется в экранных пикселях — дели на собственный масштаб каждой карточки, потому что фильтр вычисляется до трансформации предка. Перспектива сцены 1400px, без наклона (pitch), крен -18°. Переход занимает 640ms по cubic-bezier(0.32, 0.72, 0, 1). Перетаскивание с инерцией и примагничиванием к центру; кнопки-стрелки; тап по карточке выводит её в центр; клавиши-стрелки двигают на одну карточку, Home и End переходят к краям; без автопрокрутки. При prefers-reduced-motion сохрани компоновку в точности как описано — кривую, углы, глубину, камеру — и вместо пролистывания делай кроссфейд между карточками за 180ms, чтобы ничего не двигалось само по себе.Из статьи «Анимация для сайта в Claude Code: Higgsfield MCP, скиллы и движение со смыслом» · Юлия Полетаева
Claude Code — Из коллекции промптов каруселей Юлии Полетаевой (нейродропс NeyroSummit 19)
Смотри, вот у тебя есть ссылка на мой старый сайт: [ссылка]. Это сайт с описанием курса про ИИ-агентов. Но дизайн там какой-то слишком простой. Мне бы хотелось яркий, дерзкий, необычный дизайн, необычное оформление сайта. Поэтому создай мне новый сайт прямо в ChatGPT, используя данные из прошлого сайта и используя фирменный стиль, который у тебя лежит в текущем проекте.Из статьи «Сайт голосом в ChatGPT Sites: редизайн в своём стиле и рутина для агентов» · Николай Волосянков
ChatGPT — Голосовой промпт Николая Волосянкова с эфира; ссылку на старый сайт он передал в том же сообщении
Смотри, голова не очень аккуратно перерисована. Какую модель для генерации изображения ты использовал? Попробуй другую модель, получше — используй вариант high, чтобы нарисовать изображение естественнее.Из статьи «Сайт голосом в ChatGPT Sites: редизайн в своём стиле и рутина для агентов» · Николай Волосянков
ChatGPT — Голосовая правка Николая Волосянкова с эфира
Собери весь этот сайт в ZIP-архив и дай мне ссылку на скачивание.Из статьи «Сайт голосом в ChatGPT Sites: редизайн в своём стиле и рутина для агентов» · Николай Волосянков
ChatGPT — Запрос Николая Волосянкова с эфира
Смотри, сейчас у тебя кнопки ведут на старый сайт. Сделай так, чтобы, когда пользователь нажимает «Записаться на курс» или выбирает тариф, заявки собирались. Куда будут уходить эти заявки?Из статьи «Сайт голосом в ChatGPT Sites: редизайн в своём стиле и рутина для агентов» · Николай Волосянков
ChatGPT — Голосовой запрос Николая Волосянкова с эфира
Посчитай маржу с проекта: чек за услугу [сумма] минус [число] часов
работы по моей часовой ставке [ставка] минус расходы на сервер
и подписку на нейросеть за месяц [сумма]. Покажи итоговую маржу
и точку безубыточности.Из статьи «Как заработать на вайбкодинге: где деньги в агентском подходе» · Станислав Шульгин
Реконструкция по методологии спикера, не дословная цитата из доклада
Составь короткий бриф для сбора технического задания у клиента
[ниша клиента]: какая проблема, кто целевая аудитория, какой бюджет
и сроки, какие есть готовые решения на рынке, которые клиенту
нравятся или не нравятся.Из статьи «Как заработать на вайбкодинге: где деньги в агентском подходе» · Станислав Шульгин
Реконструкция по методологии спикера, не дословная цитата из доклада
Проверь состояние сервера: что установлено, какие процессы запущены,
есть ли актуальные обновления безопасности. Составь короткий отчёт
и предложи, что стоит настроить или обновить.Из статьи «Как заработать на вайбкодинге: где деньги в агентском подходе» · Станислав Шульгин
Реконструкция по методологии спикера, не дословная цитата из доклада
Я записываю голосовое сообщение с текстом рассылки. Разбей его на
сегменты по ключевым словам [указать сегменты], отформатируй под
стиль канала [название канала] и запланируй отправку пятью сериями
в разное время.Из статьи «Как заработать на вайбкодинге: где деньги в агентском подходе» · Станислав Шульгин
Реконструкция по методологии спикера, не дословная цитата из доклада
Промпт сильнее в контексте: по ссылке «Из статьи» — метод нейрохакера целиком, с шагами и примерами. Промпты с пометкой «реконструкция» собрала редакция по методу спикера.