Практичний курс

ШІ-розробник з Claude: сайти, Claude Code та автоматизація бізнесу

Покроковий курс, після якого ви вмітимете робити для бізнесу лендинги, багатосторінкові сайти, веб-застосунки, Telegram-ботів і автоматизації та продавати це як послугу. Ви не вчите програмування з нуля. Ви вчитеся ставити задачі ШІ, перевіряти результат і доводити його до запуску.

Модуль 1 · Сайти без кодуЛендинг, що продає, на власному домені: заявки в Telegram, аналітика, оплата

Модуль 2 · Claude CodeАгентна розробка: сайт з блогом і застосунок онлайн-запису з базою даних

Модуль 3 · АвтоматизаціяClaude API, Telegram-бот, n8n і продаж цих послуг клієнтам

Дипломний проєктРішення під ключ для реального бізнесу, кейс у портфоліо і сертифікат

🎁 БонусиНаскрізний приклад, реклама в Meta, перший клієнт за 14 днів, шаблони, глосарій

Як влаштований кожен урок

Блок	Що в ньому
🎯 Мета	Конкретний результат, який ви отримаєте після уроку
📖 Пояснення	Чому робимо саме так, без води
🛠 Покрокова інструкція	Кожна дія по порядку: куди натиснути, що вставити
📋 Промпти й код	Готові до копіювання кнопкою «Копіювати»
🧯 Типові помилки	Що зазвичай ламається і як це виправити
✅ Чекліст	Клікабельний: відмічайте виконане, прогрес зберігається
🧠 Перевір себе	3 питання з миттєвою перевіркою й поясненням

Для кого цей курс

Фрилансери й ті, хто змінює професію: хочете продавати сайти й автоматизацію, не витрачаючи роки на вивчення програмування.
Власники малого бізнесу: хочете самі зробити сайт, бота й автоматизувати рутину.
Розробники-початківці й маркетологи: хочете працювати в рази швидше з агентною розробкою.

Що знадобиться

Що	Навіщо	Вартість
Комп'ютер (Windows, macOS, Linux)	Модулі 2–3 неможливо пройти з телефона	—
Акаунт Claude	Модуль 1 — будь-який тариф; Claude Code — платний тариф або Claude Console	Див. claude.com/pricing
GitHub, Netlify, Vercel, Supabase, n8n	Код, хостинг, база даних, автоматизації	Безкоштовні тарифи для навчання
Баланс Claude API	Модуль 3 (бот, автоматизації)	Кілька доларів на тести
Домен	За бажанням, для власного сайту	Від кількох сотень грн на рік

Час: близько 35 годин уроків і практики + 1–2 тижні дипломного проєкту. При 5–7 годинах на тиждень — 6–8 тижнів. Найскладніші уроки — 10 і 12: закладіть на кожен по 2–3 вечори.

Підтримка та перевірка завдань

Бот підтримки: @ai_rozrobnyk_bot. Пишіть сюди питання щодо курсу, оплати або технічних проблем. Відповідь приходить від бота.

Тарифи «З куратором» і «Максимум»: надсилайте домашні завдання в цей бот. Щоб куратор швидко зрозумів, що перевіряти, починайте повідомлення так:

Шаблон повідомлення з завданнямУрок 4 · Ім'я Прізвище · тариф «З куратором» Посилання на сайт / файл / скриншот: Що вийшло: Що не вийшло або де сумніваюся:

Закрита група учнів (посилання ви отримали після оплати): обговорення, питання до інших учнів, новини курсу. Домашні завдання в групі не перевіряються, лише в боті.

Головне правило курсу

Робіть, а не читайте. Виберіть на першому уроці реальний бізнес (знайомого, свій або вигаданий, але конкретний) і виконуйте всі завдання для нього. Наприкінці у вас буде цілісний кейс, який можна показувати клієнтам.

Незалежний курс, не пов'язаний з Anthropic. Claude і Claude Code — продукти Anthropic. Інструменти, команди, тарифи й назви моделей швидко змінюються: якщо екран виглядає інакше, ніж описано, звіртеся з офіційною документацією (code.claude.com/docs, docs.claude.com, support.claude.com) або попросіть Claude допомогти, вставивши скриншот.

Почати модуль 1 →

