Руководство по Vibe Coding v1.0: Полное пособие по разработке с помощью ИИ

Этот документ представляет собой руководство, предназначенное для того, чтобы помочь не только опытным программистам, но и тем, кто не умеет программировать, разрабатывать приложения/сервисы с помощью «Vibe Coding». Начинающие разработчики с небольшим опытом кодирования и планировщики также могут получать стабильные результаты, следуя этим шагам.

Основной принцип: вместо того, чтобы заставлять ИИ сразу писать код, лучше сначала создать документы (Design.md, ToDo.md), а затем начинать разработку.

0. Общая схема процесса

[1] Запрос на создание Concept.md

↓

[2] Создание Design.md (справочный документ по UI/UX)

↓

[3] Определение технологического стека (см. дерево решений ниже)

↓

[4] Создание ToDo.md (технические спецификации на уровне модулей + план разработки)

↓

[5] Создание репозитория GitHub и начальный коммит

↓

[6] Передача описания приложения + Design.md + ToDo.md в Claude Code или Grok Build для начала разработки

↓

[7] Повторение: Реализация по модулям → Тестирование → commit/push

1. Concept.md — Подсказка для начала с простой идеи

Начните с краткого описания приложения или сервиса, который вы хотите создать, в 2-3 строках, как приходит в голову, в форме: «Я хочу сделать что-то вроде этого; пожалуйста, создайте документ Concept.md с описанием процедур и методов для его реализации».

Загрузите сгенерированный документ и сохраните его как Concept.md.

2. Design.md — Создание UI/дизайн-документов в первую очередь

Если у приложения есть UI, рекомендуется сначала написать Design.md. То есть, если есть сервис или приложение, которое вы хотите использовать в качестве референса, или если вы уже знаете, как спроектировать UI самостоятельно, вы можете запросить его, предоставив изображения дизайнов, выполненных в Figma и т.д.

Метод

• Выберите один реально работающий веб-сайт, который вам нравится. (например, linear.app, stripe.com, toss.im и т.д.)
• Дайте указание Claude или Grok: «Проанализируйте структуру макета, цветовую палитру, типографику, поля/интервалы и стили компонентов этого сайта и систематизируйте их в Design.md».

Пример подсказки

Проанализируйте дизайн https://linear.app и напишите документ Design.md. Вы должны включить следующие пункты: 1. Общая структура макета (расположение Header/Sidebar/Body/Footer) 2. Цветовая палитра (Primary, Secondary, Background, Text цвета в HEX-кодах) 3. Типографика (типы шрифтов, система размеров, начертания) 4. Правила полей и интервалов (шкала отступов) 5. Стили для основных компонентов, таких как кнопки, карточки и формы ввода 6. Поддержка темной темы и соответствие цветов

Советы

• Если у вас есть чувство дизайна, так как содержимое сгенерированного Design.md описано на естественном языке, вы можете прочитать его и напрямую изменить/доработать в нужном вам направлении. Этот документ становится стандартом для всех последующих реализаций UI.
• Если вы просто скажете «Сделай как на этом сайте», результаты будут каждый раз разными. Вы должны зафиксировать это в документе, чтобы поддерживать согласованность.

2. Рекомендуемое дерево решений по технологическому стеку

Определите стек в первую очередь, исходя из типа сервиса, который вы пытаетесь создать.

Общие принципы сервера (бэкенда)

• Должна быть возможность установить и запустить напрямую из CLI в любом локальном окружении.
• Язык/среда выполнения должен быть Node.js или Python.
• Используйте инструменты, проверенные для стабильного развертывания и поддержки во всех ОС для пакетов/сред выполнения:
• Python → uv
• Node.js → npm

Критерии выбора базы данных

Подробные инструкции по подсказке (если у вас есть знания в области разработки)

Этот проект — веб-приложение. Настройте фронтенд на React, и его можно будет сразу протестировать с помощью npm run dev локально, со структурой, допускающей стабильное развертывание. Настройте бэкенд на Node.js, и, поскольку нужна реляционная БД, используйте MariaDB. Включите скрипт настройки, который можно установить/запустить напрямую через CLI в локальной среде разработки. Проверьте это содержимое и документ Concept.md, чтобы написать документ ToDo.md для детальной технической реализации.

