Посібник з 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/Дизайну

Якщо застосунок має інтерфейс, добре написати 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. Рекомендоване дерево рішень для вибору технологічного стеку

Визначте стек спочатку, виходячи з типу сервісу, який ви намагаєтеся створити.

Загальні принципи для серверу (Backend)

• Повинна бути можливість встановити та запустити безпосередньо з CLI в будь-якому локальному середовищі.
• Мова/середовище виконання має бути Node.js або Python.
• Використовуйте інструменти, перевірені на стабільне розгортання та підтримку на всіх ОС для пакетів/середовищ виконання:
• Python → uv
• Node.js → npm

Критерії вибору бази даних

Детальні інструкції для запиту (якщо ви маєте знання з розробки)

Цей проект — це вебзастосунок. Налаштуй Frontend за допомогою React, і його можна буде одразу протестувати локально за допомогою npm run dev, зі структурою, яка дозволяє стабільне розгортання. Налаштуй Backend за допомогою Node.js, і оскільки потрібна реляційна БД, використовуй MariaDB. Включи скрипт налаштування, який можна встановити/запустити безпосередньо через CLI в локальному середовищі розробки. Перевір цей вміст та документ Concept.md, щоб написати документ ToDo.md для детальної технічної реалізації.

• Виконуйте, прикріпивши документ Concept.md до цього запиту або скопіювавши та вставивши вміст документа Concept.md.

Але що, якщо я не розробник і не знаю вищезазначеного?

Просто дайте інтегровані інструкції, як ці:

Я не впевнений, як запустити цей проект, тому, будь ласка, порекомендуй спосіб. Порекомендуй, чи краще вебзастосунок, чи метод встановлення на ОС легше перевірити під час розробки, чи краще створити мобільний застосунок. Якщо його можна показати у веббраузері, налаштуй Frontend за допомогою React; якщо його потрібно надавати як мобільний застосунок, налаштуй Frontend за допомогою Flutter. Якщо це метод, який потрібно встановлювати локально, налаштуй його за допомогою npm або uv, які можна легко розгорнути та встановити через CLI. Створи структуру, яка дозволяє стабільне розгортання. Я не впевнений, чи потрібен Backend, але налаштуй стабільну структуру для 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. Однак, коли з'явиться екран «Вибір редактора за замовчуванням», добре вибрати «Використовувати Visual Studio Code як редактор Git за замовчуванням» (якщо ви ще не встановили VS Code, залиште за замовчуванням).
5. Перевірте встановлення: Запустіть PowerShell з меню «Пуск» і введіть:

git --version

→ Якщо з'явиться версія на кшталт git version 2.xx.x, це успіх. Якщо ні, спробуйте закрити та знову відкрити PowerShell.

② Встановлення VS Code

1. Перейдіть на https://code.visualstudio.com → Натисніть Завантажити для Windows.
2. Запустіть інсталятор → Продовжуйте натискати «Далі». Однак позначте ці два пункти на екрані опцій:
3. «Додати до PATH»
4. «Додати дію 'Відкрити за допомогою Code' до контекстних меню файлів/каталогів»
5. Запустіть VS Code після встановлення. Якщо на першому екрані з'явиться сповіщення про встановлення мовного пакету, ви можете його встановити.

5-2. 🍎 Інструкції зі встановлення для користувачів Mac

① Встановлення Git

1. Відкрийте Термінал: Cmd + Space → Введіть «Термінал» → Enter.
2. Введіть:

git --version

1. Якщо версія з'явиться одразу, вона вже встановлена → Перейдіть до ②. Якщо з'явиться спливаюче вікно з інструкцією зі встановлення («Command Line Developer Tools...»), натисніть «Встановити» та зачекайте. (Це встановлення Git).
2. Після завершення знову перевірте за допомогою git --version.

② Встановлення VS Code

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

5-3. (Загальне) Реєстрація мого імені в Git — лише перший раз

Це налаштування потрібне, щоб залишити запис про те, «хто працював» у комітах. У PowerShell (Windows) або Терміналі (Mac):

git config --global user.name "Ваше Ім'я" git config --global user.email "ваша-пошта-github@example.com"

Введіть ту саму електронну пошту, яку ви використовували для реєстрації на GitHub.

6. Створення репозиторію GitHub та підключення до мого ПК за допомогою VS Code

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

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

1. Увійдіть на https://github.comhttps://github.com/).
2. Натисніть кнопку + у верхньому правому куті → Новий репозиторій.
3. Введіть наступне:
4. Назва репозиторію: Назва проекту (англійською, дефіси замість пробілів. наприклад, my-first-app)
5. Виберіть Приватний (Корпоративні проекти обов'язково мають бути Приватними!)
6. Позначте прапорець «Додати файл README» ✅ ← Початківці обов'язково повинні це позначити. Це спрощує наступний крок (клонування).
7. Натисніть Створити репозиторій.
8. На сторінці створеного репозиторію натисніть зелену кнопку <> Code → Скопіюйте адресу на вкладці HTTPS.

6-2. Клонування на мій ПК за допомогою VS Code

1. Запустіть VS Code.
2. Ctrl + Shift + P (Cmd + Shift + P на Mac) → Відкриється палітра команд.
3. Введіть clone → Виберіть «Git: Клонувати».
4. Вставте скопійовану адресу репозиторію та натисніть Enter.
5. Також можна вибрати «Клонувати з GitHub» → Якщо браузер відкриється та запитає вхід/авторизацію GitHub, підтвердьте. (Тільки перший раз).
6. Виберіть місце для збереження проекту (наприклад, добре створити папку Документи/Проекти).
7. Коли клонування завершиться, у нижньому правому куті з'явиться сповіщення «Відкрити» → Натисніть його.
8. Якщо ви бачите README.md у провіднику файлів ліворуч, це успіх! 🎉 Ця папка тепер є робочою папкою, підключеною між моїм ПК та GitHub.

6-3. Завантаження документів планування — Concept.md, Design.md, ToDo.md

Вебверсія Claude Code може читати файли всередині репозиторію. Отже, розміщення документів планування в репозиторію — це те саме, що «завантаження документів».

1. Клацніть правою кнопкою миші на порожньому місці в провіднику файлів VS Code → Новий файл → Введіть назву 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. У полі введення повідомлення вгорі напишіть один рядок про те, що ви зробили. (наприклад, Додано документи планування).
4. Натисніть кнопку ✔ Commit → Збереження завершено на моєму ПК.
5. Якщо з'явиться спливаюче вікно «Немає проіндексованих змін», натисніть «Так», щоб закомітити все.
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. При першому доступі з'явиться інструкція «Підключити GitHub» → Дотримуйтесь інструкцій.
3. Ви будете перенаправлені на сторінку GitHub, де з'явиться екран встановлення GitHub App для Claude:
4. Виберіть свій обліковий запис GitHub (або організацію).
5. Виберіть діапазон доступу: Рекомендується вибрати «Лише вибрані репозиторії» та вказати репозиторій, створений у 6-1.
6. Натисніть Встановити / Авторизувати.
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 каже «Я відправив у гілку ОО», принесіть цю гілку на мій ПК для тестування. Grok Build має кнопку «Push to Github» у верхньому правому куті вебекрану, тому натисніть її, щоб відправити.

За допомогою 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» ✅. Документи в репозиторії набагато стабільніші, ніж пам'ять розмови.

Кінець.

Як сказав стародавній Морфей:

«Нео. Я можу лише показати тобі двері. Ти той, хто має пройти крізь них.»