Урок 1

Карта ШІ-розробника: інструменти, ролі й налаштування середовища

⏱ 45 хв🎯 Модуль 1

Після уроку ви:розумієте, який інструмент для якої задачі, маєте всі акаунти, редактор, папку проєктів і налаштований проєкт у Claude, а також обрали нішу для практики.

Нова роль: ви — керівник проєкту, Claude — команда

У звичайній розробці людина роками вчить мови програмування, а потім набирає код. У ШІ-розробці код пише Claude, а ваша робота інша:

Зрозуміти задачу бізнесу. Що клієнт хоче отримати: більше заявок, менше рутини, онлайн-запис?
Перетворити її на чітке ТЗ. Що саме зробити, з яких частин, як має виглядати результат.
Керувати виконанням. Давати Claude задачі невеликими кроками й правити напрям.
Перевіряти. Відкривати, клікати, тестувати на телефоні, шукати помилки.
Запускати й передавати. Домен, хостинг, доступи, інструкції для клієнта.

Ключова навичка курсу — чітко описати, що потрібно, і перевірити, що вийшло. Саме за це платять клієнти.

Три рівні інструментів

Інструмент	Що це	Коли брати
Claude (чат)	Звичайний чат на claude.ai або в застосунку. Вміє створювати артефакти: готові сторінки й документи, які можна переглянути	Бриф, тексти, прототип лендингу в одному файлі, пояснення помилок
Claude Code	Агент, який працює у вашій папці з проєктом: читає й пише файли, запускає команди, сам перевіряє результат	Усе, де більше одного файлу: сайти з кількома сторінками, застосунки, боти
Claude API	Спосіб викликати Claude з вашої програми	Коли Claude має працювати всередині продукту: бот, автоматизація заявок

Стек курсу і навіщо кожен інструмент

Інструмент	Роль	Аналогія
HTML + Tailwind CSS	Верстка лендингів	Цегла й фарба сайту
Astro	Багатосторінкові контентні сайти, блог	Конструктор для сайтів зі сторінками
Next.js	Веб-застосунки з логікою	Двигун для «розумних» сайтів
GitHub	Сховище коду та історія змін	Google Диск для коду з кнопкою «відкотити»
Netlify / Vercel	Хостинг: сайт в інтернеті	Оренда приміщення для сайту
Supabase	База даних і вхід користувачів	Розумна таблиця з охороною
Python	Боти й скрипти	Мова для «роботів»
n8n / Make	Візуальні автоматизації	Конвеєр з блоків «якщо → то»

🛠 Покрокове налаштування

Крок 1. Акаунти

Claude — claude.ai. Для модулів 2–3 знадобиться платний тариф або акаунт Claude Console.
GitHub — github.com → Sign up. Придумайте коротке професійне ім'я: воно буде в адресах ваших проєктів.
Netlify — netlify.com → Sign up → «Continue with GitHub». Вхід через GitHub спростить підключення проєктів.
Пароль кожного акаунта збережіть у менеджері паролів (Bitwarden, 1Password, вбудований у браузер). Не в нотатках чи месенджері.

Крок 2. Редактор VS Code

Завантажте з code.visualstudio.com і встановіть.
Відкрийте VS Code → ліва панель, іконка з квадратиками (Extensions) → знайдіть Ukrainian Language Pack, якщо хочете інтерфейс українською.
Встановіть розширення Live Server: воно відкриває HTML-файл у браузері й оновлює його після кожного збереження.

Крок 3. Папка для проєктів

Створіть папку projects у домашній папці (наприклад, Documents/projects). Кожен проєкт курсу — окрема папка всередині: landing, site, booking, bot.

Не використовуйте пробіли й кирилицю в назвах папок проєктів: my-landing, а не Мій лендинг. Деякі інструменти через це ламаються.

Крок 4. Проєкт у Claude

На claude.ai створіть проєкт «ШІ-розробка» (ліве меню → Projects → New project) і вставте в інструкції проєкту:

