2.1: Создание проекта

Время15 мин
УровеньС нуля
Команда/start-2-1

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

Обзор

Вот он — момент, когда начинается настоящая магия. Ты берёшь результаты исследований из модуля 1 (рынок, клиенты, конкуренты) и начинаешь строить реальный продукт.

Но подожди — код писать не нужно. Серьёзно. Это называется vibe coding, и это полностью меняет правила игры.

Раньше, чтобы создать приложение, нужно было либо учить программирование месяцами, либо нанимать разработчика и платить сотни тысяч рублей. Теперь достаточно описать, что ты хочешь — и AI-инструмент создаст это за минуты.

Этот урок — первый шаг. Мы создадим проект (техническую основу приложения) и настроим контекст, чтобы Claude понимал, что именно мы строим. Думай об этом как о закладке фундамента: невидимая, но критически важная часть. Всё, что мы будем делать в уроках 2.2 и 2.3, опирается на то, что мы создадим сейчас.

Не волнуйся, если какие-то технические термины будут незнакомы. Claude объяснит каждый шаг, а тебе нужно только подтверждать или корректировать его действия. К концу этого урока у тебя будет полностью рабочая основа проекта и уверенность, что ты можешь двигаться дальше.

Что такое vibe coding

Термин «vibe coding» появился в 2025 году, когда AI-инструменты для разработки стали достаточно мощными, чтобы создавать полноценные приложения по описанию на обычном языке.

Суть проста: ты описываешь — Claude строит. Ты проверяешь — корректируешь. Снова описываешь — Claude снова строит. И так, пока не получится то, что нужно.

Это не «ноукод» (визуальные конструкторы вроде Tilda или Figma). Vibe coding создаёт настоящий код — такой же, какой написал бы профессиональный разработчик. Просто пишет его не человек, а AI.

Чем vibe coding отличается от других подходов

ПодходКто пишет кодРезультатГибкость
Традиционная разработкаПрограммист рукамиПолноценное приложениеМаксимальная
Ноукод (Tilda, Bubble)Визуальный конструкторОграниченное приложениеСредняя
Vibe codingAI по твоему описаниюПолноценное приложениеВысокая

Главное преимущество vibe coding — ты получаешь настоящий программный продукт, но при этом не тратишь годы на обучение программированию. Ты остаёшься в роли продакт-менеджера и предпринимателя — принимаешь решения о продукте, а техническую реализацию делегируешь AI.

Когда vibe coding работает лучше всего

  • MVP и прототипы — когда нужно быстро проверить идею
  • Внутренние инструменты — дашборды, админки, автоматизации
  • Лендинги и сайты — от простых страниц до сложных многостраничников
  • Простые SaaS-продукты — приложения с авторизацией, данными и логикой

Когда лучше привлечь разработчика

  • Сложные системы с высокой нагрузкой (тысячи пользователей одновременно)
  • Продукты, требующие специфических технологий (машинное обучение, блокчейн)
  • Проекты, где критична безопасность (банковские системы, медицина)

Но для MVP и первых версий продукта — vibe coding подходит идеально.

Твоя роль в vibe coding

Важно понимать: vibe coding не означает «нажми кнопку и жди». Твоя роль критически важна. Ты — продакт-менеджер и креативный директор в одном лице:

  • Ставишь задачи — определяешь, что строить и в каком порядке
  • Принимаешь решения — какой цвет кнопки, куда ведёт ссылка, что показать на главной
  • Проверяешь качество — работает ли всё так, как задумано
  • Направляешь процесс — если результат не тот, корректируешь курс

Claude — это мощный инструмент, но без твоего видения он не знает, что строить. Именно сочетание твоего понимания продукта и технических возможностей Claude делает vibe coding таким эффективным.

Чему научишься

  • Как создать проект одной командой — Claude сделает всю техническую работу: установит зависимости, настроит конфигурацию, создаст структуру папок. Ты только подтвердишь его действия.

  • Как организовать файлы в проекте — у каждого проекта есть стандартная структура. Ты поймёшь, где лежит код, где стили, где настройки — чтобы потом не запутаться и легко находить нужное.

  • Как создать CLAUDE.md — это файл-инструкция, по которой Claude будет понимать контекст проекта. Без него Claude каждый раз начинает «с нуля», с ним — помнит всё о твоём продукте.

  • Что такое vibe coding на практике — не просто теория, а реальный опыт: ты увидишь, как одной фразой можно создать то, что раньше требовало часов работы разработчика.

Пошаговый процесс урока

Шаг 1: Создание проекта

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

my-project/
├── src/           ← код приложения
├── public/        ← картинки, иконки
├── package.json   ← список зависимостей
├── CLAUDE.md      ← контекст для Claude
└── ...