• Продолжайте, прикрепив документ Concept.md к этой подсказке или скопировав и вставив содержимое документа Concept.md.

Но что, если я не разработчик и не знаю вышеперечисленного?

Просто дайте интегрированные инструкции, подобные этим:

Я не уверен, как запустить этот проект, поэтому, пожалуйста, порекомендуйте способ. Порекомендуйте, лучше ли веб-приложение, проще ли метод установки ОС для проверки во время разработки или лучше создать мобильное приложение. Если его можно показать в веб-браузере, настройте фронтенд на React; если его нужно предоставлять как мобильное приложение, настройте фронтенд на Flutter. Если это метод, который нужно устанавливать локально, настройте его с помощью npm или uv, которые можно легко развернуть и установить через CLI. Создайте структуру, допускающую стабильное развертывание. Я не уверен, нужен ли бэкенд, но настройте стабильную структуру для Node.js или развертывания/установки. Если нужна БД, используйте MariaDB, если требуется реляционная, а если это просто БД типа «ключ-значение», используйте AWS DynamoDB локально для разработки и настройте для легкого развертывания в AWS. Если это формат, который можно установить/запустить напрямую через CLI в локальной среде разработки, включите все скрипты настройки. Порекомендуйте такой подробный технический стек, проверьте это содержимое и документ Concept.md и напишите документ ToDo.md для детальной технической реализации.

3. Панель администратора — обязательна, если есть сервер

Возможно, вы не знаете, есть ли у сервиса сервер, но обычно его стоит создать, чтобы разработчик мог лично отслеживать статус работы и прогресс всего приложения.

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

Пример подсказки

Если этот сервис включает сервер, включите панель администратора в план разработки. Панель должна позволять проверять статус сервера, основные метрики и последние логи/ошибки. Установите учетную запись администратора по умолчанию как 'admin' с паролем '12345' и включите возможность смены пароля в панели администратора. Проверьте ToDo.md и включите это в план разработки, если сочтете необходимым.

4. Завершение ToDo.md — План разработки на уровне модулей

Основа программирования — модульность. Если вы добавите содержимое в ToDo.md для разделения на модули перед написанием кода, можно создать хорошую архитектуру для будущего обслуживания.

Пример подсказки

Проверьте документ ToDo.md и убедитесь, что он хорошо написан в соответствии с руководством ниже, и измените/дополните любые недостающие части. Требования к ToDo.md: 1. Спроектируйте всю систему так, чтобы она была модульной, с объектно-ориентированным дизайном. 2. Четко укажите роль каждого модуля, входные/выходные данные и структуру данных, чтобы обеспечить максимальную инкапсуляцию. 3. Создайте последовательность реализации в виде списка флажков (начиная с модулей, не имеющих зависимостей). 4. Включите проектирование схемы БД. 5. Опишите, когда и как неспециалисты могут легко протестировать.

Пункты для проверки в готовом ToDo.md:

1. Обзор проекта (один абзац)
2. Подтвержденный технологический стек (результат дерева решений на шаге 2)
3. Список модулей и подробные технические спецификации для каждого модуля (неспециалистам может быть трудно это понять)
4. Имя модуля и его роль
5. Входные/выходные данные (конечные точки API и форматы запросов/ответов)
6. Используемая структура данных / проектирование таблицы (или коллекции) БД
7. Зависимости от других модулей
8. Последовательность реализации (в виде флажков, в порядке зависимостей)
9. Проверьте, описан ли каждый метод тестирования на понятном для меня уровне.

Важно

• Вам не обязательно читать и проверять сгенерированный ToDo.md самостоятельно. Хотя кажется, что все пойдет хорошо, если подготовиться идеально, суть Vibe Coding — это процесс создания результата в первую очередь, а затем его постепенная модификация для получения желаемого — это самая ценная и увлекательная часть.

Практическая часть: Настройка среды → GitHub → Начало разработки с Claude Code

Написано так, чтобы даже те, кто устанавливает инструменты разработки впервые, могли следовать инструкциям.

• Тем не менее, если это кажется слишком сложным, и вы не понимаете, зачем это нужно использовать, и вам смертельно скучно, пожалуйста, сначала послушайте бесплатную лекцию по ссылке ниже.

https://nomadcoders.co/git-for-beginners

