Вайб-кодинг: создавай продукты с помощью AI, даже если никогда не писал код

Вам не нужно помнить синтаксис Tailwind-классов. Вам нужно знать, что flex — это способ расположить элементы в ряд, а grid — в сетку. Какой именно класс — подскажет AI.

Это как знание иностранного языка. Вам не нужен словарный запас в 50 000 слов. Вам нужно знать 500 ключевых слов и уметь пользоваться переводчиком. AI — это ваш переводчик с «языка идей» на «язык кода».

Вот список концепций, которые полезно понимать на уровне «что это и зачем» (без синтаксиса):

— Переменная — ячейка для хранения данных. Как коробка с подписью.

— Функция — набор действий, который можно вызвать по имени. Как рецепт.

— Условие — «если это, то сделай то». Как развилка на дороге.

— Цикл — «повтори N раз» или «для каждого элемента списка».

— Массив — список чего-то: список пользователей, список товаров.

— Объект — набор свойств: у пользователя есть имя, email, возраст.

— Компонент — самостоятельный кусок интерфейса.

— Пропсы (props) — данные, которые передаются в компонент снаружи.

— Состояние (state) — данные, которые могут меняться внутри компонента.

— API-запрос — обращение к серверу за данными.

— Асинхронность — операция, которая занимает время (загрузка данных), и код не ждёт её окончания, а продолжает работать.

Этих 11 концепций хватит для 80% ваших промптов. Остальное подхватите по ходу работы.

5.7. Практикум: лендинг за 20 минут через промпты

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

Шаг 1. Инициализация проекта (2 минуты)

Откройте Composer в Cursor и напишите:

Создай новый проект Next.js с Tailwind CSS.

Команды для терминала — я выполню их сам.

Имя проекта: coffee-landing.

Claude даст вам команды. Выполните их в терминале. Через минуту у вас готовый проект.

Шаг 2. Главный экран — Hero (5 минут)

Создай компонент HeroSection для лендинга кофейни "Бодрый Боб".

- Полноэкранная секция (h-screen)

- Фоновое изображение (используй placeholder от Unsplash: кофейня, тёплые тона)

- Затемнение поверх фото (overlay bg-black/50)

- По центру: заголовок "Бодрый Боб" (text-6xl, font-serif, белый)