Не нужно запоминать всю структуру. Главное — понять принцип: у каждого файла есть своё место и назначение.

Шаг 2: Знакомство со структурой

Claude объяснит, что за что отвечает. Ты сможешь задавать вопросы: «А зачем этот файл?», «Что будет, если его удалить?» — и Claude ответит простым языком.

Шаг 3: Создание CLAUDE.md

Это самый важный файл для vibe coding. CLAUDE.md — это как бриф для дизайнера или ТЗ для разработчика. В нём описано:

  • Что за продукт вы строите
  • Кто целевая аудитория
  • Какие технологии используются
  • Какие правила и ограничения есть
  • Какой стиль кода и дизайна предпочтителен

Почему это важно: без CLAUDE.md каждый новый разговор с Claude — это разговор «с незнакомцем». С ним — Claude сразу понимает контекст и делает то, что нужно именно твоему проекту.

Вот пример, как может выглядеть CLAUDE.md:

# FlowAI — Умный менеджер задач

## О продукте
Веб-приложение для управления задачами с AI-помощником.
Целевая аудитория — фрилансеры и маленькие команды (2-5 человек).

## Технологии
- Next.js 14 + React 18
- Tailwind CSS для стилей
- SQLite для данных

## Правила
- Интерфейс на русском языке
- Минималистичный дизайн, тёмная тема
- Цвета: зелёный (#4A7C32), оранжевый (#FF6B35)
- Шрифт: Inter

Не нужно писать CLAUDE.md самому — Claude поможет создать его в диалоге. Но важно проверить результат и убедиться, что всё описано правильно.

Шаг 4: Проверка результата

Ты откроешь созданный проект в Cursor (мы настроили его в уроке 0.2) и убедишься, что всё на месте.

Советы для лучшего результата

  1. Открой Cursor параллельно — так ты будешь видеть все файлы и изменения визуально, пока Claude работает в терминале. Это как смотреть на стройку с высоты.

  2. Не стесняйся задавать вопросы — если Claude создал файл и ты не понимаешь зачем, спроси. «Зачем нужен файл tsconfig.json?» — абсолютно нормальный вопрос.

  3. Проверяй, что Claude создал — после каждого шага открывай папку и смотри, что появилось. Это помогает понять процесс.

  4. Сохрани CLAUDE.md — это файл, к которому ты будешь возвращаться. Чем точнее он описывает проект, тем лучше Claude будет помогать в следующих уроках.

  5. Не торопись — 15 минут хватит, даже если ты будешь задавать много вопросов. Лучше разобраться сейчас, чем запутаться потом.

Частые вопросы

Мне правда не нужно знать программирование? Правда. Claude сам напишет весь код. Тебе нужно только описывать, что ты хочешь, и проверять результат. Конечно, если ты понимаешь код — это плюс, но не обязательное условие.

А если Claude создаст что-то не то? Ты всегда можешь сказать: «Удали это и сделай иначе». Или даже: «Откати последнее изменение». Claude не обидится.

Чем CLAUDE.md отличается от обычного README? README описывает проект для людей (коллеги, пользователи). CLAUDE.md описывает проект для AI — с акцентом на контекст, правила и ограничения, которые помогают Claude принимать правильные решения.

Могу ли я потом изменить CLAUDE.md? Конечно! И даже нужно — по мере развития проекта CLAUDE.md стоит обновлять. Добавляй новые правила, уточняй описание, фиксируй решения. Это живой документ.

Что, если у меня другая идея, а не из курса? Этот урок работает с учебным проектом (FlowAI), но всё, что ты изучишь, применимо к любой идее. После курса ты сможешь создать проект для своего продукта тем же способом.

Частые ошибки

ОшибкаПочему это проблемаРешение
Начинать строить без CLAUDE.mdClaude не понимает контекст и делает «что-то абстрактное»Всегда создавай CLAUDE.md перед началом разработки
Слишком общий CLAUDE.md«Это приложение» — не даёт Claude достаточно информацииОписывай конкретно: продукт, аудитория, технологии, стиль
Пропускать шаг проверкиОшибки накапливаются и потом их сложнее найтиПроверяй проект в Cursor после каждого шага
Не задавать вопросыОстаёшься с непониманием, которое мешает дальшеСпрашивай Claude обо всём, что непонятно — он объяснит
Бояться что-то сломатьСтрах мешает экспериментироватьВ git всё сохранено, можно откатить любое изменение

Что создашь

Рабочий проект — основу твоего приложения. Правильная структура, настройки, и файл контекста CLAUDE.md, чтобы Claude понимал, что вы строите. Это фундамент для уроков 2.2 и 2.3, где мы спланируем и построим сам продукт.

Запуск

/start-2-1

Следующий урок: Планирование продукта →