5. Подготовка среды разработки (установите только 2 вещи)

Мы установим две вещи.

И вам понадобится учетная запись GitHub. Зарегистрируйтесь бесплатно на https://github.com (подтвердите адрес электронной почты). Использование Claude Code или Grok Build требует платного плана Claude (Pro/Max/Team) или платной учетной записи Grok.

5-1. 🪟 Шаги установки для пользователей Windows

① Установка Git

1. Перейдите в браузере по адресу https://git-scm.com/download/win → Загрузка начнется автоматически.
2. Запустите загруженный установщик.
3. Появится много опций установки; просто продолжайте нажимать «Далее» со всеми значениями по умолчанию.
4. Однако, когда появится экран «Choosing the default editor», хорошо выбрать «Use Visual Studio Code as Git's default editor» (если вы еще не установили VS Code, подойдет значение по умолчанию).
5. Проверьте установку: Запустите PowerShell из меню «Пуск» и введите:

git --version

→ Если появится версия, например git version 2.xx.x, значит, успешно. Если нет, попробуйте закрыть и снова открыть PowerShell.

② Установка VS Code

1. Перейдите на https://code.visualstudio.com → Нажмите Download for Windows.
2. Запустите установщик → Продолжайте нажимать «Далее». Однако отметьте эти два пункта на экране опций:
3. «Add to PATH»
4. «Add 'Open with Code' action to file/directory context menus»
5. Запустите VS Code после установки. Если на первом экране появится уведомление об установке языкового пакета, вы можете его установить.

5-2. 🍎 Шаги установки для пользователей Mac

① Установка Git

1. Откройте Terminal: Cmd + Space → Введите «Terminal» → Enter.
2. Введите:

git --version

1. Если версия появилась сразу, значит, она уже установлена → Переходите к ②. Если появилось всплывающее окно с руководством по установке («Command Line Developer Tools...»), нажмите «Install» и подождите. (Это установка Git).
2. После завершения снова проверьте с помощью git --version.

② Установка VS Code

1. Перейдите на https://code.visualstudio.com → Нажмите Download for macOS.
2. Распакуйте загруженный файл и перетащите Visual Studio Code.app в папку Applications. (Важно! Не используйте его прямо из папки «Загрузки»).
3. Запустите VS Code из папки Applications.

5-3. (Общее) Регистрация моего имени в Git — Только первый раз

Эта настройка нужна, чтобы оставлять запись о том, «кто работал» в коммитах. В PowerShell (Windows) или Terminal (Mac):

git config --global user.name "Ваше Имя" git config --global user.email "ваш-github-email@example.com"

Введите тот же адрес электронной почты, который вы использовали для регистрации на GitHub.

6. Создание репозитория GitHub и подключение к моему ПК с помощью VS Code

Думайте о «Репозитории» как об облачной папке, которая содержит один проект. Процесс следующий: Создайте пустой репозиторий на веб-сайте GitHub → Клонируйте его на свой ПК с помощью VS Code → Загрузите плановые документы → Подключите этот репозиторий к веб-версии Claude Code.

6-1. Создание репозитория на веб-сайте GitHub

1. Войдите в https://github.comhttps://github.com/).
2. Нажмите кнопку + в правом верхнем углу → New repository.
3. Введите следующее:
4. Repository name: Имя проекта (на английском, дефисы вместо пробелов. Например, my-first-app)
5. Выберите Private (Проекты компании должны быть Private!)
6. Отметьте флажок «Add a README file» ✅ ← Новички должны это отметить. Это упрощает следующий шаг (клон).
7. Нажмите Create repository.
8. На странице созданного репозитория нажмите зеленую кнопку <> Code → Скопируйте адрес на вкладке HTTPS.

6-2. Клонирование на мой ПК с помощью VS Code

1. Запустите VS Code.
2. Ctrl + Shift + P (Cmd + Shift + P на Mac) → Откроется палитра команд.
3. Введите clone → Выберите «Git: Clone».
4. Вставьте скопированный адрес репозитория и нажмите Enter.
5. Вы также можете выбрать «Clone from GitHub» → Если откроется браузер и запросит авторизацию/вход в GitHub, подтвердите. (Только первый раз).
6. Выберите место для сохранения проекта (например, хорошо создать папку Documents/Projects).
7. Когда клонирование завершится, в правом нижнем углу появится уведомление «Open» → Нажмите на него.
8. Если вы видите README.md в проводнике файлов слева, значит, успех! 🎉 Теперь эта папка является рабочей папкой, связанной между моим ПК и GitHub.