Інструкція для проєкту в ClaudeЯ вчуся створювати сайти й автоматизації з твоєю допомогою. Я не професійний програміст, тому: - пояснюй технічні кроки просто й по порядку, нумерованим списком; - коли даєш код, завжди кажи: у який файл його покласти, повний шлях, і як запустити; - віддавай файли повністю, а не шматками «тут змініть рядок», якщо я не прошу інакше; - для лендингів за замовчуванням: один HTML-файл, Tailwind CSS через CDN, mobile-first, семантична верстка, тексти українською; - попереджай про все небезпечне: ключі, паролі, видалення даних, платні дії; - перед великою задачею коротко опиши план і чекай мого «так»; - якщо я надсилаю помилку — спершу поясни причину одним реченням, потім виправлення.

Крок 5. Ніша для практики

Оберіть реальний бізнес, для якого робитимете всі завдання. Найкраще — знайомий, якому потрібен сайт. Хороші ніші для старту: стоматологія, салон краси, репетитор, фітнес-тренер, кав'ярня, автосервіс, фотограф. У них простий продукт і зрозумілий клієнт.

Промпт: опис нішіДопоможи мені описати бізнес для навчального проєкту. Бізнес: [що за бізнес, місто]. Постав мені 8 коротких питань, а потім склади «паспорт бізнесу» на одну сторінку: що продає, ціни, клієнт і його проблеми, конкуренти, чим відрізняється, як зараз отримує клієнтів, чого бракує.

Що ми продаємо клієнтам

Послуга	Складність	Модуль	Хто купує
Лендинг під ключ	★☆☆	1	Експерти, послуги, локальний бізнес
Сайт з блогом	★★☆	2	Клініки, студії, малий бізнес
Онлайн-запис, кабінет	★★★	2	Салони, школи, сервіси
Telegram-бот-консультант	★★☆	3	Інтернет-магазини, онлайн-школи
Автоматизація заявок	★★☆	3	Будь-який бізнес із потоком заявок

🧯 Типові помилки на старті

Помилка	Як правильно
Вчити все одразу: React, Python, бази даних…	Вчити лише те, що потрібно для поточного проєкту
Абстрактна практика «для себе»	Конкретний бізнес із конкретними цінами й клієнтами
Паролі в нотатках	Менеджер паролів з першого дня
Пропускати практику	Кожне завдання — частина вашого портфоліо

✅ Чекліст уроку

Акаунти Claude, GitHub, Netlify створені, паролі в менеджері
VS Code встановлено, Live Server працює
Є папка projects
Проєкт «ШІ-розробка» в Claude з інструкцією
Є «паспорт бізнесу» для вашої ніші

Урок 2

Бриф, ТЗ і прототип лендингу

⏱ 1,5 год🎯 Модуль 1

Після уроку ви:вмієте провести бриф із клієнтом, сформулювати офер і структуру, обрати дизайн-напрям і отримати робочий прототип лендингу в одному файлі.

Чому сайти «від ШІ» виглядають однаково

Промпт «зроби сайт для кав'ярні» дає усереднений результат: фіолетовий градієнт, «Ласкаво просимо», три однакові картки з іконками. Claude нічого не знає про конкретний бізнес, тому бере середнє з тисяч сайтів. Вихід — дати йому те, чого немає в інших: факти про бізнес, клієнта й стиль.

Процес складається з 5 кроків. Не пропускайте жодного: кожен робить результат відчутно кращим.

Крок 1. Бриф: збираємо факти

Промпт: бриф-анкетаТи досвідчений веб-стратег. Мій клієнт: [паспорт бізнесу з уроку 1]. Склади бриф-анкету з 15 питань для клієнта, щоб зробити лендинг, що продає. Згрупуй за темами: ціль сайту, клієнти та їхні проблеми, послуги й ціни, конкуренти, довіра (відгуки, досвід, сертифікати, цифри), стиль. Питання мають бути простими для людини без маркетингової освіти. Додай до кожного приклад відповіді.

Як проводити бриф: найкраще дзвінком на 30–40 хвилин. Записуйте розмову (з дозволу клієнта), а потім вставте розшифровку в Claude. Клієнти краще говорять, ніж пишуть.

Промпт: з розмови в брифОсь розшифровка розмови з клієнтом: <розмова> [текст] </розмова> Оформи заповнений бриф за темами. Виділи окремо: 5 найсильніших фактів про бізнес (цифри, досвід, унікальність), 5 найчастіших заперечень клієнтів, і список інформації, якої бракує.

