Полная версия
Вайб-кодинг: создавай продукты с помощью AI, даже если никогда не писал код
Правило 4: Указывайте технологии и стиль.
Плохо: «Сделай таблицу с данными.»
Хорошо: «Сделай таблицу с данными на React + Tailwind. Колонки: имя, email, дата регистрации, статус. Статус показывай цветным бейджем (зелёный — активен, красный — заблокирован). Сортировка по клику на заголовок. Пагинация по 10 строк.»
Если не указать технологию, AI может выбрать что-то неподходящее для вашего проекта — например, написать на Vue, хотя у вас React.
Правило 5: Итерируйте, не переписывайте.
Получили результат, который «почти то, что нужно»? Не начинайте заново. Уточните:
«Отлично, но внеси изменения:
— Сделай шрифт заголовка крупнее (2xl → 4xl)
— Поменяй цвет фона на slate-900
— Добавь hover-эффект на карточки»
Итерация — естественный процесс. Даже профессиональные разработчики не пишут идеальный код с первой попытки. Разница в том, что итерация через промпты занимает секунды, а не часы.
4.4. Примеры: плохой → хороший → отличный
Давайте пройдёмся по нескольким реальным сценариям и посмотрим, как формулировка промпта влияет на результат.
Сценарий 1: Создание навигации
Плохо:
Сделай навигацию для сайта.
Результат: базовая навигация без стилей, не адаптивная, без мобильного меню.
Хорошо:
Создай адаптивную навигацию для сайта на React + Tailwind.
Ссылки: Главная, О нас, Услуги, Контакты.
Мобильное меню-бургер. Фиксированная при прокрутке.
Результат: работающая навигация, но без «изюминки».
Отлично:
Создай компонент Navbar для нашего Next.js сайта.
Десктоп (ширина > 768px):
- Логотип слева (текстовый, "BrandName", font-bold text-xl)
- Ссылки по центру: Главная, О нас, Услуги, Блог, Контакты
- Кнопка "Начать" справа (градиент indigo-500 → purple-500, rounded-full)
- При прокрутке вниз: фон становится blur + полупрозрачным (backdrop-blur-md bg-white/80)
Мобайл (ширина ≤ 768px):
- Логотип слева, бургер-иконка справа
- По клику: выезжающее меню сбоку (slide from right) с анимацией
- Оверлей с затемнением
- Закрытие по клику вне меню и по Escape
Используй: React, Tailwind CSS, Lucide React для иконок.
Файл: components/Navbar.tsx
Результат: профессиональная, анимированная, адаптивная навигация с первого промпта.
Сценарий 2: Работа с данными
Плохо:
Выведи данные из API.
Хорошо:
Загрузи список пользователей из API /api/users и выведи в таблицу.
Отлично:
Создай компонент UsersTable.tsx:
1. Загрузка данных:
- Используй SWR для запроса к /api/users
- Покажи скелетон во время загрузки (3 строки-заглушки с анимацией pulse)
- При ошибке покажи сообщение с кнопкой "Попробовать снова"
2. Таблица:
- Колонки: Аватар (круглое фото 32px), Имя, Email, Роль, Дата регистрации, Действия
- Роль показывай бейджем: admin = фиолетовый, user = серый, moderator = синий
- Сортировка по клику на заголовок (иконка стрелки вверх/вниз)
- Поиск по имени и email (инпут над таблицей с debounce 300ms)
3. Действия:
- Кнопка "Редактировать" (иконка карандаша)
- Кнопка "Удалить" (иконка корзины, красная при hover)
Стек: React, Tailwind, SWR, Lucide React.
Результат: полнофункциональный компонент продакшн-качества.
Видите разницу? Промпт «отлично» длиннее в 10 раз, но он экономит 10 итераций доработки. Итоговое время — меньше.
4.5. Системные промпты и .cursorrules
Есть способ не повторять одни и те же инструкции в каждом промпте — системные промпты и файл .cursorrules.
Системный промпт — это инструкция, которая действует на протяжении всего разговора. В Cursor вы можете задать его в настройках: Settings → Rules for AI. Всё, что вы напишете там, Claude будет «помнить» в каждом диалоге.
Пример системного промпта для вайбкодера:
Ты — опытный fullstack-разработчик, помогающий новичку-вайбкодеру.
Правила:
- Пиши код на TypeScript
- Используй React + Next.js App Router
- Стили: только Tailwind CSS
- Комментарии в коде: на русском
- Именование переменных и функций: на английском, camelCase
- Компоненты: функциональные, с хуками
- Всегда добавляй обработку ошибок
- Всегда добавляй loading states
- При создании нового файла указывай полный путь
Теперь вам не нужно каждый раз указывать стек технологий и стиль — Claude будет следовать этим правилам автоматически.
Файл .cursorrules — это файл в корне вашего проекта, который Cursor автоматически подгружает в контекст. Он работает как «конституция» проекта — набор правил, которым AI следует при любом взаимодействии.
Создайте файл .cursorrules в корне проекта:
# Правила проекта
## Стек
- Next.js 14+ (App Router)
- TypeScript (strict mode)
- Tailwind CSS
- Supabase (база данных и аутентификация)
- Lucide React (иконки)
## Структура проекта
- app/ — страницы и API routes
- components/ — переиспользуемые компоненты
- components/ui/ — базовые UI-компоненты (Button, Input, Modal...)
- lib/ — утилиты и хелперы
- types/ — TypeScript типы
## Правила кода
- Все компоненты: именованный экспорт (не default)
- Обязательно: loading state и error handling
- Стили: только Tailwind, никакого inline CSS
- Формы: React Hook Form + Zod для валидации
- Запросы данных: Server Components где возможно
## Запрещено
- Не использовать any в TypeScript
- Не использовать CSS-модули или styled-components
- Не создавать файлы больше 200 строк — разбивать на компоненты
Этот файл — ваш лучший друг. Один раз настроили — и AI всегда работает по вашим правилам.
4.6. Chain of Thought, Few-shot и другие техники
Несколько продвинутых техник, которые поднимут качество ваших промптов на новый уровень.
Chain of Thought (цепочка рассуждений).
Попросите AI думать пошагово, прежде чем писать код.
Прежде чем писать код, давай спланируем:
1. Какие компоненты нам понадобятся?
2. Какие данные нужны и откуда?
3. Как они будут взаимодействовать?
Потом напиши код, следуя этому плану.
Эта техника особенно полезна для сложных задач. Когда AI «думает вслух», он реже ошибается — как человек, который записывает план перед тем, как действовать.
Few-shot (обучение на примерах).
Покажите AI пример того, что хотите, и попросите сделать аналогичное.
Вот как выглядит наш компонент карточки:
[вставка существующего кода ProductCard.tsx]
Создай аналогичный компонент BlogCard.tsx в таком же стиле.
Данные: title, excerpt, author, date, coverImage, slug.
AI увидит стиль, конвенции, паттерны вашего проекта и создаст компонент, который идеально впишется.
Разбиение на подзадачи.
Большую задачу всегда лучше разбить. Вместо «Создай интернет-магазин» используйте последовательность:
1. «Создай структуру проекта Next.js для интернет-магазина. Пока без кода — только файлы и папки.»
2. «Создай модель данных: какие таблицы нужны в базе данных? Опиши схему.»
3. «Создай компонент карточки товара.»
4. «Создай страницу каталога с фильтрами.»
5. «Создай корзину.»
6. ...и так далее.
Каждый шаг — управляемый, проверяемый, отлаживаемый.
Негативные инструкции.
Иногда важнее сказать, чего НЕ делать:
Создай форму обратной связи.
НЕ используй:
- Никаких внешних библиотек для формы (только нативный React)
- Никаких alert() — покажи сообщение в UI
- Никаких console.log в финальном коде
4.7. Контекст через @ в Cursor
Одна из самых мощных фич Cursor — возможность прикреплять контекст к промпту через символ @.
@файл — прикрепить конкретный файл. AI прочитает его и учтёт при генерации.
Посмотри на @components/Button.tsx и создай аналогичный компонент Link в таком же стиле.
@папка — прикрепить всю папку. AI увидит структуру и содержимое.
Посмотри на @components/ui/ и добавь новый компонент Tooltip, который вписывается в эту систему.
@web — поиск в интернете. Cursor может искать актуальную документацию.
@web Как настроить Supabase Auth с Next.js App Router в 2026?
@docs — ссылка на документацию. Cursor проиндексирует сайт документации и использует его как справочник.
@codebase — поиск по всему проекту. Claude проанализирует вашу кодовую базу.
@codebase Где в проекте мы обрабатываем аутентификацию?
Эти инструменты решают одну из главных проблем — дать AI достаточно контекста. Чем больше AI знает о вашем проекте, тем точнее его ответы.
4.8. Шаблоны промптов: ваша первая библиотека
Вот набор шаблонов, которые вы будете использовать постоянно. Сохраните их и адаптируйте под свои проекты.
Шаблон: Новый компонент
Создай компонент [Название].
Назначение: [что делает].
Props: [перечислить с типами].
Стили: [описать внешний вид].
Поведение: [описать интерактивность].
Файл: [путь].
Шаблон: Исправление бага
В компоненте @[файл] есть баг:
[описание проблемы].
Ожидаемое поведение: [что должно происходить].
Фактическое поведение: [что происходит].
Шаги воспроизведения: [как повторить].
Исправь баг, не ломая остальную логику.
Шаблон: Новая страница
Создай страницу [название] по адресу [путь].
Секции:
1. [описание секции 1]
2. [описание секции 2]
3. [описание секции 3]
Данные: [откуда берутся, статические или из API].
Адаптивность: [как выглядит на мобиле].
Шаблон: Рефакторинг
Отрефактори @[файл]:
Проблемы:
- [проблема 1]
- [проблема 2]
Требования к рефакторингу:
- Разбей на [количество] компонентов
- Вынеси логику в кастомный хук
- Улучши типизацию
- Сохрани текущую функциональность
Шаблон: Ревью кода
Проведи код-ревью @[файл].
Проверь:
- Безопасность (XSS, инъекции)
- Производительность (лишние ре-рендеры, тяжёлые вычисления)
- Доступность (a11y)
- Чистота кода (дублирование, нейминг)
- Обработка ошибок
Предложи конкретные улучшения с примерами кода.
4.9. Практикум: 10 упражнений на промптинг
Теория без практики мертва. Вот 10 упражнений, которые стоит выполнить в Cursor прямо сейчас.
Упражнение 1: Конкретика. Создайте кнопку. Сначала с промптом «Сделай кнопку», потом с подробным описанием цвета, размера, анимации, состояний (hover, active, disabled). Сравните результаты.
Упражнение 2: Контекст. Создайте карточку товара. Укажите контекст: это карточка для интернет-магазина косметики. Обратите внимание, как контекст влияет на дизайнерские решения AI.
Упражнение 3: Итерация. Создайте форму обратной связи за 5 итераций. Первый промпт — базовая форма. Каждый следующий — одно улучшение: валидация, анимация, дизайн, отправка данных, сообщение об успехе.
Упражнение 4: Chain of Thought. Попросите Claude спланировать структуру блога перед написанием кода. Пусть сначала опишет компоненты, маршруты, модели данных — и только потом начнёт кодить.
Упражнение 5: Few-shot. Покажите Claude один компонент из вашего проекта и попросите создать другой в таком же стиле.
Упражнение 6: Негативные инструкции. Создайте навигацию, перечислив, чего НЕ должно быть: без jQuery, без CSS-модулей, без анимаций при загрузке.
Упражнение 7: Описание ошибки. Специально создайте баг (удалите скобку из кода) и попросите Claude исправить, описав симптомы, а не причину.
Упражнение 8: .cursorrules. Создайте файл правил для проекта и проверьте, что Claude следует им без напоминаний.
Упражнение 9: @-контекст. Используйте @файл и @папка, чтобы Claude создал новый компонент, идеально вписывающийся в существующий проект.
Упражнение 10: Код-ревью. Попросите Claude провести ревью кода, который он сам написал. Посмотрите, найдёт ли он проблемы в своей же работе (спойлер: найдёт).
Итоги главы 4
В этой главе вы освоили фундамент промпт-инженерии:
— Промпт состоит из роли, задачи, требований, формата и примеров.
— Пять золотых правил: конкретика, одна задача, контекст, технологии, итерации.
— Разница между плохим и отличным промптом — это разница между часами отладки и результатом с первой попытки.
— Системные промпты и .cursorrules экономят время на повторяющихся инструкциях.
— Chain of Thought, Few-shot, разбиение на подзадачи — техники для сложных случаев.
— @ в Cursor — мощный инструмент для управления контекстом.
Вы теперь умеете разговаривать с AI на его языке. В следующей главе мы добавим к этому навыку понимание веб-технологий — минимальный набор знаний, который сделает ваши промпты ещё точнее.
Задание к главе: Выполните все 10 упражнений из практикума. Не пропускайте ни одного — каждое тренирует отдельный аспект промптинга. Сохраните лучшие промпты в отдельный файл — это начало вашей библиотеки.
Глава 5. Веб-разработка глазами вайбкодера
«Не нужно уметь строить двигатель, чтобы водить машину. Но полезно знать, что бензин заливают в бак, а не в багажник.»
Эта глава — самая необычная в книге. Мы не будем учиться программировать. Мы будем учиться понимать — ровно настолько, чтобы ваши промпты стали точнее, а общение с AI — продуктивнее.
Представьте, что вы режиссёр фильма. Вам не нужно самому держать камеру, выставлять свет и монтировать. Но вам нужно знать, что такое «крупный план», «контровой свет», «обратная точка» — чтобы объяснить оператору, чего вы хотите. Эта глава даст вам словарь и понимание, чтобы «режиссировать» AI.
5.1. HTML, CSS, JavaScript — минимум, который нужно понимать
Три кита веб-разработки. Три технологии, которые стоят за каждым сайтом, который вы когда-либо видели. Вам не нужно знать их синтаксис наизусть — вам нужно понимать, что каждая из них делает.
HTML (HyperText Markup Language) — это скелет. Структура. Содержание.
HTML определяет, что находится на странице: заголовок, абзац текста, картинка, кнопка, форма, ссылка. Если бы веб-страница была газетой, HTML — это текст и фотографии, расположенные на полосе.
Вот как выглядит простейший HTML:
Привет, мир!
Это мой первый сайт.
Угловые скобки < > — это «теги». Каждый тег описывает тип элемента: h1 — заголовок первого уровня, p — параграф, button — кнопка. Большинство тегов парные:
открывает,
закрывает.Зачем вайбкодеру это знать? Чтобы в промпте написать «заверни это в
CSS (Cascading Style Sheets) — это внешний вид. Одежда.
CSS определяет, как выглядит содержимое: цвета, шрифты, размеры, отступы, анимации, расположение элементов. Один и тот же HTML может выглядеть как строгий корпоративный сайт или как яркая игровая страница — зависит от CSS.
h1 {
color: #6366f1;
font-size: 48px;
font-weight: bold;
}
Это говорит: «Все заголовки первого уровня — цвета индиго, размером 48 пикселей, жирным шрифтом».
Зачем вайбкодеру это знать? Чтобы в промпте сказать «уменьши padding до 16px и поменяй border-radius на rounded-2xl» вместо «сделай посимпатичнее». AI — буквальный исполнитель, и конкретные CSS-термины дают конкретный результат.
JavaScript (JS) — это поведение. Мозг.
JavaScript определяет, что происходит, когда пользователь что-то делает: нажал кнопку — появилось окно, заполнил форму — данные отправились на сервер, прокрутил страницу — запустилась анимация.
button.addEventListener('click', () => {
alert('Привет!');
});
Это говорит: «Когда на кнопку кликнут — покажи всплывающее окно с текстом "Привет!"»
Зачем вайбкодеру это знать? Чтобы понимать разницу между «статическим сайтом» (только HTML + CSS) и «интерактивным приложением» (с JavaScript). И чтобы формулировать промпты с учётом поведения: «При клике на карточку — открой модальное окно с деталями товара».
5.2. Как устроена веб-страница: аналогия с домом
Давайте соберём всё в одну картину. Веб-страница — это как дом.
HTML — это стены, комнаты и мебель. Планировка дома. Где кухня, где спальня, где входная дверь. Без HTML нет структуры — есть пустое поле.
CSS — это отделка, цвет стен, стиль мебели. Один и тот же дом может быть минималистичным лофтом или уютным кантри. CSS определяет атмосферу.
JavaScript — это электрика, водопровод и умный дом. Нажал выключатель — зажёгся свет. Открыл кран — потекла вода. Сказал «Алиса, включи музыку» — играет музыка. Без JavaScript сайт выглядит красиво, но ничего не делает.
Когда вы пишете промпт для AI, вы описываете дом: «Хочу гостиную (HTML) в скандинавском стиле (CSS) с умным освещением, которое включается по датчику движения (JavaScript)».
А теперь — подробнее о том, как современные сайты построены на практике.
5.3. React и Next.js: компоненты как кубики LEGO
Если бы HTML, CSS и JavaScript были кирпичами, досками и гвоздями, то React — это готовые модули: стеновые панели, оконные блоки, дверные проёмы. Собирать дом из модулей быстрее, чем из отдельных кирпичей.
React — это JavaScript-библиотека (инструмент) от Meta Platforms Inc. (Facebook (принадлежит Meta Platforms Inc., признанной экстремистской организацией и запрещённой в РФ)), которая позволяет строить интерфейсы из компонентов. Компонент — это самостоятельный кусок интерфейса: кнопка, карточка товара, навигация, модальное окно.
Вот компонент кнопки на React:
function Button({ text, onClick }) {
return (
{text}
);
}
Этот компонент можно использовать в любом месте проекта сколько угодно раз:
Почему это важно для вайбкодера? Потому что компонентное мышление — это язык, на котором вы будете разговаривать с AI. Вместо «Сделай страницу» вы говорите: «Страница состоит из компонентов: Header, HeroSection, FeatureCards, Testimonials, Footer. Создай каждый отдельно.»
Next.js — это фреймворк поверх React. Если React — это движок, то Next.js — это готовый автомобиль. Он добавляет маршрутизацию (переход между страницами), серверный рендеринг (быстрая загрузка), API-маршруты (серверная логика) и множество оптимизаций. Большинство серьёзных проектов на React используют Next.js.
Для вайбкодера Next.js удобен тем, что у него чёткая структура: папка app/ — это страницы, components/ — компоненты, public/ — статические файлы. AI отлично знает эту структуру и генерирует код, который сразу ложится в нужные папки.
5.4. Tailwind CSS: стилизация через классы
Tailwind CSS — это подход к стилизации, который идеально подходит для вайбкодинга. Вместо того чтобы писать отдельные CSS-файлы, вы добавляете стили прямо в HTML/React через маленькие классы.
Традиционный CSS:
.button {
background-color: blue;
color: white;
padding: 8px 16px;
border-radius: 8px;
font-weight: bold;
}
Tailwind CSS:
Одна строка вместо шести. И вот почему это важно для вайбкодера:
Во-первых, Tailwind-классы — это универсальный язык. Когда вы говорите AI «используй bg-gradient-to-r from-purple-500 to-pink-500», он точно знает, что вы имеете в виду. Никакой двусмысленности.
Во-вторых, классы легко менять в промпте. «Замени rounded-lg на rounded-full» — и кнопка из прямоугольной становится круглой. Это мгновенная итерация.
В-третьих, Tailwind — это система. Все цвета, размеры и отступы стандартизированы. p-4 — это всегда 16 пикселей отступа. text-xl — это всегда определённый размер текста. Нет хаоса «а тут отступ 17 пикселей, а тут 19».
Вот небольшой словарь Tailwind, который покроет 80% ваших потребностей:
Цвета: bg-blue-500 (фон), text-white (цвет текста), border-gray-200 (рамка). Цифра — интенсивность: 50 (почти белый) → 950 (почти чёрный).
Отступы: p-4 (padding, внутренний отступ), m-4 (margin, внешний отступ). px- только горизонтально, py- только вертикально. Цифра × 4 = пиксели: p-4 = 16px.
Размеры: w-full (ширина 100%), h-screen (высота экрана), max-w-4xl (максимальная ширина).
Текст: text-sm, text-lg, text-2xl (размер), font-bold (жирный), text-center (по центру).
Скругления: rounded (маленькое), rounded-lg (среднее), rounded-full (круг).
Flexbox: flex (включить), flex-col (вертикально), items-center (по центру по вертикали), justify-between (распределить по горизонтали).
Вам не нужно это заучивать. Но когда вы видите flex items-center gap-4 в коде, полезно понимать, что это значит: «элементы в ряд, выровнены по центру, с расстоянием между ними».
5.5. Базы данных и API: откуда берутся данные
До сих пор мы говорили о том, что видит пользователь — фронтенде. Но большинство приложений работают с данными: пользователи, товары, заказы, посты. Эти данные где-то хранятся. Давайте разберёмся где.
База данных — это организованное хранилище данных. Представьте таблицу в Excel: строки — это записи (пользователи), столбцы — это поля (имя, email, дата регистрации). Только база данных может хранить миллионы записей и мгновенно находить нужную.
Для вайбкодера самый простой способ работать с базой данных — Supabase. Это сервис, который даёт вам готовую базу данных, аутентификацию (логин/регистрация) и хранилище файлов — бесплатно для небольших проектов. Вы создаёте таблицу через визуальный интерфейс (как в Excel), а Supabase автоматически генерирует API для работы с данными.
API (Application Programming Interface) — это «меню ресторана». Вы (фронтенд) не идёте на кухню (сервер/база данных) сами. Вы смотрите в меню (API), выбираете блюдо (запрос) и получаете заказ (данные).
Пример: ваше приложение хочет показать список товаров. Фронтенд отправляет запрос на API: «Дай мне товары из категории "Электроника"». Сервер идёт в базу данных, находит нужные товары и отправляет их обратно в формате JSON — структурированных данных, которые фронтенд может красиво отобразить.
Зачем вайбкодеру это знать? Чтобы в промпте написать: «Создай страницу каталога. Данные о товарах загружай из Supabase, таблица products. Показывай: название, цену, изображение. Добавь фильтр по категории через API-запрос.» Без понимания этих концепций вы бы написали: «Сделай каталог товаров» — и получили бы страницу с захардкоженными (вшитыми в код) данными, которые невозможно менять.
5.6. Не нужно запоминать — нужно понимать, что спросить у AI
Вот ключевой сдвиг мышления, который отличает вайбкодера от студента курсов программирования.
Традиционное обучение: запомнить синтаксис → написать код → отладить → запомнить ещё.
Вайбкодинг: понять концепцию → сформулировать задачу → попросить AI → проверить результат.
Вам не нужно помнить, как написать цикл for на JavaScript. Вам нужно знать, что цикл существует и зачем он нужен — «повторить действие N раз». Остальное AI напишет за вас.
Вам не нужно помнить, как подключить Supabase к Next.js. Вам нужно знать, что Supabase — это база данных, которая хорошо работает с Next.js. Остальное — в промпте.