6-3. Загрузка плановых документов — Concept.md, Design.md, ToDo.md

Веб-версия Claude Code может читать файлы внутри репозитория. Таким образом, помещение плановых документов в репозиторий равносильно «загрузке документов».

1. Щелкните правой кнопкой мыши в пустом месте проводника файлов VS Code → New File → Введите имя Concept.md.
2. Вставьте подготовленное описание приложения и сохраните (Ctrl+S / Cmd+S).
3. Таким же образом создайте и вставьте файлы Design.md (если есть UI) и ToDo.md.
4. Теперь загрузите на GitHub (commit & push), используя метод из раздела 6-4.

6-4. Коммит и пуш в VS Code — Только мышью

1. Когда вы сохраняете файл, на значке в виде ветки (Source Control) слева в VS Code появляется цифровой значок.
2. Нажмите на этот значок → Вы увидите список измененных файлов.
3. В поле ввода сообщения вверху напишите одну строку о том, что вы сделали. (например, Added planning documents).
4. Нажмите кнопку ✔ Commit → Сохранение завершено на вашем ПК.
5. Если появится всплывающее окно «There are no staged changes», нажмите «Yes», чтобы закоммитить все.
6. Затем нажмите кнопку Sync Changes → Загрузка (push) на GitHub завершена.
7. Обновите репозиторий на веб-сайте GitHub, чтобы увидеть только что загруженный Concept.md. Теперь веб-версия Claude Code также может читать этот документ.

Pull (загрузка) также выполняется на том же экране: Если есть изменения, которые Claude загрузил в облако, кнопка Sync Changes обработает как загрузку, так и выгрузку.

7. Подключение репозитория к веб-версии Claude Code и начало разработки

Теперь откройте веб-версию Claude Code в браузере и подключите только что созданный репозиторий GitHub.

7-1. Подключение веб-версии Claude Code ↔ Репозиторий GitHub (Только первый раз)

1. Перейдите по адресу https://claude.ai/code → Войдите в свою учетную запись Claude.
2. При первом доступе появится руководство Connect GitHub → Следуйте руководству.
3. Вы будете перенаправлены на страницу GitHub, и появится экран установки приложения Claude GitHub App:
4. Выберите свою учетную запись GitHub (или организацию).
5. Выберите диапазон доступа: Рекомендуется выбрать «Only select repositories» и указать репозиторий, созданный в разделе 6-1.
6. Нажмите Install / Authorize.
7. Возвращение в Claude завершает подключение. Если появится экран настроек окружения, оставьте его по умолчанию.
8. При запуске нового сеанса (задачи) выберите свой репозиторий из списка выбора репозитория, введите подсказку, и задача начнется.

7-2. Понимание того, как работают веб-версии Claude Code и Grok Build (Важно!)

Веб-версии Claude Code и Grok Build работают на виртуальном компьютере в облаке, а не на моем ПК. Процесс следующий:

① Я ввожу подсказку

↓

② Claude Code/Grok Build клонирует мой репозиторий в облаке и пишет код

↓

③ Отправляет результат на GitHub как «новую ветку задачи»

↓

④ Я загружаю эту ветку на свой ПК для тестирования или проверяю изменения через Pull Request на GitHub

↓

⑤ Если мне все нравится, я сливаю ее в main.

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

7-4. Подсказка для начала разработки

Как только три документа (Concept.md / Design.md / ToDo.md) будут готовы в main, наконец начните разработку в новом сеансе.

Разработайте этот проект. Действуйте на основе следующих документов в репозитории: - Concept.md: Описание приложения, которое нужно создать - ToDo.md: План разработки на уровне модулей (реализовывать в этом порядке) - Design.md: Стандарты дизайна (весь UI следует этому документу)