Крок 2. Офер і структура

Офер — головне обіцяння сайту в одному-двох реченнях: хто ви, що отримає клієнт і чому саме у вас. Це перше, що бачить відвідувач. На нього відведено 3–5 секунд.

✗ Слабкий офер
Стоматологія «Усмішка» — ваша усмішка в надійних руках

✓ Сильний офер
Лікування зубів без болю на Позняках. Перший огляд і план лікування — безкоштовно, запис на сьогодні

Промпт: офер і структураОсь бриф клієнта: <бриф> [вставте] </бриф> 1) Запропонуй 3 варіанти оферу (заголовок до 10 слів + підзаголовок до 20 слів). Конкретна вигода, місце, цифри. Без кліше на кшталт «якість», «надійність», «індивідуальний підхід». 2) Запропонуй структуру лендингу з 7–9 блоків. Для кожного блоку: мета, яке заперечення клієнта він знімає, що конкретно розмістити (з фактів брифу). 3) Окремо: якої інформації від клієнта не вистачає (фото, відгуки, ціни).

Типова структура лендингу послуги, від якої можна відштовхуватися:

Перший екран: офер, кнопка дії, фото, 2–3 факти довіри.
Проблема: «Знайомо?» — біль клієнта його словами.
Рішення/послуги: що робите, з цінами або «від».
Чому ми: 3–4 конкретні відмінності з доказами.
Як це працює: 3–4 кроки від заявки до результату.
Відгуки / кейси: справжні, з іменами або скриншотами.
FAQ: заперечення у формі питань.
Фінальний заклик + форма.
Контакти й карта.

Крок 3. Дизайн-напрям

Промпт: дизайн-напрямиЗапропонуй 3 різні візуальні напрями для лендингу [бізнес]. Аудиторія: [хто]. Для кожного: - настрій (3 слова); - палітра: 5 кольорів у HEX з ролями (фон, текст, акцент, другорядний, рамки); - пара шрифтів з Google Fonts (заголовки + текст) з підтримкою кирилиці; - характер фото й ілюстрацій; - один «фірмовий» елемент, який запам'ятається; - на який відомий тип сайтів схожий. Уникай типових ШІ-рішень: фіолетово-синіх градієнтів, однакових карток з іконками, «скляних» ефектів, емодзі замість іконок.

Референси. Попросіть клієнта надіслати 2–3 сайти, які йому подобаються (не обов'язково з його ніші). Завантажте скриншоти в Claude: «Опиши, що спільного в стилі цих сайтів, і адаптуй це для нашого напряму».

Крок 4. ТЗ і прототип

Тепер збираємо все в одне ТЗ. Чим детальніше, тим менше правок потім.

Промпт-ТЗ на лендингСтвори лендинг одним HTML-файлом. БІЗНЕС: [назва, що робить, місто] ЦІЛЬ СТОРІНКИ: [заявка / дзвінок / запис у месенджер] АУДИТОРІЯ: [хто, їхній головний біль] ОФЕР: Заголовок: [обраний] Підзаголовок: [обраний] СТРУКТУРА (блоки по порядку): [список з кроку 2, з конкретним змістом кожного блоку] ДИЗАЙН: [обраний напрям: палітра HEX, шрифти, фірмовий елемент] ТЕХНІЧНІ ВИМОГИ: - Tailwind CSS через CDN, шрифти з Google Fonts; - mobile-first: спершу ідеально на 375px, потім планшет і десктоп; - кнопка дії видна на першому екрані телефона; - меню на мобільному ховається в «бургер»; - семантичні теги (header, main, section, footer), один h1; - форма заявки: ім'я, телефон, коментар (необов'язково), поки без відправки; - фото — заглушки сірого кольору з підписом, яке фото має бути; - іконки — вбудовані SVG (Lucide), не емодзі; - усі тексти повністю, українською, без lorem ipsum, на основі фактів брифу.

Claude створить артефакт: сторінку, яку видно прямо в чаті. Скопіюйте код у файл:

У VS Code: File → Open Folder → projects/landing (створіть папку).
Створіть файл index.html, вставте код, збережіть (Ctrl+S / Cmd+S).
Правий клік на файлі → «Open with Live Server». Сайт відкриється в браузері.
Натисніть F12 → іконка телефона (Toggle device toolbar) → оберіть iPhone. Так ви бачите мобільну версію.

Крок 5. Ітерації по блоках

Не переробляйте все одразу. Працюйте блок за блоком і давайте конкретні правки:

✗ Розмито
Зроби красивіше

✓ Конкретно
Блок «Ціни»: 3 тарифи в ряд на десктопі, стовпчиком на мобільному. Середній — виділений рамкою кольору акценту й плашкою «Найпопулярніший». Під ціною — 4 пункти з галочками.

Корисні правки, які майже завжди покращують результат:

«На мобільному шапка займає пів екрана: зменш логотип і сховай меню в бургер».
«Відгуки виглядають вигадано: оформи як скриншоти повідомлень у месенджері».
«Збільш відступи між секціями: сторінка виглядає тісною».
«Зроби кнопку дії "липкою" внизу екрана на мобільному».
«Прибери всі емодзі, заміни на SVG-іконки в одному стилі».

Довгий файл. Коли лендинг стає великим, просіть: «Віддай лише змінений блок і скажи, який блок у файлі ним замінити». Або переходьте в Claude Code (модуль 2): там агент сам редагує файл.

🧯 Типові помилки

Проблема	Причина	Рішення
Сайт шаблонний	Мало фактів у ТЗ	Повернутися до брифу, додати цифри, деталі, справжні формулювання клієнта
Claude обрізав код посередині	Занадто довга відповідь	«Продовж з місця, де зупинився» або просіть файл частинами
Після правки зламалося інше	Claude переписав весь файл	«Змінюй лише блок X, нічого іншого не чіпай»
Шрифт без кирилиці	Шрифт не підтримує українські літери	«Заміни шрифт на такий, що підтримує cyrillic, наприклад Manrope, Unbounded, Inter»

✅ Чекліст уроку

Заповнений бриф вашої ніші
Обраний офер і структура з 7–9 блоків
Обраний дизайн-напрям з палітрою й шрифтами
projects/landing/index.html відкривається через Live Server
Мобільна версія (375px) виглядає акуратно
Зроблено мінімум 5 ітерацій по блоках

Урок 3

Якість: тексти, швидкість, SEO

Цей урок доступний у повній версії курсу

У безкоштовній версії відкриті «Про курс», урок 1 і урок 2. Повний курс: 15 уроків, бонуси, 45 тестових питань, шаблони, бібліотека промптів і сертифікат.

ШІ-розробник з Claude: сайти, Claude Code та автоматизація бізнесу

Як влаштований кожен урок

Для кого цей курс

Що знадобиться

Підтримка та перевірка завдань

Головне правило курсу

Карта ШІ-розробника: інструменти, ролі й налаштування середовища

Нова роль: ви — керівник проєкту, Claude — команда

Три рівні інструментів

Стек курсу і навіщо кожен інструмент

🛠 Покрокове налаштування

Крок 1. Акаунти

Крок 2. Редактор VS Code

Крок 3. Папка для проєктів

Крок 4. Проєкт у Claude

Крок 5. Ніша для практики

Що ми продаємо клієнтам

🧯 Типові помилки на старті

✅ Чекліст уроку

Бриф, ТЗ і прототип лендингу

Чому сайти «від ШІ» виглядають однаково

Крок 1. Бриф: збираємо факти

Крок 2. Офер і структура

Крок 3. Дизайн-напрям

Крок 4. ТЗ і прототип

Крок 5. Ітерації по блоках

🧯 Типові помилки

✅ Чекліст уроку

Якість: тексти, швидкість, SEO

Живий сайт: GitHub, хостинг, домен

Заявки в Telegram, аналітика, оплата

Claude Code: встановлення

CLAUDE.md і робочий цикл

Сайт з блогом на Astro

MCP, скіли, субагенти, хуки

Застосунок онлайн-запису

Claude API

Telegram-бот-консультант

Автоматизація в n8n

Як продавати послуги

Дипломний проєкт

Приклад: клініка «Усмішка»

Реклама в Meta з Claude

Перший клієнт за 14 днів

Шаблони й стартові набори

Глосарій

Бібліотека промптів розробника