Правила работы: 1. Выполняйте по одному модулю за раз в соответствии с порядком реализации в ToDo.md. 2. Когда тестируемый блок будет завершен, сообщите мне, как запустить/протестировать его на моем локальном ПК, через README или в ответе. Поскольку я не разработчик, объясните все хорошо, как будто учите новичка. 3. Отмечайте выполненные пункты галочкой в ToDo.md. 4. Сообщите мне имя ветки задачи и сделайте push с легко запоминающимся сообщением коммита. 5. Если есть неясные моменты, не догадывайтесь; спросите меня.

7-5. Цикл, повторяемый во время разработки

① Веб-версия Claude Code реализует один модуль в ветке задачи → push

↓

② Загрузите эту ветку задачи на свой ПК (VS Code) и запустите/протестируйте ее напрямую

↓

③ Если есть проблема → Скопируйте все сообщение об ошибке и вставьте его в веб-сеанс

Если проблемы нет → «Хорошо, продолжайте следующую разработку»

↓

Вернитесь к шагу ① для следующего модуля

↓

④ Как только все функции будут завершены и тесты пройдены

→ Слейте в ветку main через Pull Request

→ Развертывание всегда основано на main

8. Ветки — Тестирование в ветках задач и слияние с main для развертывания

8-1. Что такое ветка?

• Ветка main = Витрина готового продукта, который всегда работает хорошо. Развертывание всегда основано на main.
• Ветка задачи (например, claude/feature-login) = Строительная площадка, созданная копированием main. Вы можете строить и ломать здесь сколько угодно; main в безопасности.

Веб-версия Claude Code всегда создает новую ветку задачи и отправляет результаты. Итак, вам нужно знать всего три вещи:

1. Как проверить, в какой ветке находится моя папка.
2. Как загрузить ветку задачи, отправленную Claude, на мой ПК для тестирования.
3. Как слить в main и развернуть по завершении.

8-2. Проверка того, в какой ветке вы находитесь

• Посмотрите на строку состояния в самом низу слева экрана VS Code. Имя ветки отображается рядом со значком ветки. (например, main или claude/feature-login).

8-3. Загрузка веток задач, созданных Claude Code/Grok Build, на мой ПК для тестирования

Когда веб-версия Claude Code говорит: «Я сделал push в ветку OO», принесите эту ветку на свой ПК для тестирования. В Grok Build есть кнопка «Push to Github» в правом верхнем углу веб-экрана, нажмите ее, чтобы сделать push.

С помощью VS Code (только мышью):

1. Нажмите на имя ветки в левом нижнем углу → Откроется список веток.
2. Если новая ветка не видна, выполните меню ... → Fetch на вкладке Source Control и попробуйте снова.
3. Выберите ветку задачи Claude, начинающуюся с origin/claude/..., из списка → Ваша папка изменится на состояние этой ветки.

8-4. Слияние с main по завершении — Pull Request

Если функции завершены и тесты пройдены в ветке задачи, слейте их в main через Pull Request (PR) на веб-сайте GitHub.

1. Перейдите в свой репозиторий на GitHub → Нажмите на вкладку Pull requests.
2. Нажмите на PR, который создал Claude. Если его нет, New pull request → base: main, compare: выберите ветку задачи → Create pull request.
3. Нажмите Merge pull request → Confirm merge → Изменения отражены в main!
4. Обновите main на своем ПК до последней версии:
5. Нажмите на ветку в левом нижнем углу VS Code → Выберите main → Sync Changes на вкладке Source Control.

9. Советы по составлению подсказок (общие)

Качество Vibe Coding пропорционально качеству подсказок.

1. Указывайте, чего НЕ делать — «Не изменяйте код произвольно, пока я не одобрю», «Не добавляйте библиотеки, используйте только существующий стек».
2. По одному модулю за раз — Качество падает, если вы просите все приложение в одной подсказке. Запрашивайте небольшими частями в соответствии с порядком ToDo.md.
3. Вставляйте ошибки как есть — Не обобщайте сообщения об ошибках; копируйте весь вывод терминала.
4. Позвольте Claude спрашивать, если что-то неясно — Включайте фразу «Если есть неясные моменты, не догадывайтесь; спросите меня» в подсказку.
5. Общайтесь на основе документов — «Как я говорил ранее» ❌ → «Согласно дизайну из Design.md» ✅. Документы в репозитории гораздо надежнее, чем память разговора.

Конец.

Как сказал древний Морфеус:

«Нео. Я могу лишь показать тебе дверь. Ты должен пройти через нее сам.»